Nuxt.jsでFirebase Functionsを使用する
2019-11-19
目次
概要
Nuxt.js のプロジェクトで、Firebase Functions を使用して「Hello World!」を行います！
Nuxtはちょっと分かるけど、NuxtとFirebaseの組み合わせ方わからん…！
ってなってる人の助けになれば…
セットアップ
Nuxt と Firebase Hosting のセットアップ方法については下記別記事で掲載しています。
『Nuxt + Firebase Hosting』で超速 deploy
firebase initの際に、firebase の使用する機能の選択で
HostingFunctionsFirebase Functions の種類
Firebase Functions には種類が2つあります。
以降でそれぞれの説明を行います！
アプリから呼び出す関数
公式リファレンス【アプリから関数を呼び出す】
Firebase クライアント SDK の最小バージョンとの連携によって呼び出される関数。
簡単に言うと Firebase SDK が登録されているアプリケーションから呼び出される用の関数。 今回の記事ではこちらの関数を使っていきます。
HTTP リクエスト経由で呼び出す関数
公式リファレンス【HTTP リクエスト経由で関数を呼び出す】
HTTP リクエストで関数をトリガーできます。
簡単に言うと誰でも
POSTMANcurlリクエストを行えば、レスポンスが得られる関数。
ただ、Nuxt のプロジェクトでこちらの関数を使おうとすると
Access-Control-Allow-Originエラーで、悩まされる事になります。私は半日くらいこいつに時間を取られました…
こちらについては下記の素 敵な記事を参考にしてください。
Firebase の Cloud Functions で CORS が~とか Access-Control-Allow-Origin が~と言われたらこれ
Firebase SDK の登録
よし、じゃあ『アプリから呼び出す関数』の方で実装するぞ！
あれ、でも Nuxt の場合 SDK の登録ってどうやって行うんだ…？
と初歩の初歩で引っかかってしまい、探し回っているうちに下記の素敵な記事 2 つを発見 ・【v2 対応】Nuxt.js と Firebase を組み合わせて爆速で Web アプリケーションを構築する ・Firebase と Nuxt.js を使ってユーザ認証関係を簡単に作ってみる+1 ヶ月前の自分に教えたいリンク集
どうやら
pluginfirebas をインストール & セーブ
npm install firebase --saveplugin ファイルの作成
import firebase from 'firebase'
if (!firebase.apps.length) {
firebase.initializeApp({
apiKey: "API_KEY",
authDomain: "APP_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "1234567890"
})
}
export default firebase
firebase.initializeApp参考にした記事は2つともユーザー認証系の記事だったため、今回の場合
の条件分岐は無くても動きます。if (!firebase.apps.length)
これでSDKの登録が行われたプラグインを作成する事ができました！
functionの作成
セットアップがうまくいっていればプロジェクトのルートに
functionsindex.js「Hello World!」を返す関数の作成
const functions = require('firebase-functions');
exports.helloworld = functions.https.onCall((data, context) => {
return "Hello World! " + data.name;
});関数の作成自体はものすごく簡単ですね。 関数の詳細、
datacontext作成した関数を deploy する
firebase deploy --only functions上記コマンドで functions だけが deploy されます。
完了すると該当のプロジェクトの Functions に追加されているのが確認できるはずです！
関数を呼び出す
では、さっそく関数を呼び出してみましょう。 作成した
~/plugin/firebase.js~/pages/index.vue<template>
<div class="container">
<h1>Welcome!</h1>
<div class="inputs">
<label for="name">お名前は？</label>
<input v-model="name" name="name" class="i-name" type="text">
<div class="send-box">
<input @click="helloworld" type="button" value="送信">
</div>
</div>
</div>
</template>
<script>
import firebase from '~/plugins/firebase'
export default {
data () {
return {
name: ''
}
},
methods: {
helloworld () {
const hello = firebase.functions().httpsCallable('helloworld')
hello({ name: this.name })
.then((result) => {
console.log(result)
alert(result.data)
})
.catch((error) => {
console.log(error)
})
}
}
}
</script>
<style lang="scss">
body{
background: #2d3436;
color: #dfe6e9;
.container{
padding: 30px;
h1{
text-align: center;
}
.inputs{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding-top: 20px;
label{
display: block;
width: 100%;
padding-bottom: 10px;
text-align: center;
}
}
}
}
</style>
HTML部分
html部分については簡単な説明にさせていただきます。
<input v-model="name" name="name" class="i-name" type="text">data()<input @click="helloworld" type="button" value="送信">JS部分
import firebase from '~/plugins/firebase'plugindata
namemethods
呼び出しの要となる部分です。説明はコメントアウトで記載しました。
<script>
// 略
methods: {
helloworld () {
// pluginのfirebaseからfunctionsを呼び出し、onCallメソッドのどの関数を呼び出すか指定
const hello = firebase.functions().httpsCallable('helloworld')
// 関数にdataを渡す
hello({ name: this.name })
.then((result) => {
console.log(result)
alert(result.data)
})
.catch((error) => {
console.log(error)
})
}
}
// 略
</script>ローカルで呼び出してみる。
npm run devで nuxt をローカルで立ち上げ、自分の名前を入れて送信すると…
で、できた :sob:！
まとめ
新しい便利なもの( nuxt )と新しい便利なもの( firebase )を一緒に使おうと思うと プロの人達ならすぐわかるような事で引っかかってしまい、ドキュメントが無かったり。 便利なもの同士が競合を起こしていたり( nuxt と netlify forms など…)意外と大変だと痛感しました。 どちらもそれぞれで極めてから使用するべきだなぁ:thought_balloon: