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