【2024年3月更新】 Firebase + Nuxt3のwebアプリ開発手順① アプリ作成

更新情報

2024/3/17

yarn→npmに
公式ドキュメントを参考に、最新の書き方に合わせました

2023/10/31

手順は個人ブログに書いていましたが、共有性を考えzennに戻しました。
（個人ブログでは趣味で作ったアプリケーションや、GAS教材を販売しています）

その他、最新のNuxt3情報に更新しました。

ちなみにfirebase deployの不具合は解消されています

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

2022/6/15情報

firebase CLIの最新のfirebase-tools（3.0.0-rc.4）をインストールしてしまうと、エミュレーターテストやデプロイができません。

全体像

1. Nuxt3アプリ作成〜firebaseデプロイ
2. 各種スタイル用フレームワーク、ライブラリの導入
3. ログイン機能の実装
4. firestoreを使ったデータの読み取り、書き込み、更新

Nuxt3アプリの作成

# フォルダ移動後
$ npx nuxi@latest init .

Nuxt 3.10以降、コマンドはこれだけで立ち上がるようになりました。
（その分、立ち上げに少し時間がかかるようになりましたが）

ひとまずnuxt3アプリができ、ローカルで動くことを確認しましょう。
今はNuxtは触らずfirebase hostingにデプロイしてきちんと動くことを確かめます。

$ npm run dev -o

firebaseのインストールと設定

この後は基本的に公式ドキュメントのやり方に沿ってやれば、デプロイまでできます。
https://nuxt.com/deploy/firebase

// firebase CLIのインストール
$ npm global install firebase-tools

$ firebase init

この後、何をインストールするかを聞かれます。
Hostingだけなら、functionsとhostingだけで良いです。

=== 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

基本的にデフォルト設定のままで良いですが、唯一Hosting setupのpublic directoryは.output/publicと手動で設定する必要があります。

authやcloudstoreなど、他は必要に応じて選択してください

firebase関連のツールをインストール

$ npm install firebase
$ npm install --dev firebase-admin firebase-functions firebase-functions-test

これでpackage.jsonは以下のようになっているはずです。（特に触りません。参考までに）

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@heroicons/vue": "^2.1.1",
    "firebase": "^10.8.1",
    "firebase-functions": "^4.8.0",
    "nuxt": "^3.10.3",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^6.11.4",
    "daisyui": "^4.7.3"
  }
}

nuxt.config.tsの設定

export default defineNuxtConfig({
  ・・・
  // 追加
  nitro: {
    firebase: {
      gen: 2
    }
  }
})

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/**"
      ]
    }
  ]
}

ビルド

以下のコマンドでビルドできます。
（preset=firebaseは、firebaseに最適化されたビルドと解釈しています）

$ npm run build -- --preset=firebase

※ 以前は、NITRO_PRESET=firebaseコマンドでビルドしていましたが、nuxt3.10になって変わりました

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

デプロイ

$ 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は何も触ってないので、次からログインやページを作りましょう。