目次

1. はじめに
2. Next.js の環境変数を設定
   • 2.1 環境変数の定義方法
3. Firebase App Hosting の設定とデプロイ
   • 3.1 初期設定
4. Google Cloud の Secret Manager でシークレットを作成
   • 4.1 シークレットの作成手順
5. App Hosting がシークレットにアクセスできるよう設定
   • 5.1 権限の設定
6. Next.js に firebase.json, apphosting.yaml を作成
   • 6.1 ファイル作成と構成
7. ロールアウトを作成 (再度デプロイ) し、環境変数が反映されたことを確認
   • 7.1 デプロイ後の確認
8. Next.js のバージョン要件
9. 環境変数の定義における注意点
10. まとめ

1. はじめに

Next.js アプリケーションを Firebase App Hosting にデプロイするプロセスは、いくつかのステップに分かれています。この記事では、環境変数の設定からデプロイ後の確認までを詳しく解説します。

注意: App Hosting では .env ファイルを使用せず、apphosting.yaml で環境変数を管理します。

2. Next.js の環境変数を設定

Next.js アプリケーションにおける環境変数は、Firebase App Hosting では .env ファイルではなく、apphosting.yaml に記述します。これにより、環境変数が Firebase のデプロイ環境に適用されます。

2.1 環境変数の定義方法

apphosting.yaml に以下のように環境変数を設定します。

• シークレット情報（例: API_KEY）は Google Cloud Secret Manager で管理
• 公開情報（例: NEXT_PUBLIC_API_BASE_URL）は apphosting.yaml に直接記述

3. Firebase App Hosting の設定とデプロイ

Firebase の設定を行い、初めてのデプロイを実施します。

3.1 初期設定

Firebase プロジェクトを作成し、アプリをホスティングに追加します。公式ドキュメントに従い、初回はデプロイが失敗する可能性がありますが、その後の設定で修正できます。

4. Google Cloud の Secret Manager でシークレットを作成

セキュアな環境変数の管理方法として、Google Cloud の Secret Manager を活用します。

4.1 シークレットの作成手順

1. Google Cloud コンソールに移動します。
2. Secret Manager で新しいシークレットを作成します。名前に変数名を指定し、値を設定します。
3. シークレットのバージョン URL をコピーします。

5. App Hosting がシークレットにアクセスできるよう設定

Firebase App Hosting からシークレットにアクセス権を与える必要があります。

5.1 権限の設定

1. IAM の管理コンソールで Firebase App Hosting に必要な権限を付与します。
2. Secret Manager Viewer のロールを追加します。

6. Next.js に firebase.json, apphosting.yaml を作成

プロジェクトのルートディレクトリに firebase.json と apphosting.yaml ファイルを作成します。

6.1 ファイル作成と構成

これらのファイルで Firebase のホスティング設定と環境変数のマッピングを行います。

7. ロールアウトを作成 (再度デプロイ) し、環境変数が反映されたことを確認

最終的に環境変数が反映された状態で再度デプロイし、適切に動作していることを確認します。

7.1 デプロイ後の確認

Firebase コンソールでデプロイが完了し、アプリが正常に動作することを確認します。

8. Next.js のバージョン要件

Firebase App Hosting では、Next.js のバージョンが 13.0.0 以上である必要があります。これより古いバージョンではデプロイに失敗する可能性があります。

9. 環境変数の定義における注意点

ビルドプロセスで Cloud Build 機能を使用するため、環境変数は apphosting.yaml で管理します。Error が発生した場合は、権限設定を見直してみましょう。

10. まとめ

Next.js アプリを Firebase App Hosting にデプロイする手順は、多くのステップを含んでいますが、正しい設定を行えば便利に運用することができます。他のホスティングサービスと比較し、Firebase を利用する理由を理解し、プロジェクトの要件に合わせた選択を行うことが重要です。次回は、SSR や SSG の実装についても触れていく予定です。

