

## 目次
1. はじめに
2. Firebase プロジェクトの作成
3. App Hosting バックエンドの設定
4. GitHub との連携
5. Next.js または Angular アプリのデプロイ
6. カスタムドメインの設定
7. 環境変数とシークレット管理
8. まとめ

---

## 1. はじめに
Firebase App Hosting は、ウェブアプリの構築、管理、デプロイを簡単に行えるサービスです。特に Next.js や Angular で開発されたアプリケーションに適しています。このガイドでは、Firebase App Hosting を使用して Next.js または Angular アプリをデプロイする方法について詳しく説明します。

## 2. Firebase プロジェクトの作成
まず、Firebase コンソールにアクセスし、新しいプロジェクトを作成します。プロジェクト作成時に Google Analytics の設定が求められますが、後からでも設定可能です。プロジェクト作成後に Firebase Hosting を有効にします。

## 3. App Hosting バックエンドの設定
Firebase コンソールまたは Firebase CLI を使用して、App Hosting のバックエンドを設定します。Firebase CLI を使用したコマンド例は以下の通りです。

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

このコマンドでホスティングを初期化し、プロジェクトに関連付けるフォルダを選択します。

## 4. GitHub との連携
App Hosting は GitHub との連携をサポートしており、GitHub リポジトリにコードをプッシュすると自動デプロイが可能です。連携設定を行うには、Firebase コンソールで Developer Connect を利用して GitHub とリンクさせます。

## 5. Next.js または Angular アプリのデプロイ
デプロイは非常に簡単です。プロジェクトのルートに `firebase.json` と `apphosting.yaml` を追加します。

### firebase.json の例:
![img](/mosaic-code.jpg)

### apphosting.yaml の例:
![img](/mosaic-code.jpg)

これにより環境変数が Firebase 上で管理され、GitHub にコードをプッシュするだけでデプロイが実行されます。

## 6. カスタムドメインの設定
Firebase Hosting ではカスタムドメインにも対応しています。Firebase コンソールの Hosting セクションからカスタムドメインを追加し、DNS の設定を行うことで、独自のドメインでもアプリケーションを公開できます。

## 7. 環境変数とシークレット管理
Firebase App Hosting では、Google Cloud Secret Manager を用いてシークレットを管理します。また、`apphosting.yaml` ファイルで公開データを管理します。これにより、機密情報は安全に保持されます。

## 8. まとめ
Firebase App Hosting は、Next.js や Angular アプリケーションのデプロイを大幅に簡略化し、迅速かつ効率的。カスタムドメイン、多様な環境変数管理もでき、Firebase とその他 Google サービスとの統合もスムーズです。デプロイの自動化やバックエンド管理を簡単に行いたい開発者にとって、非常に便利なツールとなるでしょう。

今後の開発にぜひ活かしてみてください。 [cv:issue_marketplace_engineer]



## 目次
1. はじめに
2. Firebase プロジェクトの作成
3. App Hosting バックエンドの設定
4. GitHub との連携
5. Next.js または Angular アプリのデプロイ
6. カスタムドメインの設定
7. 環境変数とシークレット管理
8. まとめ

---

## 1. はじめに
Firebase App Hosting は、ウェブアプリの構築、管理、デプロイを簡単に行えるサービスです。特に Next.js や Angular で開発されたアプリケーションに適しています。このガイドでは、Firebase App Hosting を使用して Next.js または Angular アプリをデプロイする方法について詳しく説明します。

## 2. Firebase プロジェクトの作成
まず、Firebase コンソールにアクセスし、新しいプロジェクトを作成します。プロジェクト作成時に Google Analytics の設定が求められますが、後からでも設定可能です。プロジェクト作成後に Firebase Hosting を有効にします。

## 3. App Hosting バックエンドの設定
Firebase コンソールまたは Firebase CLI を使用して、App Hosting のバックエンドを設定します。Firebase CLI を使用したコマンド例は以下の通りです。

```bash
firebase init hosting
```

このコマンドでホスティングを初期化し、プロジェクトに関連付けるフォルダを選択します。

## 4. GitHub との連携
App Hosting は GitHub との連携をサポートしており、GitHub リポジトリにコードをプッシュすると自動デプロイが可能です。連携設定を行うには、Firebase コンソールで Developer Connect を利用して GitHub とリンクさせます。

## 5. Next.js または Angular アプリのデプロイ
デプロイは非常に簡単です。プロジェクトのルートに `firebase.json` と `apphosting.yaml` を追加します。

### firebase.json の例:
```json
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "app"
      }
    ]
  }
}
```

### apphosting.yaml の例:
```yaml
env:
  - variable: API_KEY
    secret: projects/{YOUR_PROJECT_ID}/secrets/API_KEY
  - variable: NEXT_PUBLIC_API_BASE_URL
    value: "https://api.example.com"
```

これにより環境変数が Firebase 上で管理され、GitHub にコードをプッシュするだけでデプロイが実行されます。

## 6. カスタムドメインの設定
Firebase Hosting ではカスタムドメインにも対応しています。Firebase コンソールの Hosting セクションからカスタムドメインを追加し、DNS の設定を行うことで、独自のドメインでもアプリケーションを公開できます。

## 7. 環境変数とシークレット管理
Firebase App Hosting では、Google Cloud Secret Manager を用いてシークレットを管理します。また、`apphosting.yaml` ファイルで公開データを管理します。これにより、機密情報は安全に保持されます。

## 8. まとめ
Firebase App Hosting は、Next.js や Angular アプリケーションのデプロイを大幅に簡略化し、迅速かつ効率的。カスタムドメイン、多様な環境変数管理もでき、Firebase とその他 Google サービスとの統合もスムーズです。デプロイの自動化やバックエンド管理を簡単に行いたい開発者にとって、非常に便利なツールとなるでしょう。

今後の開発にぜひ活かしてみてください。 

目次

1. はじめに

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