Firebase

Firebase App Hosting (推奨)

プロジェクトのセットアップ

1. Firebaseコンソールに移動し、新しいプロジェクトを設定します。
2. サイドバーからビルド > App Hostingを選択します。
   • この手順で課金プランをアップグレードする必要がある場合があります。
3. 開始をクリックします。
   • リージョンを選択します。
   • GitHubリポジトリをインポートします (GitHubアカウントをリンクする必要があります)。
   • デプロイ設定 (プロジェクトのルートディレクトリとブランチ) を構成し、自動ロールアウトを有効にします。
   • バックエンドの一意のIDを選択します。
4. 「完了してデプロイ」をクリックして、最初のロールアウトを作成します。

Firebase App Hostingでデプロイすると、App Hostingプリセットはビルド時に自動的に実行されます。

Firebase Functions (非推奨)

より新しい推奨される世代のFirebase Functionsを使用するには、firebase.genオプションを2に設定します。

export default defineNuxtConfig({
  nitro: {
    firebase: {
      gen: 2
    }
  }
})

ウェブサイトのデプロイ済みバージョンがあり、第2世代にアップグレードしたい場合は、Firebaseドキュメントの移行プロセスを参照してください。具体的には、CLIは新しい関数をデプロイする前に既存の関数を削除するよう求めます。

プロジェクトのセットアップ

代わりに、Firebase CLIでプロジェクトを設定することもできます。これは、プロジェクトIDを自動的に取得し、必要な依存関係 (上記参照) を追加し、GitHub Actionsを介して自動デプロイを設定することさえできます (ホスティングのみ)。firebase CLIのインストールについて学ぶ.

1. Firebase CLIの最新バージョンをインストールします。
   ターミナル

   npm install -g firebase-tools@latest
   

2. Firebaseプロジェクトを初期化する
   ターミナル

   firebase login
   firebase init hosting
   

完了したら、Cloud Functionsでサーバーレンダリングを有効にするために、firebase.jsonに以下を追加します。

{
  "functions": { "source": ".output/server" },
  "hosting": [
    {
      "site": "<your_project_id>",
      "public": ".output/public",
      "cleanUrls": true,
      "rewrites": [{ "source": "**", "function": "server" }]
    }
  ]
}

ローカルプレビュー

デプロイせずにテストする必要がある場合は、サイトのローカルバージョンをプレビューできます。

npm run build -- --preset=firebase
firebase emulators:start

ビルドとデプロイ

Nuxtビルドを実行してから、firebase deployコマンドを実行してFirebase Hostingにデプロイします。

npm run build -- --preset=firebase
firebase deploy

オプション

nuxt.config.tsファイルでFirebase関数のオプションを設定できます。

export default defineNuxtConfig({
  nitro: {
    firebase: {
      gen: 2,
      httpsOptions: {
        region: 'europe-west1',
        maxInstances: 3,
      },
    },
  },
});

ランタイムNode.jsバージョン

設定でカスタムNode.jsバージョンを設定できます。

export default defineNuxtConfig({
  nitro: {
    firebase: {
      nodeVersion: '18' // Can be '16' or '18' or '20'
    },
  },
});

Firebaseツールは、関数に使用するNodeバージョンを決定するために、package.jsonのengines.nodeバージョンを使用します。Nuxtは、設定されたNode.jsバージョンで.output/server/package.jsonに自動的に書き込みます。

firebase.jsonファイルにランタイムキーを追加する必要がある場合もあります。

{
  "functions": {
    "source": ".output/server",
    "runtime": "nodejs20"
  }
}

その他のCloud Functions

Nuxtプロジェクトをデプロイすると、他のCloud Functionsが削除されるという警告が表示される場合があります。これは、Nitroがプロジェクト全体をFirebase Functionsにデプロイするためです。Nuxtプロジェクトのみをデプロイしたい場合は、--onlyフラグを使用できます。

firebase deploy --only functions:server,hosting

本番環境でのCookieの使用

Firebase HostingをCloud FunctionsまたはCloud Runと組み合わせて使用する場合、効率的なCDNキャッシュ動作を可能にするために、通常、受信リクエストからCookieが削除されます。特別に名前が付けられた__session Cookieのみがアプリに渡すことが許可されます。

環境変数の操作

Firebase Functionsの環境変数を設定するには、.envファイルを.output/serverディレクトリにコピーする必要があります。これは、ビルドコマンドの後に自動的に実行されるpostbuildスクリプトをpackage.jsonに追加することで実行できます。

{
  "scripts": {
    "postbuild": "cp .env .output/server/.env"
  }
}