Github Actionsを使ってfirebaseへデプロイする

# はじめに
最近Github Actionsをよく聞くので使ってみたい今日このごろ。
ちょうど最近自分のポートフォリオ？のようなマイページのサイトを作っていたので、
これをfirebaseにデプロイするようにGithub Actionsを設定してみる。

# TL;DR.
[ymlファイル](https://gist.github.com/Tetsuya-Minase/73d969597939aa96badef2b9e6255c82)

# Github Actions準備
firebaseに上げる前にGithub Actionsの準備を行う。
始めるにはWebからやるか、自分で作りたければ`.github/workflow/xxx.yml`を用意する。

## Webからやる場合
`Code`,`Pull requests`が並ぶところに`Actions`があるのでそこを開く。
テンプレートがたくさんあるので、ここから選べばよしなにymlファイルを作成してくれる。
今回は自分で作って見たかったので、こちらの手順は割愛。

<img width="895" alt="スクリーンショット 2020-01-31 0.22.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176571/a5279e8d-dcb5-1b98-e911-b55dc213665a.png">
<img width="1632" alt="スクリーンショット 2020-01-31 0.24.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176571/e1a8254f-0b0c-ecbc-3bc2-7c01b33652d2.png">


## 自分で作る場合
自力でテンプレにあるようなymlファイルを書けば良い。
構文は[公式のドキュメント](https://help.github.com/ja/actions/automating-your-workflow-with-github-actions/workflow-syntax-for-github-actions)があるので、それを見ながら書いていく。

``` yml
# ワークフローの名前
# 書かないとデフォルト値(リポジトリのルートに対するワークフローファイルの相対パス)になる
name: inform-weather-confirm-flow

# ワークフローをトリガーするGithubイベントの名前
on:
  # 1個の場合そのまま書く
  # 2個以上の場合、リスト形式で書く→[push, pull_request]
  pull_request:
    # ブランチを指定すれば絞ることができる
    # ワイルドカード、!が使える
    branches:
      # マスター以外
      - '!master'

# ワークフローで実行するジョブを書いていく
jobs:
  # ジョブ名
  deploy:
    # ジョブを実行する環境
    # 環境については公式ドキュメントを参照
    runs-on: ubuntu-latest
    # ジョブに紐づくタスク
    steps:
      # アクションを実行する
      # アクション = 再利用可能なコードの単位
      - uses: actions/checkout@v1

      # nameはstepの名前
      - name: setup 
        uses: actions/setup-node@v1
        with:
          node-version: 12

      # パッケージインストール
      - name: install
        run: npm install

      # lint実行
      - name: lint
        run: npm run lint:format

      # テスト実行
      - name: test
        run: npm test
```

# firebaseへのデプロイ
プロジェクト作るところは割愛。
GUIでポチポチすればよかったはず。

``` shell
# ciで使うトークンを取得
$ firebase login:ci
> browserでログインを求められるのでログイン
> Tokenが出てくるのでそれをコピーしておく

# コマンドは下記の通り
$ firebase deploy --token=とったトークン
```

これをymlに書けば良い。
今回は`npm script`に下記の通り追加してこのコマンドを使う。

``` json
"script": {
  "deploy": "firebase deploy"
}
```

``` yml
# deployするsample workflow
name: deploy-sample

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1

      - name: setup
        uses: actions/setup-node@v1
        with:
          node-version: 12

      - name: install
        run: npm install

      - name: build
        run: npm run build

      - name: deploy
        # tokenはsecretsに追加し、それを参照する
        run: npm run deploy -- --token=${{secrets.token}}
```

# おまけ
## 特定のジョブが終わっていることを条件にしたい場合
testが通った後にデプロイをしたい場合などで割とよくあるパターンだと思う。
実行したいジョブに`needs`で事前に完了していてほしいジョブを指定する。

例は下記の通り。

``` yaml
jobs:
  job1:
  job2:
    # job1が完了していること
    needs: job1
  job3:
    # job1とjob2が完了していること
    needs: [job1, job2]
```

## パスワード/Tokenなどを設定したい場合
デプロイする時にパスワードなりtokenなり他の人に見せたくないけど、
ci上で使いたい！っていうものが多々ある。
circleciとか他のci/cdサービスでこのようなことは普通にできると思うが、
Github Actionsでももちろん設定できる。
登録するにはWebUIからポチポチしていけばできる。
`Settings > Secrets > Add a new secret`から追加できる。

<img width="1036" alt="スクリーンショット 2020-01-31 0.49.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176571/c31d35ba-a2f0-c3b3-4ee1-34160417aa12.png">


使う時は下記のようにすればOK。

``` yaml
- name: deploy
  # ${{secrets.XXX}}で取得できる
  run: npm run deploy -- --token=${{secrets.TOKEN}}
```

## Slackへの通知
デプロイ結果やビルドエラーになった場合など、
どこかに通知したいこともあると思う。
今回は個人的によく使うので、Slackに通知することにする。

既にSlackに通知をする[Action](https://github.com/marketplace/actions/slack-notify)があるので、これを使うことにする。
webhookのトークンが必要なので予め取得しておく。
設定項目は公式にも書いてあるが下記の通り。

``` yaml
...
- name: slack-notice-success
        uses: rtCamp/action-slack-notify@v2.0.0
        env:
          SLACK_CHANNEL: 'チャンネル名'
          SLACK_COLOR: '#3278BD'
          SLACK_ICON: 'icon url'
          SLACK_MESSAGE: 'メッセージ'
          SLACK_TITLE: 'タイトル'
          SLACK_USERNAME: '名前'
          SLACK_WEBHOOK: ${{ secrets.SLACK_TOKEN }}
...
```

画像みたいな通知が飛んでくればOK。

<img width="557" alt="スクリーンショット 2020-01-31 23.57.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176571/a8ab72cc-25a8-001d-5053-8d780e58384f.png">


# まとめ
今回はGithub Actionsでfirebaseにデプロイするワークフローを作成した。
前まではCircleCIを使っていたけど、
Githubで完結するのがだいぶ楽なのでとても良かった。
いずれもっと複雑なものを書いていこうと思う。
それでは今回はこの辺で。

# 参考サイト
- [GitHub Actionsのドキュメント - GitHub ヘルプ](https://help.github.com/ja/actions)
- [GitHub Actionsのワークフロー構文 - GitHub ヘルプ](https://help.github.com/ja/actions/automating-your-workflow-with-github-actions/workflow-syntax-for-github-actions#)
- [Slack Notify · Actions · GitHub Marketplace](https://github.com/marketplace/actions/slack-notify)