Nuxt3をFirebaseにデプロイする手順です
Nuxt3 プロジェクトを作成する
下記公式ページの通りに作業する
まずは新しいプロジェクトを作成する
% npx nuxi init nuxt3-app
作成されたディレクトリに移動して依存関係をインストールする
% cd nuxt3-app
% yarn install
一旦ここまででローカルで起動してみる
% yarn dev -o
起動できた
続いて FIrebase のプロジェクトを新規作成する
Firebase のプロジェクト作成
Firebase コンソールをブラウザで表示する
「プロジェクトを作成」ボタンから作成ウィザードを開き適当な名前を入力する
プロジェクトができたら「プロジェクトの設定」から「プロジェクトID」を確認しておく（後で使う）
続いて FIrebase にデプロイする
Firebase Hosting と Cloud Functions にデプロイする
続いて下記公式ページの通りにCLIから作業する
Firebaseの依存関係をプロジェクトに追加する
% yarn add --dev firebase-admin firebase-functions firebase-functions-test
Firebase CLIをグローバルにインストールする
% yarn global add firebase-tools
Firebaseにログインする
% firebase login
Firebase Hosting を設定する
補足：
-
--project引数にプロジェクトIDを指定する -
.output/publicにするのと、single-page appはNoにする
% firebase init hosting --project nuxt3-app-a3e57
? What do you want to use as your public directory? (public) .output/public
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) N
? Set up automatic builds and deploys with GitHub? (y/N) N
firebase.json に追記する
"site" にはプロジェクトIDを指定する
firebase.json
{
+ "functions": { "source": ".output/server" },
"hosting": {
+ "site": "nuxt3-app-a3e57",
+ "cleanUrls": true,
+ "rewrites": [{ "source": "**", "function": "server" }],
"public": ".output/public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
ローカル環境で動かしてみる
% NITRO_PRESET=firebase yarn build
% firebase emulators:start
: 略
✔ hosting[nuxt3-app-a3e57]: Local server: http://localhost:5000
: 略
表示されたURLにブラウザからアクセスすると画面が表示される
Firebase Hosting にデプロイする
% NITRO_PRESET=firebase yarn build
% firebase deploy
無料プランで動作している場合、デプロイ中にこんなエラーが出る
Error: Your project nuxt3-app-a3e57 must be on the Blaze (pay-as-you-go) plan to complete this command. Required API cloudbuild.googleapis.com can't be enabled until the upgrade is complete. To upgrade, visit the following URL:
有料プランに変更する
もう一度デプロイすると成功する
% firebase deploy
: 略
✔ Deploy complete!
: 略
Hosting URL: https://nuxt3-app-a3e57.web.app
表示されたURLにブラウザからアクセスすると画面が表示される
多分SSRされているはず？
以上でデプロイ完了