GithubActionsでtypecheck/lint/test/buildを行う

学習メモです

ファイル作成

.github/workflowsディレクトリを作成
.github/workflowsにyamlファイルを作成

ジョブの作成

今回実行する必要のあるjobを以下のように実行したい

セットアップ

setup:
　　　　runs-on: ubuntu-latest
　　　　steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
    　　　　with:
	node-version: 18
　　　　　　　　- name: Install Yarn
　　　　　　　　　　　　run: npm install -g yarn
　　　　　　　　- uses: actions/cache@v3
　　　　　　　　# 別のstepから参照するためにstepにidを付与する
	id: node_modules_cache_id
	env:
	　　　　cache-name: cache-node-modules
	# usesのoption
	with:
	# どこをキャッシュするか
	　　　　path: '**/node_modules'
	  key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
	# 結果を出力
　　　　　　　　- run: echo '${{ toJSON(steps.node_modules_cache_id.outputs) }}'
	# actions/cacheでキャッシュしたディレクトリのkeyが変わっていたら、更新を検知してyarnをし直す
　　　　　　　　- if: ${{ steps.node_modules_cache_id.outputs.cache-hit != 'true' }}
	　　　　run: yarn install

何をしているか見ていきます

runs-on

使用するマシンの種類を指定

steps.uses

GithubActionsWorkFlowにあるパッケージを利用する

• actions/checkout@v3
  対象ブランチにcheckoutする

• actions/setup-node@v3
  node環境のセットアップ（nodeとnpmコマンドがインストールされる）
  バージョンはltsを指定するとよい

• actions/cache@v3
  依存関係や再利用されるファイルに対するキャッシュを作成して利用できるようになる
  GithubActionは従量課金のため、時間を短くする必要があるので、キャッシュ等を利用する

steps.run

• name
  GithubActionsの実行ログで表示されるので指定しとくと見やすいが、なくてもいい
• if
  条件を指定、条件に合う場合のみrunを実行
• run
  実行コマンド

以降のjob

jobごとにまっさらな環境で実行することになるため、実際にコマンドを実行する前にセットアップを行う必要がある
node_modulesのインストールはsetupでインストールしたものを使えるのでneedsでsetupが完了するのを待てば、キャッシュがあるためそれぞれのjobでyarn installは実際には行われず時間を短縮できる

それぞれのjob名:
    runs-on: ubuntu-latest
    needs: setup
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install Yarn
        run: npm install -g yarn
      - uses: actions/cache@v3
        id: node_modules_cache_id
        env:
          cache-name: cache-node-modules
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
      - run: echo '${{ toJSON(steps.node_modules_cache_id.outputs) }}'
      - if: ${{ steps.node_modules_cache_id.outputs.cache-hit != 'true' }}
        run: yarn install
	# それぞれのコマンド実行
      - name: Run TypeCheck
        run: yarn typecheck

test は lint（style/typescript）、typecheckをneedsで待つ

    needs: [style, typescript, typecheck]

build は testを待つ

    needs: test

ここまでを踏まえて作成

name: Auto Check and Build
on: pull_request
jobs:
  setup:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 18
      - name: Install Yarn
        run: npm install -g yarn
      - uses: actions/cache@v3
        id: node_modules_cache_id
        env:
          cache-name: cache-node-modules
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
      - run: echo '${{ toJSON(steps.node_modules_cache_id.outputs) }}'
      - if: ${{ steps.node_modules_cache_id.outputs.cache-hit != 'true' }}
        run: yarn install
  typecheck:
    runs-on: ubuntu-latest
    needs: setup
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install Yarn
        run: npm install -g yarn
      - uses: actions/cache@v3
        id: node_modules_cache_id
        env:
          cache-name: cache-node-modules
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
      - run: echo '${{ toJSON(steps.node_modules_cache_id.outputs) }}'
      - if: ${{ steps.node_modules_cache_id.outputs.cache-hit != 'true' }}
        run: yarn install
      - name: Run typecheck
        run: yarn typecheck
  lint:
    runs-on: ubuntu-latest
    needs: setup
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install Yarn
        run: npm install -g yarn
      - uses: actions/cache@v3
        id: node_modules_cache_id
        env:
          cache-name: cache-node-modules
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
      - run: echo '${{ toJSON(steps.node_modules_cache_id.outputs) }}'
      - if: ${{ steps.node_modules_cache_id.outputs.cache-hit != 'true' }}
        run: yarn install
      - name: Run lint
        run: yarn lint
  test:
    runs-on: ubuntu-latest
    needs: [ typecheck, lint-next, lint-style ]
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install Yarn
        run: npm install -g yarn
      - uses: actions/cache@v3
        id: node_modules_cache_id
        env:
          cache-name: cache-node-modules
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
      - run: echo '${{ toJSON(steps.node_modules_cache_id.outputs) }}'
      - if: ${{ steps.node_modules_cache_id.outputs.cache-hit != 'true' }}
        run: yarn install
      - name: Run test
        run: yarn test:ci
  build:
    runs-on: ubuntu-latest
    needs: test
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install Yarn
        run: npm install -g yarn
      - uses: actions/cache@v3
        id: node_modules_cache_id
        env:
          cache-name: cache-node-modules
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
      - run: echo '${{ toJSON(steps.node_modules_cache_id.outputs) }}'
      - if: ${{ steps.node_modules_cache_id.outputs.cache-hit != 'true' }}
        run: yarn install
      - name: Run build
        run: yarn build

testの注意点

CI 環境で実行されることを考慮したスクリプトを実行しないと、一生テストが終わらないことになります
今回はjestなので、--ciオプションを使用

"test:ci": "jest --ci"