メインコンテンツまでスキップ

第07章:GitHub連携(PRごとに自動プレビュー)🤝

この章は「Pull Request(PR)を出したら、自動で“プレビューURL”が生えて、レビューがワンクリックになる」状態を作ります😆✨ しかもそのURL、コミットを積んでも同じURLのまま更新されるので、レビューが超ラクになります🔁🌐 (Firebase)


1) この章でできるようになること🏁🎯

  • PRを作るだけで Preview Channel(プレビュー用の“場所”) が自動作成される🧩 (Firebase)
  • PRに プレビューURLがコメントで自動投稿される💬🔗 (Firebase)
  • PRに新しいコミットを積むと、同じプレビューURLが更新される🔁✨ (Firebase)
  • (注意)プレビューURLでも 本物のFirebaseバックエンドに接続するので、うっかり本番データを壊さない意識が持てる🧯 (Firebase)

2) 仕組みを超ざっくり理解しよ🧠🗺️

PR Preview Automation

イメージはこれ👇

  1. あなたがPRを作る 🧑‍💻➡️ GitHub
  2. GitHub Actions が動く 🤖
  3. Hosting の Preview Channel にデプロイされる🚀
  4. PRに「このURL見てね!」ってコメントが付く💬🔗 (Firebase)

ポイントは「Preview Channel = PR専用の一時公開枠」ってことです🏷️ 期限(デフォルト7日)もあるので、放置しても勝手に消えていきます⏳ (GitHub)


3) 手を動かす🛠️(Windowsでいくよ💻✨)

3-1. まずはFirebase CLIを使える状態にする⚙️

PowerShellでOKです🙆‍♂️

npm i -g firebase-tools
firebase --version
firebase login

3-2. リポジトリ直下で GitHub連携セットアップ🤝

CLI Setup Wizard

Hostingは既に初期化済みでもOK。GitHub連携だけならこれ👇

firebase init hosting:github

するとCLIが対話でいろいろ聞いてきます(だいたいこんな感じ)👇

  • どのFirebaseプロジェクト?(複数あるなら選ぶ)🧩
  • どのGitHubリポジトリ?📦
  • PRプレビュー作る?✅
  • マージでliveへ自動デプロイも作る?(これは第8章で本番運用するので、ここではONでもOK)🚢

