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

はじめに

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

TL;DR.

ymlファイル

Github Actions準備

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

Webからやる場合

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

自分で作る場合

自力でテンプレにあるような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でポチポチすればよかったはず。

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

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

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

"script": {
  "deploy": "firebase deploy"
}

# 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で事前に完了していてほしいジョブを指定する。

例は下記の通り。

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から追加できる。

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

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

Slackへの通知

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

既にSlackに通知をするActionがあるので、これを使うことにする。
webhookのトークンが必要なので予め取得しておく。
設定項目は公式にも書いてあるが下記の通り。

...
- 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。

まとめ

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

参考サイト

• GitHub Actionsのドキュメント - GitHub ヘルプ
• GitHub Actionsのワークフロー構文 - GitHub ヘルプ
• Slack Notify · Actions · GitHub Marketplace