Nuxt のアプリを Firebase Hosting を使って公開する

Overview

Nuxt と Firebase Hosting を使ってサイトを公開したのでその記録について記載します。

Install Nuxt

公式のインストール手順 に則って進めます。

npx create-nuxt-app emahiro.dev

今回自分は以下のような設定にしました。

create-nuxt-app v2.12.0
✨  Generating Nuxt.js project in emahiro.dev
? Project name emahiro.dev
? Project description emahiro's portfolio site
? Author name emahiro
? Choose the package manager Npm
? Choose UI framework Bootstrap Vue
? Choose custom server framework Micro
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework Jest
? Choose rendering mode Single Page App

ただ、裏側に Firebase を使っているので必要なかったものもありました。

Build

npm run build
npm run start

# start server at localhost:3000

これで .nuxt 配下にビルドされたアプリケーションが作成され、 localhost:3000 で接続できるようになります。

Nust のアプリを Firebase Hosting で公開する

Firebase の通常設定の流れのまま firebase deploy を行なった場合、デプロイが完了しても Firebase Hosting のアプリのテンプレートが反映されて Nuxt のアプリが反映されませんでした。

原因は単純で、Firebase の通常の設定フローでぽちぽち進めていった場合に、Firebase Hosting で見る先は $FB_PROJECT_ROOT/pulic/index.html になり、 Nuxt の成果物とはディレクトリ( dist )が異なります。 そのため、Nuxt のビルドした成果物を Firebase Hosting で見れるようにする必要があります。

Nuxt の成果物を Firebase Hosting で参照するには Firebase Hosting の参照先を設定時の public から Nuxt の成果物が配置される dist に変更します。

diff --git a/firebase.json b/firebase.json
index 7b0091d..5a0db41 100644
--- a/firebase.json
+++ b/firebase.json
@@ -13,7 +13,7 @@
     ]
   },
   "hosting": {
-    "public": "public",
+    "public": "dist",
     "ignore": [
       "firebase.json",
       "**/.*",

これで再度 firebase deploy を実行すると Nuxt のページが Firebase Hosting で参照されるようになりました。