React製サイトをGitHub Actionsを使ってFirebase Hostingへ自動デプロイ

2020-10-11

2021年7月23日追記

現在はFirebaseとGithubActionsの連携がさらに強化され、GithubActions経由のデプロイがかなり便利になっています。詳しくは下記をご参照ください。

Déployer la version en ligne et de prévisualisation des canaux via des demandes d’extraction GitHub | Firebase Hosting

firebase.google.com

概要

ポートフォリオサイト(https://okaryo.io)をFirebase Hostingで運用していたのだが、masterブランチにマージするたびにローカルでビルドとデプロイをしていたのがめんどくさくなった。そこで、GitHub Actionsを使って自動ビルド・デプロイさせることにした。

この記事では、設定手順やその際に詰まった点をまとめる。

前提

Firebase Hostingでプロジェクトをあらかじめ作っていて、firebase-toolsのインストールやfirebase.json の設定は済んでいるものとする。

手順

FIREBASE_TOKENの設定

Firebase Hostingへのデプロイにはfirebase-toolsを使って、firebase deployコマンドで実行できる。それをGitHub Actionsにやらせるので、認証用のトークンをGitHubに登録しておく必要がある。

ローカルで以下のコマンドを実行する。firebase-toolsをローカルに落としていることが前提だ。

firebase login:ci

認証を進めると、トークンが発行される。GitHubのレポジトリページから、Settings -> Secrets -> New secretという導線順で以下のページに行き、先ほどのトークンを登録する。

デプロイ用yamlの作成

以下のyamlファイルを.github/workflow/main.yml(ファイル名は自由)に置く。

name: Build and Deploy

on: 
  push:
    branches: 
      - master

jobs:
  build:
    name: build
    runs-on: ubuntu-latest
    steps:
    - name: checkout
      uses: actions/checkout@master
    - name: npm install
      run: npm install
    - name: build
      run: npm run build
    - name: persist to workspace
      uses: actions/upload-artifact@master
      with:
        name: build
        path: build

  deploy:
    name: deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
    - name: checkout
      uses: actions/checkout@master
    - name: download workspace
      uses: actions/download-artifact@master
      with:
        name: build
        path: build
    - name: install firebase-tools
      run: sudo npm install -g firebase-tools
    - name: deploy
      env:
        FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
      run: firebase deploy --token $FIREBASE_TOKEN --project Firebaseのプロジェクト名

ワークフローの構文については公式のドキュメントがよくまとまっているのでそちらを参考にしてほしい。CircleCIなどに触ったことがあれば、構文の理解に困ることは少ないと思われる。
→ https://docs.github.com/ja/free-pro-team@latest/actions/reference/workflow-syntax-for-github-actions

npmスクリプトは各自のお手製のものを使用してほしい。ひとまずこれで、masterブランチへのpushやマージで自動ビルド・デプロイが走るようになったはずだ。

以下、設定する上で詰まった箇所を挙げておく。

詰まった箇所

artifactという概念

GitHub Actionsではジョブ間でのデータのやりとりをartifactsというものを使って行うらしい。ドキュメント

Artifacts allow you to share data between jobs in a workflow and store data once that workflow has completed.

今回のyamlファイルの中では以下の箇所がそうだ。

# build job
- name: persist to workspace
  uses: actions/upload-artifact@master
  with:
    name: build
    path: build

# deploy job
- name: download workspace
  uses: actions/download-artifact@master
  with:
    name: build
    path: build

build jobからdeploy jobへ、ビルドしたファイルを送っている。(CircleCIのpersist_to_workspaceを引きずった名前にしたが、素直にupload artifactでよかったな。。)

一つのジョブの中でビルドとデプロイをしてしまえばartifactのやりとりは必要ないが、やはりジョブは分けたい。エラーがあった際に、どちらのジョブでの問題か分かりやすくもなるし、再利用性やコードの見やすさも高まる。

firebase-toolsのインストールでpermission error

ジョブの中でfirebase-toolsをインストールしようとnpm install -g firebase-toolsを実行すると、permission errorで落ちてしまった。

こちらはsudoをつけることで回避した。

参考にしたサイトの中でsuduをつけたものはなかったが、これはおそらくnpm packageとしてpackage.jsonの中にfirebase-toolsを入れているのではないか。個人的にはpackage.jsonに入れたくなかったので、ジョブの中でsudoすることでお茶を濁した。