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

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

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

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

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

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

GitHubプルリクエストを介してライブチャンネルとプレビューチャンネルにデプロイする  |  Firebase

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を作成するとに↓のようにコメントにプレビュー環境情報が通知される。

firebase preview

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

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

参考


Related #firebase

YouTubeの「Firebase Release Notes」プレイリスト

最新のアップデートの概要を把握するのにちょうど良い

Nuxt.jsのservice workerで環境変数を切り替えられるようにする

設定情報をハードコードしたくなかったので、ビルド時にnodeコマンドでファイル生成を行い環境変数を切り替えられるように対応した。

CloudFunctionsを使ってFirestoreのサブコレクションを削除する

CloudFunctions内でFirebase CLIのdeleteコマンドを呼び出すことで一括削除ができる

Firebase Hostingのリリース履歴を一括削除する

いつの間にか一括削除機能が追加されていた