令和最新版 firebase + nuxt3のwebアプリ開発手順①

2022/6/15情報

firebase CLIの最新のfirebase-tools（3.0.0-rc.4）をインストールしてしまうと、エミュレーターテストやデプロイができません。
バグ修正を待つしかなさそうなので、新しいアプリを作ろうとしている方はご注意ください
（もしできるようになった方がいましたら、コメント欄に記載してもらえると助かります）

全体像

1. Nuxt3アプリ作成〜firebaseデプロイ
2. TailwindCSSの導入
3. ログイン機能の実装
4. 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制作をやっている人が、エンジニアハウスに来てから電子工作にハマるようになるのが多いです）

https://engineerhouse.org/

土日に活動していますので、興味ある方は覗きにきてください。
管理者メールアドレス　　[e-mail]