# Next.jsアプリをFirebase App Hostingにデプロイする方法【実践ガイド】

## 目次
1. はじめに
2. Next.js環境変数設定
   1. サーバーサイドとクライアントサイドの環境変数
3. Firebase App Hosting設定とデプロイ
4. Google Cloud Secret Managerでシークレットを作成
   1. シークレット作成手順
   2. Firebase App Hostingのアクセス設定
5. Next.jsプロジェクトへのfirebase.jsonとapphosting.yamlの追加
6. 再デプロイと環境変数の反映確認
7. Firebase App Hostingの機能と特徴
8. よくある問題と解決策
9. まとめ

## 本文

### 1. はじめに
Next.js を Firebase App Hosting にデプロイするための手順を詳細に解説します。Firebase App Hostingは、最新のウェブ技術を用いた動的なアプリケーションを迅速にデプロイできます。このガイドでは、環境変数の設定から始め、デプロイに至るまでのプロセスを体験していただきます。

### 2. Next.js環境変数設定

#### 2-1. サーバーサイドとクライアントサイドの環境変数
Next.js で環境変数を設定する際、クライアント側で使用する変数には `NEXT_PUBLIC_` というプレフィックスを付ける必要があります。一方、サーバーサイドでの利用においてはこのプレフィックスは必要ありません。

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

### 3. Firebase App Hosting設定とデプロイ
Firebase を利用するためには、先ず Firebase CLI をインストールし、プロジェクトを初期化します。詳細な設定と公式ドキュメントについては、必要に応じて参照ください。

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

#### 4-1. シークレット作成手順
1. Google Cloud Consoleにログインします。
2. ナビゲーションバーで "Secret Manager" を選択します。
3. "シークレットを作成"を選択し、環境変数のキーと値を入力して保存します。

#### 4-2. Firebase App Hostingのアクセス設定
IAM 設定で Firebase App Hosting に Secret Manager のロールを付与します。適切な権限を設定することでシークレットにアクセスできるようにします。

### 5. Next.jsプロジェクトへのfirebase.jsonとapphosting.yamlの追加
プロジェクトルートディレクトリに以下のファイルを作成し、環境設定を行います。

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

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

### 6. 再デプロイと環境変数の反映確認
環境変数が反映された状態でアプリをデプロイします。Firebase CLIを再度用いてデプロイを行い、反映状況を確認します。

### 7. Firebase App Hostingの機能と特徴
Firebase App Hostingは、GitHub連携やGCPのサービスを活用して、動的で高速なアプリケーションデリバリーを支援します。

### 8. よくある問題と解決策
- 環境変数が反映されない: 権限設定を見直し、Secret Manager に正しいアクセス権を持たせているか確認。
- デプロイが失敗する: Firebase CLIのバージョンをアップデートするか、ログを確認しエラーを特定。

### 9. まとめ
Firebase App Hostingを利用することで、Next.jsのアプリを手軽にデプロイし、最新のGCPテクノロジーを活用できます。実践を通じて効率的なワークフローを構築しましょう。

[cv:issue_marketplace_engineer]

# Next.jsアプリをFirebase App Hostingにデプロイする方法【実践ガイド】

## 目次
1. はじめに
2. Next.js環境変数設定
   1. サーバーサイドとクライアントサイドの環境変数
3. Firebase App Hosting設定とデプロイ
4. Google Cloud Secret Managerでシークレットを作成
   1. シークレット作成手順
   2. Firebase App Hostingのアクセス設定
5. Next.jsプロジェクトへのfirebase.jsonとapphosting.yamlの追加
6. 再デプロイと環境変数の反映確認
7. Firebase App Hostingの機能と特徴
8. よくある問題と解決策
9. まとめ

## 本文

### 1. はじめに
Next.js を Firebase App Hosting にデプロイするための手順を詳細に解説します。Firebase App Hostingは、最新のウェブ技術を用いた動的なアプリケーションを迅速にデプロイできます。このガイドでは、環境変数の設定から始め、デプロイに至るまでのプロセスを体験していただきます。

### 2. Next.js環境変数設定

#### 2-1. サーバーサイドとクライアントサイドの環境変数
Next.js で環境変数を設定する際、クライアント側で使用する変数には `NEXT_PUBLIC_` というプレフィックスを付ける必要があります。一方、サーバーサイドでの利用においてはこのプレフィックスは必要ありません。

```plaintext
# .env
NEXT_PUBLIC_API_URL="https://api.example.com"
API_KEY="abc123"
```

### 3. Firebase App Hosting設定とデプロイ
Firebase を利用するためには、先ず Firebase CLI をインストールし、プロジェクトを初期化します。詳細な設定と公式ドキュメントについては、必要に応じて参照ください。

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

#### 4-1. シークレット作成手順
1. Google Cloud Consoleにログインします。
2. ナビゲーションバーで "Secret Manager" を選択します。
3. "シークレットを作成"を選択し、環境変数のキーと値を入力して保存します。

#### 4-2. Firebase App Hostingのアクセス設定
IAM 設定で Firebase App Hosting に Secret Manager のロールを付与します。適切な権限を設定することでシークレットにアクセスできるようにします。

### 5. Next.jsプロジェクトへのfirebase.jsonとapphosting.yamlの追加
プロジェクトルートディレクトリに以下のファイルを作成し、環境設定を行います。

```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
```

### 6. 再デプロイと環境変数の反映確認
環境変数が反映された状態でアプリをデプロイします。Firebase CLIを再度用いてデプロイを行い、反映状況を確認します。

### 7. Firebase App Hostingの機能と特徴
Firebase App Hostingは、GitHub連携やGCPのサービスを活用して、動的で高速なアプリケーションデリバリーを支援します。

### 8. よくある問題と解決策
- 環境変数が反映されない: 権限設定を見直し、Secret Manager に正しいアクセス権を持たせているか確認。
- デプロイが失敗する: Firebase CLIのバージョンをアップデートするか、ログを確認しエラーを特定。

### 9. まとめ
Firebase App Hostingを利用することで、Next.jsのアプリを手軽にデプロイし、最新のGCPテクノロジーを活用できます。実践を通じて効率的なワークフローを構築しましょう。

[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

Next.jsアプリをFirebase App Hostingにデプロイする方法【実践ガイド】

目次

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