# Firebase App Hosting に Next.js アプリをデプロイする方法

## 目次
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 に記述します。

### 2.1 環境変数の定義方法
apphosting.yaml に環境変数を定義します。以下は設定例です。

![img](/mosaic-code.jpg)

シークレット情報（例: 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.json と apphosting.yaml で Firebase のホスティング設定と環境変数のマッピングを行います。

![img](/mosaic-code.jpg)

![img](/mosaic-code.jpg)

## 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 の実装についても触れていく予定です。

---

### 【参考情報】
**メリット**
- 簡単にデプロイできる
- GCPのサービスで構成されているため、自由度が高い

**デメリット**
- Firebase側の管理画面からは設定をいじれない
- 多くの操作はCLIで行う必要がある

**注意点**
- Bunには対応していない
- Angularを使っている場合、application builder以外はサポートされていない

Firebase App Hostingは、Webアプリケーションを簡単にデプロイできる便利なサービスです。GCP初心者でも簡単に利用でき、自由度も高いので、Webアプリケーション開発者にとって魅力的な選択肢となります。 [cv:issue_marketplace_engineer]

# Firebase App Hosting に Next.js アプリをデプロイする方法

## 目次
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 に記述します。

### 2.1 環境変数の定義方法
apphosting.yaml に環境変数を定義します。以下は設定例です。

```yaml
env:
  - variable: API_KEY
    secret: projects/000000000000/secrets/API_KEY
  - variable: NEXT_PUBLIC_API_BASE_URL
    value: "https://api.example.com"
```

シークレット情報（例: 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.json と apphosting.yaml で Firebase のホスティング設定と環境変数のマッピングを行います。

```json
// firebase.json
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
```

```yaml
# apphosting.yaml
env:
  - variable: API_KEY
    secret: projects/000000000000/secrets/API_KEY
```

## 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 の実装についても触れていく予定です。

---

### 【参考情報】
**メリット**
- 簡単にデプロイできる
- GCPのサービスで構成されているため、自由度が高い

**デメリット**
- Firebase側の管理画面からは設定をいじれない
- 多くの操作はCLIで行う必要がある

**注意点**
- Bunには対応していない
- Angularを使っている場合、application builder以外はサポートされていない

Firebase App Hostingは、Webアプリケーションを簡単にデプロイできる便利なサービスです。GCP初心者でも簡単に利用でき、自由度も高いので、Webアプリケーション開発者にとって魅力的な選択肢となります。 

Firebase App Hosting に Next.js アプリをデプロイする方法

目次

続きを読むには単価診断を受けてください（30秒）