Firebase
nuxt.js

Firebase でアプリケーション作ったら functionsで結構ハマったのでメモ


概要

Firebaseの勉強をしていたのでまとめ

hosting + authenticationはいろいろやっている人が多かったけどfunctionsも使っている人が少ない印象だったので。

ただ、ローカル起動はわからん。。。教えてくれる人募集。。。


対象


  • nuxtとfirebase hosting + authentication を完全に理解した人

  • functions とかわからんし、という人


hosting + authentications + nuxt

このあたり画像つきで書いてくれている人が多いので割愛

例えば: https://qiita.com/potato4d/items/cfddeb8732fec63cb29c


functions

https://firebase.google.com/docs/functions/get-started?hl=ja

のとおりやればいいらしいが、ちょっとハマったのでとりあえずやったことを書いてます。

functionsをinstallする

firebase init functions

デフォルトのリージョンがusになっていたので東京に修正する


index.ts

export const helloworld = functions

.region('asia-northeast1')
.https.onRequest

onRequestだとcrosでエラーと言われるので、 https://qiita.com/qrusadorz/items/40234ac0b5c5c2315cad

を読んで納得した後onCallに変更する(ドキュメントを見ててもよくわからなかった人


index.ts

import * as functions from 'firebase-functions';

import { CallableContext } from 'firebase-functions/lib/providers/https';

export const helloworld = functions
.region('asia-northeast1')
.https.onCall((data, context: CallableContext) => {
if (!context.auth) {
// permission-deniedで403を返したり
throw new functions.https.HttpsError('permission-denied', '認証してないから使えません!');
}
if (!data.name) {
// invalid-argumentで400を返したりする
throw new functions.https.HttpsError('invalid-argument', 'nameは必須です!');
}
// なんかいろいろやって200でオブジェクトを返却する
// nameはclientから送られてくるデータ
const greet = `hello ${data.name}`;
return {
greet
}
})


で持って使用するnodeのバージョンを10(まだGAじゃない)に変更しようとしたが、実際に使おうとしたら何故か401が返ってくる

Issue: https://github.com/firebase/firebase-functions/issues/432

そのためバージョンは8にする


package.json

{

"name": "functions",
"engines": {
"node": "8"
}
}

nuxt側で対象のfunctionを呼ぶようにする.ただリージョンは指定する. これしないとcorsでナンタラカンタラ言われる.

デフォルトのusを見ているので、おそらく存在しないから怒られているんだと推測


認証後のページ

<template>

<section class="container">
<div>
<div>
<p><input type="text" v-model="name" placeholder="名前">{{name}}</p>
<p><button @click="call">call</button></p>
<p>{{greet}}</p>
</div>
</div>
</section>
</template>

<script>
import firebase from '~/plugins/firebase';
export default {
data() {
return {
name: '',
greet: '',
client: firebase.app().functions("asia-northeast1").httpsCallable("helloworld")
}
},
methods: {
call() {
this.client({
name: this.name
}).then(result => {
this.greet = result.data.greet;
})
}
}
}
</script>



まとめ

いろいろまとめたらfunctionsって簡単につかえますねー。って感覚がある。この記事の意義、、、なんやねん。