CLIがやってくれる“すごいこと”👇(ここ重要!)

  • Hostingデプロイ用のサービスアカウントを作る🔐
  • そのJSONキーを暗号化して GitHub Secretsに自動登録する🗝️
  • そして .github/workflows/*.yml を自動生成してくれる🤖🧾 (Firebase)

※この自動セットアップには、リポジトリの管理権限が必要です👑(権限が弱いとSecrets登録でコケがち) (Firebase)

3-3. 生成されたworkflowをコミットしてpush🧾➡️📤

Git Push

CLIが生成したファイル(例):

  • .github/workflows/firebase-hosting-pull-request.yml(PR用)
  • .github/workflows/firebase-hosting-merge.yml(マージ用)

コミットしてpushします👇

git checkout -b setup/hosting-preview
git add .
git commit -m "chore: set up Firebase Hosting preview deploy"
git push -u origin setup/hosting-preview

3-4. PRを作って“プレビューURLが生える”のを確認👀🔗

PR Comment UI

GitHub上でPRを作成すると…

  • Actionsが走る🏃‍♂️💨
  • PRにプレビューURLがコメントされる💬🔗 (Firebase)

さらにPRに追コミットすると、同じURLが更新されます🔁✨ (Firebase) Persistent URL on Update


4) 生成されるYAMLの中身(最低限だけ読む)👀🧾

YAML Config Anatomy

CLIが作るワークフローは、中でだいたいこのActionを使ってます👇 FirebaseExtended/action-hosting-deploy@v0 (GitHub)

ざっくり重要パラメータはこれ👇

  • repoToken: ${{ secrets.GITHUB_TOKEN }} → PRにコメントするため💬(GitHubが自動で用意) (GitHub)
  • firebaseServiceAccount: ${{ secrets.(なにか) }} → Firebaseにデプロイする鍵🔐 (GitHub)
  • expires: 7d/30d → プレビューの寿命⏳(デフォは7日) (GitHub)

5) よくある詰まりポイント集🧯(ここで時間を溶かさない!)

5-1. PRにプレビューURLコメントが付かない😢

よくある原因👇

  • workflowに repoToken が無い / PRコメントが無効化されている
  • GitHub Actions側の権限が弱くてPRに書けない

repoToken を入れるとPRにコメントできる、という仕様です💬 (GitHub) (入れない場合は、ActionsログにURLが出るのでそこを見る形になります👀) (GitHub)

5-2. forkからのPRだとプレビューが動かない🧊

Fork Secret Limitation

これは仕様寄りです🥶 fork由来のPRは、Secretsが渡らないことが多く、firebaseServiceAccount が空になって失敗します。 (GitHub)

👉 対策の定番は「同一リポジトリ内のブランチPRで回す」です(学習はこれが一番ラク)✨


6) AIで爆速にする🤖⚡(Antigravity / Gemini CLI を“ちゃんと使う”)

AI Debugging Workflow

6-1. Gemini CLIにFirebase拡張を入れて、詰まりを即相談🧠💬

Firebase拡張は、Firebase MCP server を自動で入れてくれて、Firebase操作・ドキュメント参照・定型プロンプトが強化されます🧩 (Firebase)

インストール👇

gemini extensions install https://github.com/gemini-cli-extensions/firebase/

入ったら、たとえば /firebase: まで打つと使えるコマンド候補が出ます(定型プロンプトが使える)🧰 (Firebase)

おすすめの使い方(この章向け)👇

  • 「このworkflowが何をしてるか、初心者向けに説明して」📘
  • 「PRコメントが付かない。どこを見ればいい?」🧯
  • 「expiresを30日にしたい。安全に変えて」⏳

生成AIは間違えることがあるので、変更前にコミットでスナップショットを取る癖をつけると安全です🧯 (Firebase)

6-2. AntigravityでもMCPで“Firebaseに触れるAI”にできる🧩🤖

Firebase MCP server は Antigravity からも使えます。設定例は公式に載っていて、内部的には firebase-tools@latest mcp を使う形です⚙️ (Firebase)


7) ミニ課題🎒✅(提出物はこれだけ!)

ミニ課題A:PRプレビューを1回通す🔁

Assignment

  1. 画面の文言を1つ変える(例:ヘッダに「preview test」)✍️
  2. PRを作る🧾
  3. PRコメントに出たプレビューURLへアクセス👀🔗
  4. 追コミットでも同じURLが更新されるのを確認🔁✨

ミニ課題B:プレビューの寿命を言語化する⏳

  • 「プレビューが何日で消えるか」
  • 「消えたら困る?困らない?(運用方針)」 を2行でメモ📝 (Actionのデフォルトは7日、設定で変えられます) (GitHub)

8) チェック✅(できたら次章へGO🚢)

Final Check

  • PRを作ると自動でPreview Channelが作られる✅ (Firebase)
  • PRにプレビューURLがコメントされる✅ (Firebase)
  • 追コミットで同じURLが更新される✅ (Firebase)
  • 「プレビューでも本物バックエンドに触れる」注意点が言える✅ (Firebase)

おまけ:AIサービスも絡める小ネタ🤖✨

このロードマップ全体でAIも使う前提なので、今のうちに1個だけ意識しておくと良い話👇 Firebase AI Logic はモデルの世代交代があるので、“動いてたのに急に止まる”を避けるために、モデル名を棚卸しする癖が役立ちます🧯(例:特定モデルが 2026-03-31 に退役予定) (Firebase)


次の第8章で、**「マージしたらliveへ自動デプロイ」**まで完成させると、いきなり“実務っぽい開発”になりますよ😎🚢