Firebaseはじめ

Firebaseでサイトを作ったことがないなとおもったのと、手軽に何か使える環境があると便利だなということで試してみる。

思ったよりも手間取ったので、引っかかりポイントをまとめるという意味で書いてみる。

以下のページに従って実行していく。

Firebase を JavaScript プロジェクトに追加する  |  Firebase Documentation

まずはFirebaseのコンソールからProjectの作成を行う。Project名をつけて、インストラクションに従って実行。今回は展開先も必要なのでFirebase Hostingも設定する。ここはオプションなので、必要に応じて。Firebase Project名、アプリのニックネームをつけて進める。

次にFirebase Hostingに紐づけをしているので、Firebase CLIをインストールする。ローカルマシンに適当なフォルダを作り、そこでCommand Line上でCLIのインストールを行う。(バイナリからのインストールとnpmからのインストールがあるが、今回はnpmからのインストールを選択する。node.jsのインストールは割愛)

PS c:\source\firebasefirst> npm install -g firebase-tools

次はFirebase CLIにログインをする。

PS c:\source\firebasefirst> firebase login

次はFirebaseプロジェクトを初期化する。このコマンドではこの下にFirebaseプロジェクトで必要となるファイルが作成される。

PS c:\source\firebasefirst> firebase init

いろいろな選択肢が出てくるが、全部入れて、全部defaultで進めていく。そして最後にdeploy。

PS c:\source\firebasefirst> firebase deploy

楽勝と思ったらエラーが。。

むむ。。エラーメッセージからすると、今のプランではだめでBlazeという有料プランにしないと使えないといわれている。そこで調べてみるとどうやらCloud Functionsが有料プランでしか使えなくなるらしいというという記事が見つかる(2020年5月時点の記事)。これによるとCloud FunctionsのNode.jsのバージョンが8から10になる。それに合わせてNode.js 10以上は無料プランであるSparkではだめで、有料のBlazeプランじゃない使えない。

まずはfirebase initで出てくる利用するコンポーネントのリストでfunctionsを外してみて、firebase deployをしてみる。しかし結果は変わらず。

とある記事を見ていると、仮でNode.js 8を指定すれば動くという情報もあるので、いったんfunctions/package.jsの中の以下の部分を12から8に変更してみる。

"engines": {
   "node": "12"
 },

で再度firebase initを行ってみるが、残念ながらエラー。

結局Node.js 10以上じゃないとだめってことね。。ってことで、結局SparkプランからBlazeプランへ(Pricing)。Firebase Consoleの左下にUpgradeからプランの更新。Paymentの設定をしたりして、Blazeプランへ。

さて、気分を取り直してfirebase init, firebase deployを実行。しかしまたまたエラー。。。

今度はParse Errorということで。。。やっぱりググってみると今度はstack overflowで該当のエラーについてのコメント発見。

Firebase deploy keeps giving me an Error: Parse Error in remoteconfig.template.json

簡単にいうとfirebase.jsonの中でremoteconfig.template.jsonを参照しているけど、テンプレートがないという状況。でも解決策は簡単で、プロジェクトフォルダ直下のfirebase.jsonの中の以下の部分を削除する。

"remoteconfig": {
   "template": "remoteconfig.template.json"
 }

再度再度気を取り直してfirebase init, firebase deploy。ついに成功ー。Consoleに出力されたURLにアクセスすると以下のように表示されます。

いったん単なるfirebaseのhostingまでは終了。