## 目次
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` に以下のように環境変数を設定します。

![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 をコピーします。

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

## 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 のホスティング設定と環境変数のマッピングを行います。

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

[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_` プレフィックスを付与します。一方、サーバーサイドのみで扱う変数ではプレフィックスは不要です。

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

## 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 をコピーします。

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

## 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 のホスティング設定と環境変数のマッピングを行います。

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

[cv:issue_marketplace_engineer]

## 目次
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` に以下のように環境変数を設定します。

```yaml
env:
  - variable: API_KEY
    secret: projects/000000000000/secrets/API_KEY/versions/1
  - 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 をコピーします。

```plaintext
projects/000000000000/secrets/API_KEY/versions/1
```

## 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
// firebase.json
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
```

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

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



# 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_` プレフィックスを付与します。一方、サーバーサイドのみで扱う変数ではプレフィックスは不要です。

```bash
# .env
NEXT_PUBLIC_API_BASE_URL="https://api.example.com"
API_KEY="abc123"
```

## 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 をコピーします。

```plaintext
projects/000000000000/secrets/API_KEY/versions/1
```

## 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
// firebase.json
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
```

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

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



目次

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