Firebase公式のGitHubとHostingのインテグレーションが熱い🔥
ウェブコンテンツをホスティングする際に Firebase Hosting という大変便利なサービスがあります。
2020/10/8にGitHub ActionsとFirebase Hostingの統合が強化され、より便利に利用できるようになったのでご紹介します。
なお、公式のドキュメントは以下となります。
現時点では機械翻訳のため、言語をEnglishにして読んだほうが正確です。
GitHubプルリクエストを介してライブチャンネルとプレビューチャンネルにデプロイする
できるようになったこと
できるようになったことは主に以下の3つです。
- GitHub ActionsでPull requestを作成時に、プレビューサイトをデプロイできる
- GitHub ActionsでPull requestをマージ時に、本番サイトにデプロイできる
- Firebase CLIツールのコマンドでGitHub Actionsを設定できる
目玉はやはり1つ目です。
Pull requestをレビューする際に、一時的なプレビューサイト(https://<project-Id>-<random string>.web.app）がデプロイされます。動作確認のためにローカルにPullしなくてもよいので、レビューアーの負荷が減ります！
もちろん、今までもステージング用の環境を準備しておけば実現できますが、準備している環境分の修正断面しか同時に確認できないという課題もありました。
今回の統合強化により、Pull requestごとに一時的なプレビューサイトをデプロイできるようになりました🎉
こんな感じです！
イメージを掴みたい方はサンプルリポジトリもご確認ください！
（Create React Appで作成したデフォルトアプリをデプロイしています）
Pull requestのサンプル
やりかた
コマンドでGitHub Actionsを作成できるようになりました🎉
GitHub Actionsの定義ファイル（yaml）を一から作る必要が無くなりました👏
（Firebase Hosting未設定の場合）
$ firebase init hosting
（Firebase Hosting設定済の場合）
$ firebase init hosting:github
以下のような質問に答えていくだけでGitHub Actionsがセットアップできます。簡単ですね！
| # | 質問（英語） | 質問（日本語） | 回答例 |
|---|---|---|---|
| 1 | For which GitHub repository would you like to set up a GitHub workflow? | GitHub Actionsを設定するGitHubレポジトリを入力する | w2-yamaguchi/firebase-hosting-integration-github |
| 2 | Set up the workflow to run a build script before every deploy? | Hostingにデプロイする前にビルドスクリプトを動かすか | Reactなど事前にビルドが必要な場合→ Y(Yes) / 静的コンテンツのみの場合→ n(No) |
| 3 | What script should be run before every deploy? | (2がYesの場合) Hostingにデプロイする前に動かすビルドスプリクトを入力する | npm ci && npm run build |
| 4 | Set up automatic deployment to your site's live channel when a PR is merged? | プルリクエストがマージされたときに本番サイトにマージするか | Y(Yes) / n(No) |
| 5 | What is the name of the GitHub branch associated with your site's live channel? | (4がYesの場合) 本番サイトにマージする場合の対象ブランチは | main |
やってくれること
GitHub Actionsの定義ファイル（.yml）を作成してくれる
GitHub Actions用の認証情報を生成、登録してくれる
GitHub ActionsがFirebase Hostingにデプロイするために必要な認証情報（サービスアカウント）を生成、GitHubのレポジトリのSecretに登録してくれます。
さいごに
GitHub Actionsとの統合強化により、Firebase Hostingへの継続的なデプロイが簡単にできるようになりました。サービスの開発により注力できるようになるはずです！
Enjoy your Firebase life!
補足
プレビューサイトはいつまで有効なの？
デフォルトでは7日間です。GitHub Actionsの定義ファイルで指定可能です。
プレビューサイトを削除することが可能に（2021/05/06追記）
いつから表示されるようになったのかは不明ですが、Webコンソールからデプロイ済みのプレビューサイトを確認できるようになりました。有効期間の変更、削除も可能です。
プレビューサイトはGitHub Actionsからしかデプロイできないの？
いいえ、プレビューサイトをデプロイするコマンドが提供されています。
そのため、ローカル環境や任意のCIサービスからデプロイできます。
$ firebase hosting:channel:deploy CHANNEL_ID
（2021/09/28追記）
▼Firebaseをチーム開発で利用する場合のIAM設計の考え方について記事を書きました。ご参考になれば嬉しいです！
Discussion
ですが、
の誤りではありませんか?
ありがとうございます。ご指摘のとおりです。
早速修正いたします！