Firebase公式Github ActionsでPull RequestごとにHostingのプレビュー環境を作る

Dependabotを使うと定期的にライブラリのアップデート用Pull Requestを作ってくれて便利なのだが、動作確認が手間という問題があった。

テストをちゃんと書いていればCI実行時にエラーになって気づけるが、個人開発のプロジェクトだとテストを書いていない場合もある。

手元で動作確認せずにマージしてビルド時にエラーになってしまうということが何度かあったので手軽にプレビューできる環境が欲しいと思っていた。

Firebase Hostingにはまだベータ版ではあるがにプレビューチャネルという機能が追加されており、また、Firebase公式Github Actionsを使うことで手軽にPull Requestごとのプレビュー環境が作れることが分かったので試してみた。

Github Actions生成

firebase hosting本番環境へのデプロイ自体はすでに設定済みの想定。

Pull Requestごとのプレビュー環境のみGithub Actionsを使ってデプロイするようにする。

yarn run firebase init hosting:github

# ビルド設定はあとで手動で対応するのでNoにした
? Set up the workflow to run a build script before every deploy? No

# 本番環境デプロイは別で行っているのでNoにした
? Set up automatic deployment to your site's live channel when a PR is merged? No

上記コマンドを実行すると .github/workflows/firebase-hosting-pull-request.yml が生成される。

ビルド設定

生成された .github/workflows/firebase-hosting-pull-request.yml にビルド設定を追加する。

今回はNext.jsで作ったサイトで試したので、yarn build時に環境変数を設定するようにした。

name: Deploy to Firebase Hosting on PR
"on": pull_request
jobs:
  build_and_preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: yarn
      - run: yarn build
        env:
          SOME_ENV: test
          SOME_SECRET_ENV: ${{ secrets.SOME_SECRET_ENV }}
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_YOUR_FIREBASE_PROJECT }}"
          projectId: your_project_id
        env:
          FIREBASE_CLI_PREVIEWS: hostingchannels

動作確認

Pull Requestを作成するとに↓のようにコメントにプレビュー環境情報が通知される。

また、プレビュー環境アクセス時はヘッダーに x-robots-tag: noindex が自動で付与されるのでプレビュー環境がGoogleにindexされることはない。

これで手軽にプレビュー環境で動作確認できるようになったので、継続的なアップデートがやりやすくなった。

参考

• Deploy to Firebase Hosting · Actions · GitHub Marketplace
• サイトのライブおよびプレビューチャネル、リリース、バージョンを管理します  |  Firebase