GitHub ActionsでFitbitアプリケーションの構文チェックとビルドチェックを行う
Blog
GitHub Actionsを使って、Fibitアプリケーションの構文チェック(ESLint)とビルドチェックを行います。
動作を確認した環境
- ESLint v6.7.2
- @Fitbit/sdk-cli v1.7.1
前提として、ESLintの実行に必要なライブラリのインストール、および設定ファイルは作成済みとします。
GitHub Actionsで動かすnpm-scriptを作成する
package.json
に次のnpm scriptを追記します。
...,
"scripts": {
"build": "fitbit-build",
"lint": "eslint --max-warnings 0 **/*.ts"
},
...
warningもエラーとして扱いたいので、オプションで--max-warnings 0
を指定します。
GitHub Actionsの設定ファイルの作成
「.github/workflows」直下に、次の内容でYAMLファイルを作成します。ここでは「build.yml」としています。
このワークフローは、actions/setup-nodeを利用しています。 内容はactions/starter-workflowsを参考にし、さきほど定義したnpm-scriptのコマンドを指定します。
name: fitbit-app-build
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: Set Node.js 12.x
uses: actions/setup-node@master
with:
node-version: 12.x
- name: npm install, build, and lint
run: |
npm ci
npm run lint
npm run build
env:
CI: true
npm-scriptsを追記したpackage.json
とGitHub Actionsの設定ファイルをGitHubにpushします。 これで、リモートにファイルをpushするとCIが実行されます。
ステータスバッジの表示
Configuring a workflowを参考に、GitHub Actionsのステータスバッジを表示します。
バッジ表示は、ワークフロー名を使う方法とワークフローファイルを指定する方法の2つがあります。 Markdownファイルに表示する場合、次の内容を追記します。
ワークフロー名を使う方法
![](/img/assets/blog/https://github.com/<OWNER>/<REPOSITORY>/workflows/<WORKFLOW_NAME>/badge.svg)
ワークフロー名はURLエンコードが必要です。
ワークフローファイルを指定する方法
![](/img/assets/blog/https://github.com/<OWNER>/<REPOSITORY>/workflows/.github/workflows/<WORKFLOW_FILE_NAME>.yml/badge.svg)