とんかつ時々あんどーなつ

〜たとえ低空でも飛行していられるように〜

CircleCI から GitHub Actions への移行

Angular で作っているアプリの CI を CircleCI から GitHub Actions に移行したのでそのメモ。

CircleCI でやっていたこと

  • npm パッケージのインストール
    • インストール後の node_moduels をキャッシュ
  • build
  • unit test
    • テスト結果は Artifacts に保存

GitHub Actions の導入

事前準備

  • リポジトリの Actions タブから新規でセットアップする
    Get started with GitHub Actions
    Get started with GitHub Actions
  • 選択するのは Node.js
    • Set up this workflow を押す

Node.js
Node.js

  • .github/workflows/nodejs.yml の Edit ページが出るのでファイル名だけ .github/workflows/ci.yml に変えてコミットする
name: Node CI
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [8.x, 10.x, 12.x]
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: npm install, build, and test
        run: |
          npm ci
          npm run build --if-present
          npm test
        env:
          CI: true

今回やった設定

  • node-version は 12.x 系だけでいいので node-version: [12.x] に変更
  • パッケージマネージャーを npm から Yarn に変更
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
-      - name: npm install, build, and test
+      - name: yarn install, build, and test
         run: |
-          npm ci
-          npm run build --if-present
-          npm test
+          yarn
+          yarn build
+          yarn test
         env:
           CI: true
  • node_modules/ を cache に保存
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
+      - name: Cache node modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: ${{ runner.OS }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.OS }}-yarn-
       - name: yarn install, build, and test
         run: |
           yarn
           yarn test:ci
         env:
           CI: true
+      - name: Archive code coverage results
+        uses: actions/upload-artifact@v1
+        with:
+          name: code-coverage-report
+          path: coverage/Portfolio

感想

  • 設定は簡単でわかりやすい
  • おおよそのことは CircleCI と同じことができる
  • Artifact の upload は見れるが CircleCI みたいにブラウザで見れないのが難点…