令和最新版 firebase + nuxt3のwebアプリ開発手順①
更新情報
2022/6/15情報
firebase CLIの最新のfirebase-tools(3.0.0-rc.4)をインストールしてしまうと、エミュレーターテストやデプロイができません。
2022/7/18情報
- こちらのissueを参考にしたらデプロイできました
https://github.com/nuxt/framework/issues/4961
コツとしてはいったんoutput/server内のnode_modulesを消去して、パッケージをインストールし直すこと
NITRO_PRESET=firebase npm run build
cd .output/server && rm -rf node_modules && npm i
// ルートディレクトリに移動後
firebase deploy
全体像
- Nuxt3アプリ作成〜firebaseデプロイ
- TailwindCSSの導入
- ログイン機能の実装
- firestoreを使ったデータの読み取り、書き込み、更新
Nuxt3アプリの作成
# フォルダ移動後
$ npx nuxi init .
$ yarn install
$ yarn run dev -o
ひとまずnuxt3アプリができ、ローカルで動くことを確認しましょう。
今はNuxtは触らずfirebase hostingにデプロイしてきちんと動くことを確かめます。
firebaseのインストールと設定
// firebase CLIのインストール
$ yarn global add firebase-tools
$ firebase init
・・・
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to
confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
最低限、以下を選択。他は必要に応じて
Firestore
Functions
Hosting
Hosting
Storage
=== Firestore Setup
・・・
? What file should be used for Firestore Rules? firestore.rules
? File firestore.rules already exists. Do you want to overwrite it with the Firestore Rules from the Firebase
Console? No
? What file should be used for Firestore indexes? firestore.indexes.json
? File firestore.indexes.json already exists. Do you want to overwrite it with the Firestore Indexes from the
Firebase Console? No
=== Functions Setup
・・・
? What language would you like to use to write Cloud Functions? TypeScript
? Do you want to use ESLint to catch probable bugs and enforce style? Yes
✔ Wrote functions/package.json
✔ Wrote functions/.eslintrc.js
✔ Wrote functions/tsconfig.json
✔ Wrote functions/tsconfig.dev.json
✔ Wrote functions/src/index.ts
✔ Wrote functions/.gitignore
? Do you want to install dependencies with npm now? Yes
=== Hosting Setup
・・・
? What do you want to use as your public directory? .output/public
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
✔ Wrote .output/public/404.html
✔ Wrote .output/public/index.html
nuxt2の時はpublic directoryは”dist”でしたが、nuxt3では”.output/public”を設定します。
=== Storage Setup
? What file should be used for Storage Rules? storage.rules
firebase関連のツールをインストール
$ yarn add firebase
$ yarn add --dev firebase-admin firebase-functions firebase-functions-test
これでpackage.jsonは以下のようになっているはずです。(特に触りません。参考までに)
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"firebase-admin": "^11.5.0",
"firebase-functions": "^4.2.1",
"firebase-functions-test": "^3.0.0",
"nuxt": "^3.2.2"
},
"dependencies": {
"firebase": "^9.17.1"
}
}
firebase.jsonの書き換え
<your_project_id>のところはfirebaseコンソールの「プロジェクトの設定」にあるプロジェクトIDを記入します。
参考:https://v3.nuxtjs.org/guide/deployment/firebase
{
"functions": { "source": ".output/server" },
"hosting": [
{
"site": "<your_project_id>",
"public": ".output/public",
"cleanUrls": true,
"rewrites": [{ "source": "**", "function": "server" }],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
]
}
ビルド
$ NITRO_PRESET=firebase yarn build
firebase emulatorsを用いたローカルテスト
$ firebase emulators:start
もしかしたら、MacOS Montereyの場合は以下のようにport 5000が使われているのメッセージが出てエラーになるかもしれません。
デフォルト設定ではAirPlay Receiverがport 5000を使用しているのでオフにしましょう。(設定 > 共有 > AirPlayレシーバーのチェックを外す)
⚠ hosting: Port 5000 is not open on localhost, could not start Hosting Emulator.
Firebase serve error: Port 5000 is not open. Could not start functions emulator
デプロイ
$ npx firebase deploy
・・・
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/sample-project/overview
Hosting URL: https://sample-project.web.app
これでhttps://sample-project.web.app
にアクセスするとNuxtのページが表示されます。
今のところNuxt3は何も触ってないので、次からログインやページを作りましょう。
お知らせ
大阪の長居公園の近くにあるエンジニアハウスでは、エンジニアが集まって電子工作やweb制作をしています。
(web制作をやっている人が、エンジニアハウスに来てから電子工作にハマるようになるのが多いです)
土日に活動していますので、興味ある方は覗きにきてください。
管理者メールアドレス zhitian_xiongai@yahoo.co.jp
Discussion
SSRのデプロイ詰まっていたので
参考になりました。
ありがとうございました。