個人開発でサクッとGithub ActionsでFirebase Hostingへの自動デプロイ、ESLintとSlack通知を自動化する

# はじめに
[GitHub Actions Advent Calendar 2019](https://qiita.com/advent-calendar/2019/github-actions)の20日目です。
本日は[@watsuyo_2](https://twitter.com/watsuyo_2)が「個人開発でサクッとGithub ActionsでFirebase Hostingへの自動デプロイ、ESLintとSlack通知を自動化する」を記事にします！

# 本記事での達成目標
Github Actionsのワークフローで

① プルリクエスト時にESLintチェックする
② Firebase Hostingへの自動デプロイ
③ デプロイ開始と終了をSlackに通知する

個人開発でサクッとこれらのワークフローを実装するにはCircle CIも良いですが、Github Actionsではより簡単にワークフローを実装するためのツールが揃っています。

詳しく知りたい方は[Github Marketplace](https://github.com/marketplace)をご覧ください。

# ① プルリクエスト時にESLintチェックする
まず `① プルリクエスト時にESLintチェックする` を実現するために、 [Run eslint with reviewdog](https://github.com/marketplace/actions/run-eslint-with-reviewdog)を使用します。

使用するには、開発を行っているディレクトのrootで

```sh
  $ vi .github/workflows/reviewdog.yml
```

reviewdog.ymlを作成します。

```.github/workflows/reviewdog.yml
name: reviewdog
on:
  pull_request:
    types: [opened, synchronize]
```

`name` は下の画像でいう右上のタイトルになるのでどんなワークフローか分かりやすいnameにしておきます。
`on` 以下ではこのワークフローのトリガーを示しています。
今回は `pull_request` ととし、`types` ではプルリクエストが公開されたタイミングをトリガーにワークフローを動かします。

<img width="749" alt="Screen Shot 2019-12-20 at 00.47.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253605/26086ed2-5f9d-afcd-72e4-fda1e7eb5512.png">

プルリクエストが公開されたタイミングでトリガーが発火されるように設定したら次にESLintのチェックが行われるように設定します。

```.github/workflows/reviewdog.yml
jobs:
  eslint:
    name: eslint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: yarn install
        run: yarn install
      - name: eslint review
        uses: reviewdog/action-eslint@v1
        with:
          github_token: ${{ secrets.github_token }}
          reporter: github-pr-review
          eslint_flags: 'src/**/*.{vue,ts,js}'
      - name: eslint
        run: yarn lint

```

`jobs` はTrigger発火時に動くjobです。
`uses: reviewdog/action-eslint@v1` で今回使用するツールを指定します。
基本的には[Run eslint with reviewdog](https://github.com/marketplace/actions/run-eslint-with-reviewdog)にあるサンプル通りで良いですが、ubuntu内でESlintを動かすためにESlintのyarnパッケージをインストールする記述を追加します。

以下が `.github/workflows/reviewdog.yml` の全体です。

```.github/workflows/reviewdog.yml
name: reviewdog
on:
  pull_request:
    types: [opened, synchronize]
jobs:
  eslint:
    name: eslint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: yarn install
        run: yarn install
      - name: eslint review
        uses: reviewdog/action-eslint@v1
        with:
          github_token: ${{ secrets.github_token }}
          reporter: github-pr-review
          eslint_flags: 'src/**/*.{vue,ts,js}'
      - name: eslint
        run: yarn lint

```

ここまで準備ができたら編集内容をcommit、pushしてプルリクエストを出すことでESlintのチェックが出来ます。
もちろんLintエラーが発生すればプルリクエストのページでcommitごとにエラーが表示されるので、確認が容易かつ、コードの治安が保たれます。

# ② Firebase Hostingへの自動デプロイ
今回も

```sh
  $ vi .github/workflows/nodejs.yml
```

ｙｍｌファイルを作ります。

今回はBuildとDeploy一つのファイルで行います。

[GitHub Action for Firebase](https://github.com/marketplace/actions/github-action-for-firebase)を使用します。

今回は `develop` ブランチにpush(GitHub的にはmerge)をトリガーにワークフローが動かします。

```.github/workflows/nodejs.yml
name: Build and Deploy
on:
  push:
    branches:
      - develop
```

次にBuildの内容を記述します。

```.github/workflows/nodejs.yml
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: yarn install
      - name: Build
        run: yarn build
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: dist
          path: dist
```

# ③ デプロイ開始と終了をSlackに通知する

ここからはSlack通知とDeployフローを並行して記述していきます。

`needs: build` で `build` フローが終了してからDeployフローが始まるようにします。
`steps` にはDeploy前後でSlack通知を設定します。

```yml
SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
SLACK_USERNAME: Deploy Bot # Optional.
SLACK_CHANNEL: feed # Optional.
SLACK_OVERRIDE_MESSAGE: 'Deploy Start' # Optional.
```
の４点を設定します。
`SLACK_WEBHOOK` は、 `https://github.com/{user_name}/{pj_name}/settings/secrets`に設定しておきます。
<img width="1105" alt="Screen Shot 2019-12-20 at 10.15.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253605/f7810f02-ecba-208a-55a6-2d00eca6292a.png">

後に使う、`FIREBASE_TOKEN`も設定しておきます。

`SLACK_USERNAME`には、通知をしてくれるSlack Bot名を設定します。
`SLACK_CHANNEL`に、チャンネルを追記します。
`SLACK_OVERRIDE_MESSAGE`には、Botに通知して欲しいメッセージを設定します。

最後にFirebase Auth Deployです。

```.github/workflows/nodejs.yml
- name: Deploy to Firebase
    uses: w9jds/firebase-action@master
      with:
        args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
```

先程、GitHub上に設定したenvで読み込みデプロイします。

```.github/workflows/nodejs.yml
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
      - name: Slack notification
        env:
          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
          SLACK_USERNAME: Deploy Bot # Optional.
          SLACK_CHANNEL: feed # Optional.
          SLACK_OVERRIDE_MESSAGE: 'Deploy Finish' # Optional.
        uses: Ilshidur/action-slack@master
        with:
          args: 'A new commit has been pushed.'

```

最後にDeploy終了を通知するメッセージを設定します。

以下が全文です。

```.github/workflows/nodejs.yml
name: Build and Deploy
on:
  push:
    branches:
      - develop

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: yarn install
      - name: Build
        run: yarn build
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: dist
          path: dist

  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Slack notification
        env:
          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
          SLACK_USERNAME: Deploy Bot # Optional.
          SLACK_CHANNEL: feed # Optional.
          SLACK_OVERRIDE_MESSAGE: 'Deploy Start' # Optional.
        uses: Ilshidur/action-slack@master
        with:
          args: 'A new commit has been pushed.'
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: dist
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
      - name: Slack notification
        env:
          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
          SLACK_USERNAME: Deploy Bot # Optional.
          SLACK_CHANNEL: feed # Optional.
          SLACK_OVERRIDE_MESSAGE: 'Deploy Finish' # Optional.
        uses: Ilshidur/action-slack@master
        with:
          args: 'A new commit has been pushed.'


```

# 終わりに
個人開発でデプロイフローを自動化し、ESLintエラーをコミットごとに表示してくれることでプルリクエストでの最低限のコード治安維持を実現したい。

そんなときはGitHub Actionsツールの組み合わせで大体のことはできそうです。

より強固なデプロイフロー、複数環境へのデプロイなどをGAEとの連携でも実現可能です。

詳しい部分は、[マーケットプレイス](https://github.com/marketplace?type=actions)をご確認ください。


# メンションつきツイートをしていただけるとたいへん喜びます！
[thanks-mentions](https://thanks-mentions.web.app/)というQiitaの記事を作者に対してメンションを飛ばしながらツイートが出来るPWAを作りました🚀
ぜひ、メンションつきツイートをしていただけるとたいへんとてもとても喜びます！
![popup.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253605/ca91b6c2-c84a-1665-b127-08b6ad5014f1.jpeg)