Angular で作っているアプリの CI を CircleCI から GitHub Actions に移行したのでそのメモ。
CircleCI でやっていたこと
- npm パッケージのインストール
- インストール後の node_moduels をキャッシュ
- build
- unit test
- テスト結果は Artifacts に保存
GitHub Actions の導入
事前準備
- リポジトリの Actions タブから新規でセットアップする
Get started with GitHub Actions - 選択するのは Node.js
- Set up this workflow を押す
.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 に保存
- cache には actions/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
- unit test の code coverage を Artifact に保存
- Artifact の保存には actions/upload-artifact を使う
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 みたいにブラウザで見れないのが難点…