[cv:issue_marketplace_engineer]

AppHosting に Next.js アプリをデプロイする方法

目次

1. はじめに
2. Next.js の環境変数 (.env) を設定
   • 2.1 環境変数の命名規則
3. Firebase App Hosting の設定とデプロイ
   • 3.1 初期設定
4. Google Cloud の Secret Manager でシークレットを作成
   • 4.1 シークレットの作成手順
5. App Hosting がシークレットにアクセスできるよう設定
   • 5.1 権限の設定
6. Next.js に firebase.json, apphosting.yaml を作成
   • 6.1 ファイル作成と構成
7. ロールアウトを作成 (再度デプロイ) し、環境変数が反映されたことを確認
   • 7.1 デプロイ後の確認
8. Next.js のバージョン要件
9. 環境変数の定義における注意点
10. まとめ

1. はじめに

Next.js アプリケーションを Firebase App Hosting にデプロイするプロセスは、いくつかのステップに分かれています。この記事では、環境変数の設定からデプロイ後の確認までを詳しく解説します。

2. Next.js の環境変数 (.env) を設定

Next.js アプリケーションにおいて、環境変数を効率よく管理することは重要です。まず、.env ファイルをプロジェクトルートに作成し、必要な変数を定義します。

2.1 環境変数の命名規則

クライアント側で参照する変数には NEXT_PUBLIC_ プレフィックスを付与します。一方、サーバーサイドのみで扱う変数ではプレフィックスは不要です。

3. Firebase App Hosting の設定とデプロイ

Firebase の設定を行い、初めてのデプロイを実施します。

3.1 初期設定

Firebase プロジェクトを作成し、アプリをホスティングに追加します。公式ドキュメントに従い、初回はデプロイが失敗する可能性がありますが、その後の設定で修正できます。

4. Google Cloud の Secret Manager でシークレットを作成

セキュアな環境変数の管理方法として、Google Cloud の Secret Manager を活用します。

4.1 シークレットの作成手順

1. Google Cloud コンソールに移動します。
2. Secret Manager で新しいシークレットを作成します。名前に変数名を指定し、値を設定します。
3. シークレットのバージョン URL をコピーします。

5. App Hosting がシークレットにアクセスできるよう設定

Firebase App Hosting からシークレットにアクセス権を与える必要があります。

5.1 権限の設定

1. IAM の管理コンソールで Firebase App Hosting に必要な権限を付与します。
2. Secret Manager Viewer のロールを追加します。

6. Next.js に firebase.json, apphosting.yaml を作成

プロジェクトのルートディレクトリに firebase.json と apphosting.yaml ファイルを作成します。

6.1 ファイル作成と構成

これらのファイルで Firebase のホスティング設定と環境変数のマッピングを行います。

7. ロールアウトを作成 (再度デプロイ) し、環境変数が反映されたことを確認

最終的に環境変数が反映された状態で再度デプロイし、適切に動作していることを確認します。

7.1 デプロイ後の確認

Firebase コンソールでデプロイが完了し、アプリが正常に動作することを確認します。

8. Next.js のバージョン要件

Firebase App Hosting では、Next.js のバージョンが 13.0.0 以上である必要があります。これより古いバージョンではデプロイに失敗する可能性があります。

9. 環境変数の定義における注意点

ビルドプロセスで Cloud Build 機能を使用するため、環境変数は apphosting.yaml で管理します。Error が発生した場合は、権限設定を見直してみましょう。

10. まとめ

Next.js アプリを Firebase App Hosting にデプロイする手順は、多くのステップを含んでいますが、正しい設定を行えば便利に運用することができます。他のホスティングサービスと比較し、Firebase を利用する理由を理解し、プロジェクトの要件に合わせた選択を行うことが重要です。次回は、SSR や SSG の実装についても触れていく予定です。

[cv:issue_marketplace_engineer]