mcpField
F
firebase-app-hosting-basics

firebase-app-hosting-basics

公式
github.com/firebaseクラウド・DevOps491170.9k 回インストール1 日前に更新
リポジトリ

firebase-app-hosting-basics について

firebase-app-hosting-basics は、Firebase App Hosting でフルスタック Web アプリをデプロイ、管理するエージェント向けスキルです。ソースからのデプロイ、GitHub 経由の自動デプロイ、ローカルエミュレーターでのテストを扱い、Firebase Hosting との使い分けも説明します。

主な機能

  1. 01App Hosting バックエンドの設定
  2. 02ソースからのフルスタックアプリのデプロイ
  3. 03GitHub による自動デプロイの設定
  4. 04Local Emulator Suite でのテスト

活用シーン

  1. 01Next.js または Angular アプリのデプロイ
  2. 02SSR や ISR を使うアプリのホスティング設定
  3. 03リポジトリへのプッシュを契機とするデプロイ設定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/firebase/agent-skills --skill firebase-app-hosting-basics

インストール後、Claude Code で/firebase-app-hosting-basicsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
cli_commands.md
configuration.md
emulation.md

詳細

アプリホスティングの基本

説明

このスキルを使用すると、エージェントは Firebase App Hosting を使って、最新のフルスタック Web アプリケーション（Next.js、Angular など）をデプロイし、管理できます。

重要：App Hosting を使用するには、Firebase プロジェクトが Blaze 料金プランである必要があります。プランをアップグレードするよう、ユーザーに https://console.firebase.google.com/project/_/overview?purchaseBillingPlan=metered を案内してください。

Hosting と App Hosting の比較

Firebase Hosting を選ぶ場合：

  • 静的サイト（HTML/CSS/JS）をデプロイする場合。
  • シンプルな SPA（SSR を使用しない React、Vue など）をデプロイする場合。
  • CLI を使ってビルドとデプロイのプロセスを完全に制御したい場合。

Firebase App Hosting を選ぶ場合：

  • Next.js や Angular など、サポート対象のフルスタックフレームワークを使用している場合。
  • サーバーサイドレンダリング（SSR）または ISR が必要な場合。
  • 設定不要の「git push でデプロイ」するワークフローを自動化したい場合。

App Hosting へのデプロイ

ソースからデプロイする

ほとんどのユーザーに推奨される方法です。

  1. firebase.json に apphosting ブロックを設定します。

    {
  "apphosting": {
    "backendId": "my-app-id",
    "rootDir": "/",
    "ignore": [
      "node_modules",
      ".git",
      ".next",
      ".vercel",
      "firebase-debug.log",
      "firebase-debug.*.log",
      "functions"
    ]
  }
}

  2. apphosting.yaml を作成または編集します。詳しくは設定を参照してください。

  3. バックエンドが存在しない場合は作成します（apphosting:backends:list。リージョンが 10 個のバックエンドの上限に達した場合は、--primary-region を us-east4 などに切り替えます）。

    npx -y firebase-tools@latest apphosting:backends:create --backend my-app-id --primary-region us-central1 --root-dir /

  4. アプリで機密キーへの安全なアクセスが必要な場合は、バックエンドの作成後に設定し、アクセス権を付与します。

    printf '%s' '<value>' | npx -y firebase-tools@latest apphosting:secrets:set <secret-name> --data-file - --force
npx -y firebase-tools@latest apphosting:secrets:grantaccess <secret-name> --backend my-app-id

  5. デプロイの準備ができたら、npx -y firebase-tools@latest deploy を実行します。

GitHub による自動デプロイ（CI/CD）

または、GitHub リポジトリに接続したバックエンドを設定し、「git push」によるデプロイを自動化できます。これは上級ユーザーにのみ推奨される方法であり、App Hosting の利用に必須ではありません。CLI コマンドを使った設定方法について詳しくは、CLI コマンドを参照してください。

エミュレーション

Firebase Local Emulator Suite を使ってアプリをローカルでテストする方法について詳しくは、エミュレーションを参照してください。

コメント

Markdown 対応