Nuxt.jsをFirebase Hostingで動かす

いつも Vercel(旧 Zeit / Now)か Heroku か契約中のホスティングサーバを使うことが多かったのですが,Cloud Firestore を使っていて Firebase Hosting に目が留まったので試してみました.

初期設定

初めにパッケージをインストールします.

$ npm i -g firebase-tools

次に,プロジェクトを Firebase Hosting にデプロイするための設定ファイルを生成します.

$ firebase init

最初のダイアログで Hosting を選択します.

デプロイするプロジェクトは新規でも既存でも可能です.

公開ルートディレクトリは public になっていますが,npm run generate で生成されるのはデフォルトでは dist になっているので,dist で設定します.

終了すると Firebase の設定ファイルが自動生成されます.

静的コンテンツのデプロイ

コンテンツの準備が整ったら,generate してデプロイします.

$ npm run generate
$ firebase deploy

デプロイ結果が反映されないとき

Firebase Hosting は generate 等で生成したコンテンツをデプロイすることで更新することができますが,実際に接続してみると内容が反映されていないことがありました.

コンソールを見る限りではデプロイに成功していて,ターミナルでもエラーは出ていません.

ビルドすることで生成される dist を削除し,再生成することで直りました.

また,似たコマンドとして build もありますが,静的コンテンツを生成するコマンドではないので今回は用いることができません.

最後に

Nuxt がまだまだ理解できてない部分が多いので,Vercel や Heroku に上げるときにエラーが頻発していましたが,Firebase はドキュメントが充実しているので結構使いやすいと思いました.

Firebase Hosting はデプロイもそれなりに早いので,時間がかかって躓くことが多く,無料だとサーバが 10 分で眠ってしまう Heroku の価値が私の中で下がりつつあります…

コメント

タイトルとURLをコピーしました