
## 目次
1. はじめに
2. 環境変数とは
3. Firebase App Hosting の基本設定
   1. Firebase プロジェクトの作成
   2. GitHub との接続
   3. 初期設定
   4. ライブブランチの設定
   5. 自動ロールアウトの設定
4. 環境ごとの設定ファイルの作成
   1. `apphosting.pro.yaml` (本番環境)
   2. `apphosting.dev.yaml` (開発環境)
5. クライアントサイドでの環境変数の使用
6. デプロイの流れ
   1. ブランチ管理とデプロイの自動化
   2. デプロイの確認方法
7. トラブルシューティング
   1. よくあるエラーとその対処法
8. まとめ
9. Next.js の設定

## 1. はじめに
Firebase App Hosting は、スケーラブルでシンプルなウェブアプリのホスティングを提供しています。本記事では、Next.js アプリケーションを Firebase App Hosting にデプロイし、環境変数を適切に設定する方法を解説します。

## 2. 環境変数とは
環境変数は、アプリケーションの設定情報を外部から提供するための手段であり、API キーやデータベースの URL などの機密情報を管理するのに役立ちます。開発環境と本番環境で異なる設定を使用するために利用されます。

## 3. Firebase App Hosting の基本設定
### 3-1. Firebase プロジェクトの作成
Firebase コンソールにアクセスし、新しいプロジェクトを作成します。その後、App Hosting を有効にします。

### 3-2. GitHub との接続
Firebase App Hosting は **GitHub リポジトリのブランチと連携** してデプロイを行います。Firebase コンソールの App Hosting の設定から、対象のリポジトリを接続し、デプロイ対象のブランチを指定します。

### 3-3. 初期設定
Firebase CLI を使用して App Hosting の初期化を行います。
![img](/mosaic-code.jpg)
プロンプトに従い、以下を設定します。
- **アプリのルートディレクトリの指定**（通常は `/`）
- **デプロイ対象の GitHub ブランチの指定**
- **自動ロールアウトの有効化の選択**

### 3-4. ライブブランチの設定
これは、公開 URL にデプロイされる GitHub リポジトリのブランチです。多くの場合、これは、機能ブランチまたは開発ブランチが統合されるブランチです。

### 3-5. 自動ロールアウトの設定
自動ロールアウトはデフォルトで有効になっています。バックエンドを作成したら、アプリをすぐに App Hosting にデプロイするように選択できます。

## 4. 環境ごとの設定ファイルの作成
Firebase App Hosting の設定画面で、環境名に応じて適用される `apphosting.yaml` ファイルが決まります。
- **環境名が `dev` の場合** → `apphosting.dev.yaml` が適用
- **環境名が `pro` の場合** → `apphosting.pro.yaml` が適用

### 4-1. `apphosting.pro.yaml`（本番環境）
![img](/mosaic-code.jpg)

### 4-2. `apphosting.dev.yaml`（開発環境）
![img](/mosaic-code.jpg)

## 9. Next.js の設定
Firebase App Hosting で適切に動作させるため、Next.js の `next.config.ts` を以下のように設定します。
![img](/mosaic-code.jpg)

[cv:issue_marketplace_engineer]




## 目次
1. はじめに
2. 環境変数とは
3. Firebase App Hosting の基本設定
   1. Firebase プロジェクトの作成
   2. GitHub との接続
   3. 初期設定
   4. ライブブランチの設定
   5. 自動ロールアウトの設定
4. 環境ごとの設定ファイルの作成
   1. `apphosting.pro.yaml` (本番環境)
   2. `apphosting.dev.yaml` (開発環境)
5. クライアントサイドでの環境変数の使用
6. デプロイの流れ
   1. ブランチ管理とデプロイの自動化
   2. デプロイの確認方法
7. トラブルシューティング
   1. よくあるエラーとその対処法
8. まとめ
9. Next.js の設定

## 1. はじめに
Firebase App Hosting は、スケーラブルでシンプルなウェブアプリのホスティングを提供しています。本記事では、Next.js アプリケーションを Firebase App Hosting にデプロイし、環境変数を適切に設定する方法を解説します。

## 2. 環境変数とは
環境変数は、アプリケーションの設定情報を外部から提供するための手段であり、API キーやデータベースの URL などの機密情報を管理するのに役立ちます。開発環境と本番環境で異なる設定を使用するために利用されます。

## 3. Firebase App Hosting の基本設定
### 3-1. Firebase プロジェクトの作成
Firebase コンソールにアクセスし、新しいプロジェクトを作成します。その後、App Hosting を有効にします。

### 3-2. GitHub との接続
Firebase App Hosting は **GitHub リポジトリのブランチと連携** してデプロイを行います。Firebase コンソールの App Hosting の設定から、対象のリポジトリを接続し、デプロイ対象のブランチを指定します。

### 3-3. 初期設定
Firebase CLI を使用して App Hosting の初期化を行います。
```sh
firebase init apphosting
```
プロンプトに従い、以下を設定します。
- **アプリのルートディレクトリの指定**（通常は `/`）
- **デプロイ対象の GitHub ブランチの指定**
- **自動ロールアウトの有効化の選択**

### 3-4. ライブブランチの設定
これは、公開 URL にデプロイされる GitHub リポジトリのブランチです。多くの場合、これは、機能ブランチまたは開発ブランチが統合されるブランチです。

### 3-5. 自動ロールアウトの設定
自動ロールアウトはデフォルトで有効になっています。バックエンドを作成したら、アプリをすぐに App Hosting にデプロイするように選択できます。

## 4. 環境ごとの設定ファイルの作成
Firebase App Hosting の設定画面で、環境名に応じて適用される `apphosting.yaml` ファイルが決まります。
- **環境名が `dev` の場合** → `apphosting.dev.yaml` が適用
- **環境名が `pro` の場合** → `apphosting.pro.yaml` が適用

### 4-1. `apphosting.pro.yaml`（本番環境）
```yaml
env:
  - variable: NEXT_PUBLIC_API_URL
    secret: projects/000000000000/secrets/API_URL/versions/1
```

### 4-2. `apphosting.dev.yaml`（開発環境）
```yaml
# Settings for Backend (on Cloud Run).
# See https://firebase.google.com/docs/app-hosting/configure#cloud-run
runConfig:
  minInstances: 0
  # maxInstances: 100
  # concurrency: 80
  # cpu: 1
  # memoryMiB: 512

# Environment variables and secrets.
env:
  - variable: NEXT_PUBLIC_FIREBASE_API_KEY
    value: xxxxxxxxxxxxxxxxxxxxxxxxx
    availability:
      - BUILD
      - RUNTIME
  - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
    value: xxxxxxxxxxxxxxxxxxxxxxxxx
    availability:
      - BUILD
      - RUNTIME
  - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
    value: xxxxxxxxxxxxxxxxxxxxxxxxx
    availability:
      - BUILD
      - RUNTIME
  - variable: NEXT_PUBLIC_FIREBASE_APP_ID
    value: xxxxxxxxxxxxxxxxxxxxxxxxx
    availability:
      - BUILD
      - RUNTIME
  - variable: NEXT_PUBLIC_FIREBASE_APP_URL
    value: xxxxxxxxxxxxxxxxxxxxxxxxx
    availability:
      - BUILD
      - RUNTIME
  - variable: NEXT_PUBLIC_ENV
    value: dev
    availability:
      - BUILD
      - RUNTIME
```

## 9. Next.js の設定
Firebase App Hosting で適切に動作させるため、Next.js の `next.config.ts` を以下のように設定します。
```ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "standalone",
};

export default nextConfig;
```





目次

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