これはなに？
プロジェクトでプルリク作成時に自動でビルドチェックとLintチェックをしてくれるように設定したので忘れないように記載しました
※作業は全てvscodeで行っています
作成物
導入手順
1. actionsを追加
プロジェクトのルートから.github/workflows/****.yamlを作成します
基本的に.github/workflows/****.yaml＋設定したトリガーでCIが動くようなイメージです
----- ちょっと雑談 -----
.github/ISSUE_TEMPLATEとかでissue作成時のテンプレート設定もできるなど色々カスタマイズできるのでここも試してみると良いかもです
----- 雑談終わり -----
2. ビルドの設定
1でyamlファイルを作成できたらまずはビルド時の設定を記載していきます
name: test_and_build_check_at_pr
on:
pull_request:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: "14.17.6"
- name: Install Dependencies
run: npm ci
- name: check-build
run: npm run build
actionsを自分も忘れないように記載しておくと、
on:でどのタイミングでこのActionsを実行するかを記載していて、今回はタイトルにも記載してある通りプルリク作成時になっています
branches:では更にどのブランチに向けた時にActionsを実行するかを記載しています
ここではmainブランチに向けた時になっていますが、version*と設定することでversion1.0, version1.1等のブランチに向けた際に実行してくれるようになります
もっと細かく設定できたりするのでドキュメントを読んでみると面白そうです
3. reviewdogの設定
ビルドが通った後は自動で文法チェックをしてくれるreviewdogを記載します
reviewdogは可愛いワンちゃんが静的解析をしてルールに従っていない箇所を注意してくれるものです
name: test_and_build_check_at_pr
on:
pull_request:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: "14.17.6"
- name: Install Dependencies
run: npm ci
- name: check-build
run: npm run build
reviewdog:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: reviewdog/action-eslint@v1
with:
github_token: ${{ secrets.github_token }}
reporter: github-pr-review
eslint_flags: "pages/**/*.{ts,tsx}"
4. 実行してみる
プルリクを作成してみて以下のような結果が出ればActionsが正しく走っていることになります
こちらのリンクからスクショと同様のものが確認できると思うので参考にしてみてください
終わりに
ビルドできる状態(レビューする品質になっているか)を自動でチェックしてくれるおかげで開発者の負担が少し減った印象です
プログラマーの3大美徳にもあるように労力を減らすことを常に意識するのは大事なので今後も「自動化できそうだ！」と思ったら積極的にやっていこうと思います
今回はvscodeで書きましたがgithub上でも記載できる(というか本来はそっちなのかも...)ので好きな方で試してみると良いのかなと思います
ではまた！