Firebase CLI のバージョンを最新にしたら Hosting が便利になった

firebase の CLI を最新化したら、firebase init から作る Firebase Hosting の設定が GitHub Actions の yaml を作るようになっていました。結構便利だったのでこの設定が何をしているのか、どういう嬉しさがあるのか見ていきましょう。

これまでの問題点

Firebase Hosting は CI/CD の面倒をみてくれませんでした。Hosting サービスなのだからそこまで面倒を見なくて当然なのですが、Netlify, Vercel, Cloudflare Pages のようなホスティングサービスは GitHub のブランチと連携して CD パイプラインを提供してくれていました。そしてそれは便利な者で、この手の機能がない Firebase はホスティング環境の選定においてディスアドバンテージになっていました。（知らんけど）

とはいえ、自前で用意した CD 環境に firebase コマンドを入れられれば firebase deploy コマンドで実現できるので致命的な問題ではないです。そしてそのエイリアス的な機能は GitHub Actions のマーケットでも提供はされていました。ただそれでも firebase login:ci で吐き出したトークンをセットしたりその口を用意したりといった面倒臭さはあり、あまりやりたい作業ではなかったです。

firebase CLI が提供する設定

それが firebase CLI の最新版では、firebase init 時に GitHub Actions の yaml を提供してくれるようになりました。

それがこれらの yaml です。

firebase-hosting-pull-request.yml

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
  build_and_preview:
    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run fuga
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
        firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_HOGE }}'
          projectId: hoge

firebase-hosting-merge.yml

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
"on":
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run fuga
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_HOGE }}"
          channelId: live
          projectId: hoge

FirebaseExtended/action-hosting-deploy の役目

トリガーされるたびにFirebaseExtended/action-hosting-deployが実行されます。

ここでキモになるのが channelId というフィールドです。これは

The ID of the channel to deploy to. If you leave this blank, a preview channel and its ID will be auto-generated per branch or PR. If you set it to live, the action deploys to the live channel of your default Hosting site.

と公式で説明されています。

つまり、何も書かなければ preview 環境へデプロイ、 live と書けば本番環境へ適用することができます。

なんと preview 環境へのデプロイが自動でできるようになったわけです。これは他のホスティングサービスにもあるような機能であり、便利になりました。

Firebase Hosting の preview と認証

preview 環境は、もう一つ project や site を取ってデプロイするのとは、認証周りで大きく異なります。 Firebase Authentication の適用範囲は設定画面で登録したドメインに対してのみです。project や site は変わると別ドメイン扱いになるため認証の設定も環境ごとに追加しないといけません。しかし preview 環境の URL は既に登録している site のと同じドメインで作られるので、認証周りの設定変更は必要なくなります。便利ですね。

おわりに

定期的に CLI は更新しよう、もしくは npx firebase を使おう。