React AppをGithub ActionsでFirebase Hostingにデプロイする

Firebase Hostingって便利ですよね。手元でReact AppをFirebase Hostingにデプロイする場合は次のコマンドで手軽にできます(project idは.firebasercに書いているものとします)。

yarn build
firebase deploy --only hosting

さて、とはいえ毎度手動でデプロイというのは思わぬ事故をつながったりもしますので、自動化したいところです。本エントリではReact AppをGithub ActionsでFirebase Hostingにデプロイする手順について説明します。

deploy.ymlを作成する

Githubリポジトリのrootに次のファイルを作成してください。

.github/workflows/deploy.yml

これはGithub Actionsの設定ファイルです。ymlファイルの命名に制約はないので、deploy.ymlじゃなくても問題ないです。

FirebaseのCI Server用のトークンを払い出す

コマンドラインで次のコマンドを実行し、デプロイ時に利用するトークンを払い出します。

firebase login:ci

ログインをすると次のようなメッセージとともにトークンが払い出されます。

✔  Success! Use this token to login on a CI server:

{TOKENの文字列}

FIREBASE_TOKENをSecretsに登録する

GithubリポジトリのSettingsで環境変数を登録します。
FIREBASE_TOKENというKeyで、払い出したトークンを設定してください。

deploy.ymlにビルドとデプロイの設定を書く

あとはdeploy.ymlを埋めてmasterブランチにpushするだけです。

name: Deploy

on:
  # masterブランチにpushしたとき動く
  push:
    branches: [ master ]

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      # ビルドキャッシュ設定です。デプロイの動作自体には必要ないので消してしまっても大丈夫です。
      - name: Cache node modules
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-build-${{ env.cache-name }}-
            ${{ runner.OS }}-build-
            ${{ runner.OS }}-
      # yarn installを実行します
      - name: Install
        uses: borales/actions-yarn@v2.0.0
        with:
          cmd: install
      # yarn buildを実行します (production用のコマンドが異なる場合はcmdの部分を書き換えてください)
      - name: Build
        uses: borales/actions-yarn@v2.0.0
        with:
          cmd: build
      # ビルドした成果物を保存します。ビルド結果のパスがbuildではない場合は書き換えてください
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: build
          path: build
  deploy:
    name: Deploy
    # もし前段のbuildが通らなかったらこっちは動作しません
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      # ビルドした成果物を取り出します。pathの設定はuploadと合わせる必要があります
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: build
          path: build
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
	  # 必要に応じて引数を足したりしてください
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

おわりに

これでmasterへの直接pushか、pull requestをmasterにマージすると、Firebase Hostingへのデプロイが走るようになります。