Chapter 06

GitHub Actions - Part 2

個人開発もいいけど、もしかしたらチーム開発するかもしれないよね。
そんなときは、GitHub Actionsをもっとカスタマイズしよう。

いくつかの便利なアイディアを書いていく。

🏷 ラベルの自動化

プルリク (PR) のラベルを自動化すると、どんな内容なのかすぐに把握しやすいよね。
今回はどのブランチで作業したかによって、ラベルを振り分けるようにします。
ファイルを作成して内容を書き込みましょう。

pr-labeler.ymlpr-labeler-config.ymlを用意します。

touch .github/workflows/pr-labeler.yml
github/workflows/pr-labeler.yml
name: PR Labeler

# Triggers on open pull request
on:
  pull_request:
    types: [opened]

jobs:
  pr-labeler:
    runs-on: ubuntu-latest
    steps:
      - uses: TimonVS/pr-labeler-action@v3
        with:
          # optional, .github/pr-labeler.yml is the default value
          configuration-path: .github/pr-labeler-config.yml
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

ラベルの設定はpr-labeler-config.ymlでします。この設定をすることで、どのラベルを振り分けるか判断できるようになります。

touch .github/pr-labeler-config.yml
github/pr-labeler-config.yml
Description: >
  If you were working on fix/issues#1 branch,
  pushing to that branch will auto label 'fix'.
  ex) label_name: ['branch_name']

feature: ['feature/*', 'feat/*']
fix: ['fix/*', 'bug/*', 'bugfix/*']
chore: 'chore/*'
documentation: 'docs/*'

新しいワークフローを追加したのでコミットしましょう。

$ git status
$ git add .
$ git commit -m "feat: pr labeler github actions"

📝 リリースノートの自動作成

最新バージョンをリリースしたら「どこを変更したのか」「どういう機能が追加されたのか」など、変更点をまとめたリリースノートを書きたい。

プルリクについているラベルから、自動的にリリースノートをいい感じに書いてくれるようにする。

$ touch .github/release-drafter.yml 
.github/release-drafter.yml
name-template: 'v$RESOLVED_VERSION 🌈'
tag-template: 'v$RESOLVED_VERSION'

categories:
  - title: '🚀 Features'
    label: 'features'
  - title: '🐛 Bug Fixes'
    labels:
      - 'fix'
      - 'bugfix'
      - 'bug'
  - title: '🧰 Maintenance'
    label: 'chore'
  - title: '📝 Document'
    label: 'documentation'

change-template: '- $TITLE @$AUTHOR (#$NUMBER)'
change-title-escapes: '\<*_&'
template: |
  ## ✨Changes
  $CHANGES

すでにあるrelease.ymlに作業を追加しよう。

github/workflows/release.yml
name: CICD

# ...skipped

jobs:
  release:
    name: release-npm-package
    
    # ...skipped

      # Create tag with current package version
      - name: current-package-version-to-git-tag
        uses: pkgdeps/git-tag-action@v2
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          github_repo: ${{ github.repository }}
          git_commit_sha: ${{ github.sha }}
          git_tag_prefix: ''
          version: ${{ env.CURRENT_PACKAGE_VERSION }}

      # これを追加したよ👇
      # Create release draft
      - name: release-draft
        uses: release-drafter/release-drafter@v5
        with:
          name: ${{ env.CURRENT_PACKAGE_VERSION }}
          version: ${{ env.CURRENT_PACKAGE_VERSION }}
          tag: ${{ env.CURRENT_PACKAGE_VERSION }}
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      # Publish to npm
      - name: publish-to-npm
        run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}

新しいワークフローを追加したのでコミットしましょう。

$ git status
$ git add .
$ git commit -m "feat: release drafter github actions"

🧪 GitHub Action でテストを実行する

テストもワークフローで自動化して、パスしなければ最新バージョンをリリースしないようにする。

github/workflows/pr-labeler.yml
name: CICD

# ...skipped

jobs:
  release:
    name: release-npm-package
    
    # ...skipped

      # 👇 これと
      # Install dependencies
      - name: install-dependencies
        run: yarn --frozen-lockfile
      
      # 👇 これを追加したよ
      # Run test
      - name: test
        run: yarn test

      # Get current package version
      - name: current-package-version
        run: node -p -e '`CURRENT_PACKAGE_VERSION=${require("./package.json").version}`' >> $GITHUB_ENV

      # ...skipped

新しいワークフローを追加したのでコミットしましょう。

$ git status
$ git add .
$ git commit -m "feat: run test github actions"

🧑‍🔬 試してみる

実際に上記のワークフローが動作するか試してみましょう。ただしく動作すれば、

  • テストが実行され
  • 自動でラベルがつけられて
  • リリースノートが作成される

それではブランチを切って作業してみよう。

$ git checkout -b chore/update-message

少しだけ変更する。

src/index.js
const myOriginalLibrary = (emoji) => {
-  const message = 'Nice work !';
+  const message = 'Awesome work !'; // 👈 メッセージを変更するよ

  // ...skipped
};

最後にコミットしてプッシュしましょう。

$ git status
$ git add .
$ git commit -m "chore: update message"
$ npm version patch # 👈 これが重要だよ
$ git push origin chore/update-message
$ gh pr create

GitHubで確認すると、ちゃんとラベルがついています。


choreブランチで作業したので、choreラベルがついている

次はリリースノートが作成されるか確認したいので、プルリクをマージしましょう。

$ gh pr merge #1


リリースノートが作成された


EditからPublish releaseで公開する


Latest releaseになりました

npmも確認してみると、最新バージョンがリリースされていますね。


おめでとうございます!バージョンが 1.0.2 になりました🎉🎉🎉