Gatsby+Firebase環境をGitHubActionsでDeploy

このページは？

Gatsby+FirebaseをGitHubActionsからdeployした際の作業ログです
CircleCIで言うところのpersist_to_workspaceに当たるStepなどを作成するのに困ったので残します

1. 環境準備

Gatsby環境を準備

公式に沿ってQuickStart
https://www.gatsbyjs.org/docs/quick-start/

npm install -g gatsby-cli
gatsby new gatsby-site
gatsby develop
gatsby build

Firebaseを準備

• プロジェクト作成する
• Firebase Hosting の設定を行う
  • ページに従えばOK

npm install -g firebase-tools
firebase login
firebase init
firebase deploy

準備完了

GitHubへファイルをpushする

2. GitHubActionsを作成

Actionsの実装フロー

• build jobを作成(gatsby build)
• deploy jobを作成(firebase deploy)
• 実装完了

build jobを作成

まずはbuildを行うjobを作成します
GitHubActionsのworkflowからnode.jsを選択します
特に設定をしなくてもnpm build/testを実行する設定のようでした
（今回は QuickStartで作成しているため testロジックでエラーとなるので消してあります）

name: Node CI

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [8.x, 10.x, 12.x]

    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: npm install, build, and test
      run: |
        npm ci
        npm run build --if-present
      env:
        CI: true

アーティファクトのアップロード

deploy時にbuildしたファイルを参照するためにアーティファクトを使用してワークフローデータを永続化します
CircleCIで言うところのpersist_to_workspaceに当たるStepです
Gatsby buildで生成されるファイルはpublic(default)なのでpublicをアップロードします

    - name: Archive Production Artifact
      uses: actions/upload-artifact@master
      with:
        name: public
        path: public

deploy jobを作成

deployを行うjobを作成していきます
まずはアップロードしたアーティファクトをダウンロードします

アーティファクトのダウンロード

 deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: public
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Firebaseへのdeployを追加

Firebaseへのdeployはgithub-action-for-firebaseを利用しました
（https://github.com/marketplace/actions/github-action-for-firebase）

      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

secrets.FIREBASE_TOKENはGitHubのRepository内のsettingsからsecretsで設定できます

設定するFIREBASE_TOKENは下記コマンドで取得

$ firebase login:ci

1//xxxxxxx

ここまででdeploy設定は終わりです

最終的な成果物

.github/workflows/nodejs.yml

name: Node CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [8.x, 10.x, 12.x]
    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: npm install, build, and test
      run: |
        npm ci
        npm run build --if-present
        npm test
      env:
        CI: true
    - name: Archive Production Artifact
      uses: actions/upload-artifact@master
      with:
        name: public
        path: public
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: public
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

その他

特定のブランチのみで実行されるようにする

on: [push]
ここを変更することで可能なようです

// マスターで実行される設定
on:
   push
     branches
       - master 

トリガーの設定はこちら
https://help.github.com/ja/actions/automating-your-workflow-with-github-actions/workflow-syntax-for-github-actions#on
https://help.github.com/ja/actions/automating-your-workflow-with-github-actions/events-that-trigger-workflows