令和最新版 firebase + nuxt3のwebアプリ開発手順①
2022/6/15情報
firebase CLIの最新のfirebase-tools(3.0.0-rc.4)をインストールしてしまうと、エミュレーターテストやデプロイができません。
バグ修正を待つしかなさそうなので、新しいアプリを作ろうとしている方はご注意ください
(もしできるようになった方がいましたら、コメント欄に記載してもらえると助かります)
全体像
- 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 hosting
・・・
? 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
nuxt2の時はpublic directoryは”dist”でしたが、nuxt3では”.output/public”を設定します。
firebase関連のツールをインストール
$ npm install --save firebase
$ yarn add --dev firebase-admin firebase-functions firebase-functions-test
これでpackage.jsonは以下のようになっているはずです。(特に触りません。参考までに)
{
"private": true,
"scripts": {
"dev": "nuxi dev",
"build": "nuxi build",
"start": "node .output/server/index.mjs"
},
"devDependencies": {
"firebase-admin": "^10.0.1",
"firebase-functions": "^3.16.0",
"firebase-functions-test": "^0.3.3",
"nuxt3": "latest"
}
}
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のデプロイ詰まっていたので
参考になりました。
ありがとうございました。