👋

Nuxt3 GCP firebase 基本デプロイまでの軌跡

2023/05/08に公開

Firebase

教本の通りに作業したが、やり方が全然違い、石だらけで苦労したので備忘のため投稿

モジュールのバージョン列挙

  "devDependencies": {
    "@types/node": "^18",
    "firebase-admin": "^11.8.0",
    "firebase-functions": "^4.3.1",
    "jws": "^4.0.0",
    "nuxt": "^3.4.3"
  },

教本では、
firebase create:yourPJ ⇒　firebase use
をやれとあるが、その通りにやっても
Error: firebase use must be run from a Firebase project directory.
と怒られる。

しかも、createしただけでfunctionが使えるノリになっていたが、出来ない。

教本ではあとでhostingを使う流れになっていたので、
firebase use の前に、firebase init hosting を実施しておく。

$ $ firebase init hosting

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /home/hoge/nuxt3_firebase/nuxt3-sample

Before we get started, keep in mind:

  * You are initializing within an existing Firebase project directory


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

i  Using project hoge_project (hoge-pj)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
✔  Wrote public/404.html
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

これでfirebase use が使用可能。
ちなみに、nuxt3をサーバ表示するだけなら、functions機能を生成する必要はない。

次は、実際のデプロイ作業(firebase deploy)

実施すると

 ERROR  Error: Cannot find module firebase-admin imported from file

とか

Function failed on loading user code. This is likely due to a bug in the user code. Error message: Provided module can't be loaded.
Did you list all required modules in the package.json dependencies?
Detailed stack trace: Error: Cannot find module 'jws'

とか

firebase deploy command for Node.js application results in Error: `runtime` field is required but was not found in firebase.json

のエラーが出たので、エラーの通り、モジュールにfirebase-admin・jwsと、firebase.jsonにruntime:～を追加した。（※１）

そして、書籍には保険として下記のようにfirebase.json　内で npm install を実施しておくとよいとあるが、

  "functions": [
    {
      "source": "/myproject/.output/server",
      "runtime": "nodejs18",
      "predeploy": [
        "npm install --prefix $RESOURCE_DIR"
      ]
    }
  ],

次のようなエラーが出て進めなくなった。

`npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.js

このnpm install を除去すると、デプロイには成功するが、
firebaseのwelcomeページが表示されるだけとなってしまった。

このエラー対策として、

"npm install --prefix $RESOURCE_DIR legacy-peer-deps=true"

を加えておくと、デプロイがうまく行った。（※２）

最後に、教本にはなかったリージョン指定。
とあるQiita記事ではnitro serverを使用する場合、
毎回デプロイしたものを書き換えるしかないとあったが、
現時点においては、以下の箇所を書き換えるとデプロイ時に自動設定されるようになった。（※３）

// nuxt.config.ts

export default defineNuxtConfig({
  // ...
  nitro: {
    preset: 'firebase',
    replace: {
      [`functions.https.onRequest`]: `functions.region('asia-northeast2').https.onRequest`,
    }
  },
})

// firebase.json

{
  // ...
  "hosting": {
    // ...
    "rewrites": [
      {
        "source": "**",
        "function": "server",
        "region": "asia-northeast2"
      }
    ],
  }
}

nuxt3のwelcomeページ出したいだけでこの作業…しんどかった、、、
そして初投稿がこの記事・・・アイデア記事ってハードルが高いね。。

※１

※２

※３

Discussion