はじめに
最近Github Actionsをよく聞くので使ってみたい今日このごろ。
ちょうど最近自分のポートフォリオ？のようなマイページのサイトを作っていたので、
これをfirebaseにデプロイするようにGithub Actionsを設定してみる。
TL;DR.
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で完結するのがだいぶ楽なのでとても良かった。
いずれもっと複雑なものを書いていこうと思う。
それでは今回はこの辺で。