【GitHub Actions】Firebase HostingへのCD環境の構築

概要

本記事の対象者

• CI/CDって何？って人
• GitHub Actionsに興味がる人
• Firebase HostingへのCD環境作りたい人

この記事でできること

• GitHub Actionsを用いてFirebase HostingへのCD環境の構築ができます

CI/CDとは？

CI/CDとは 「Continuous Integration／Continuous Delivery」 のことです。
日本語では「継続的インティグレーション／継続的デリバリー」と訳されます。

極限まで咀嚼して説明すると要は、
「自動的にテストやデプロイを行うようにしましょう〜」
という開発手法のことです。

ここまで理解したところで、次はこの開発手法を実現するための便利なCI/CDツールを紹介します。

GitHub Actionsとは？

公式サイトには以下のような説明書きがあります。

GitHub Actionsを使用すると、ワールドクラスのCI / CDですべてのソフトウェアワークフローを簡単に自動化できます。 GitHubから直接コードをビルド、テスト、デプロイでき、コードレビュー、ブランチ管理、問題のトリアージを希望どおりに機能させます。（参考：https://github.co.jp/features/actions）

要は、GitHub Actionsは 「GitHub上で動作するサーバレス実行環境」 を提供してくれるサービスです。
GitHubのアカウントがあればすぐに使い始められ、Gitのあらゆるタスク（Push/Pull Request/Mergeなど）をトリガーにworkflowを実行することができるので非常に便利です。

これまでよく使われていたCircleCIなどでは、GitHubと連携することから必要でした。
しかし、GitHub Actionsではそのような細かい設定なども必要ないのでとてもお手軽なことが分かりますね。

Firebase Hostingとは？

公式サイトには以下のような説明書きがあります。

Firebase Hosting は、ウェブアプリ、静的コンテンツと動的コンテンツ、マイクロサービス向けの高速で安全性の高いホスティングを提供します。(参考：https://firebase.google.com/docs/hosting?hl=ja)

要は、GitHub Pagesなどと同様のホスティングサービスです。
Firebase CLI を使うことで非常に簡単に本番環境へのデプロイを行うことができます。

設定の手順

Firebase HostingとGitHub Actionsを連携させる４Step

注)npmが使える状態であるという前提で説明を進めます。

1. ターミナルを開き、Firebase CLIをインストールします

npm install -g firebase-tools

2. Firebase CLIを用いてHostingの設定を開始します

firebase init hosting

3. 以下の設問が出たら「y」を入力してenterを押す

? Set up automatic builds and deploys with GitHub? (y/N) 

4. 以下4つの設問に答える

番号	設問
1	For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)
2	Set up the workflow to run a build script before every deploy? (y/N)
3	Set up automatic deployment to your site's live channel when a PR is merged? (Y/n)
4	What is the name of the GitHub branch associated with your site's live channel? (main)

ここまで終えると以下の二つのymlファイルが作成され、merge/pull-request時に自動的にFirebase Hostingへのデプロイが走ることになります。

.github/workflows/firebase-hosting-merge.yml
.github/workflows/firebase-hosting-pull-request.yml

補足

既にHostingの設定をしている場合は、以下のコマンドを叩くことでステップ4から始めることができます。

firebase init hosting:github

まとめ

長い設定お疲れ様でした。今回は基本的なCD環境の構築についてみてきました。
開発を効率よく進める上でCI/CDについての理解は必須になるので、これを期にGitHub Actionsについての詳しく調べてみてはいかがでしょうか。今後も情報を発信して行きますので興味のある方はフォロー、コメント等していただけると嬉しいです。
ここまで読んでいただきありがとうございました！

参考文献

• https://firebase.google.com/docs/hosting/github-integration
• https://codezine.jp/article/detail/11450