GitHub Actionsでpush→試験、バージョンタグ→リリース用意、リリース→デプロイを自動化したよ。

• .github/actions/test.yml push ないし PR 作成 → 試験実行
• .github/actions/release.yml v1.2.34 みたいなタグ作成 → GitHub リポジトリーの Release ドラフトを作成
• .github/actions/publish.yml Publish release → GitHub Pages をデプロイ

というのをやったので、わかったところまでをメモ。

実際に使ってるファイルはここら辺です。（このプロジェクト自体については本稿は関係ないです。）

• https://github.com/ginpei/pomolife/tree/ee6a4055ae95e2d39c3a9b06eb6b40385d510281/.github/workflows

これらの GitHub Actions を利用してどう開発するかも、アクションの説明の後に書きました。

push ないし PR 作成 → 試験実行

標準的な Node.js のアクションかと思います。

.github/actions/test.yml

name: Test

on: [push, pull_request]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v1
      with:
        node-version: 10.x
    - run: npm cit && npm run lint
      env:
        CI: true
    - run: npm run build

事前に用意する NPM スクリプト

試験は npm run test で実行できるものとします。あと npm run lint で ESLint が走る用意もある前提です。（不要ならコピペして削ってね。）

複数の Node.js バージョン

ライブラリーとかを開発してる場合は matrix を使って複数の Node.js バージョンで実行するとよろしいかと存じます。知らんけどなんかそんな気がする。

v1.2.34 みたいなタグ作成 → GitHub リポジトリーの Release ドラフトを作成

ワイルドカードを使いつつ /^v[0-9]/ 的なタグを対象に Release ドラフト作成を実施します。ここでいう Release ってのは GitHub リポジトリーページの Code → Releases に出てくるやつらのこと。

Release を作成するアクションは GitHub 公式。

• Create a Release · Actions · GitHub Marketplace

.github/actions/release.yml

name: Release Draft

on:
  push:
    tags: ['v0*', 'v1*', 'v2*', 'v3*', 'v4*', 'v5*', 'v6*', 'v7*', 'v8*', 'v9*']

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v1
      with:
        node-version: 10.x
    - run: npm cit && npm run lint
      env:
        CI: true
    - run: npm run build
    - name: Create Release
      id: create_release
      uses: actions/create-release@latest
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      with:
        tag_name: ${{ github.ref }}
        release_name: ${{ github.ref }}
        draft: true

GITHUB_TOKEN は自動で用意される

のでそのままで大丈夫です。

• GITHUB_TOKENでの認証 – GitHub ヘルプ

GitHubは、ワークフローで利用する GITHUB_TOKEN シークレットを自動的に生成します。

Publish release → GitHub Pages をデプロイ

既存のアクションを利用させてもらいます。

• GitHub Pages action · Actions · GitHub Marketplace

.github/actions/publish.yml

name: Publish

on:
  release:
    types: published

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v1
      with:
        node-version: 10.x
    - run: npm cit && npm run lint
      env:
        CI: true
    - run: npm run build
    - name: GitHub Pages action
      uses: peaceiris/[email protected]
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./out

前節のアクションで Release はドラフトとして作成されています。これを編集から “Publish release” すると type: published のイベントが発火するので、そこから GitHub Pages を更新するようにします。

publish_dir は適宜変更してください。

作業の流れ

上記アクションを用意する

します。

開発してコミットする

します。

push するたびに試験が実行され、それに失敗するとメールが飛んでくるので（たぶんデフォルトで、設定変更できると思う）、「ついうっかり」があってもすぐ気づけるようになるわけです。やったね。

試験はちゃんと書こうね。

バージョンを上げる

ぼちぼち開発したらここぞと思うところでバージョンを上げます。

npm を使ってる場合は npm version <new version> で

• package.json の version を更新
• Git コミット
• Git タグ作成

を一発でやってくれます。

またバージョンは直接指定しなくても、semver のどこを上げるかキーワードで指定できます。べんりー

タグを push する

Git でコミットとタグは別扱いみたいなので、git push だけでなく git push --tags も実行してタグをリモートである GitHub へ送信します。（そこらへん GUI のツール使ってると一発なのかな？）

受信した GitHub は v1.2.34 のようなタグを見つけ次第該当するアクションを実行し、 GitHub リポジトリーページのリリース一覧にドラフトを用意します。

Release を完成させる

Code → Releases の一覧に Draft 状態の Release が用意されてるはずです。ちなみに Draft 状態だとアクセス権のないひとは見えないみたいです。（一方 pre-release は見える。）

右側 Edit ボタンから編集ページを開いて、適宜編集して Publish release ボタンから、リリーーース！するとこのリリースに反応するよう設定した Publish アクションが実行されます。

前述の通り、このプロジェクトにおける publish とは GitHub Pages 更新のことです。

GitHub Pages が更新されたのを確認する

リポジトリーの Actions ページでアクションの実行ログを一覧できます。最新のものがまだ実行中かもしれません。完了するまで待ちましょう。なおログのページはリアルタイムで更新されるので、見ていてたのしい。

終わったら GitHub Pages の URL を開いて、最新版に更新されていることを確認します。やったね。

ちなみに URL は https://ginpei.github.io/my-great-app/ みたいになります。Nuxt.js 等々だいたいのフレームワークはルートパス / での動作を前提にファイルを用意するので、真っ白なページでコンソールにエラーが出てるかもしれません。フレームワークの設定をしたり、独自ドメインを用意したりしてください。アクションは関係ないので本稿では説明しません。

よくわからないこと

試験実行をまとめたい

steps の途中までは全部一緒なので、そこを抜き出して共通化したい感じがある。独立したアクションなら use で呼べるけど、同じリポジトリー内の別の workflow も呼べたりしないかな。呼ぶというか、前提条件として待つというか。

/^v[0-9]/ をもっときれいにやれないか

'v*' だと たまたま “v” で始まる、例えば volumeUp とか vancouver とかに反応しちゃうので、直後に数字が来るものに限定しました。10通りしかないから全部書いたけど、もうちょっと綺麗にやれたりするんだろうか。

キャッシュしたい

毎回 npm install するのは時間と帯域の無駄遣い。たしか pacckage-lock.json をキーにしてキャッシュするやり方があったはず。あとで調べる。

おわり

とりあえず動いたのでヨシ！

参考

• Configuring a workflow – GitHub Help
• Events that trigger workflows – GitHub Help
  • Release event: release
• Managing a custom domain for your GitHub Pages site – GitHub Help
• Create a Release · Actions · GitHub Marketplace
• GitHub Pages action · Actions · GitHub Marketplace
• Authenticating with the GITHUB_TOKEN – GitHub Help
• npm-version | npm Documentation