令和最新版 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

全体像

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

・・・
? 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制作をやっている人が、エンジニアハウスに来てから電子工作にハマるようになるのが多いです）
https://engineerhouse.org/

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