GitHub Actions でFitbit アプリケーションの構文チェックとビルドチェックを行う

December 15, 2019

概要

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 が実行されます。

01

ステータスバッジの表示

Configuring a workflow を参考に、GitHub Actions のステータスバッジを表示します。

02

バッジ表示は、ワークフロー名を使う方法とワークフローファイルを指定する方法の2つがあります。 Markdown ファイルに表示する場合、次の内容を追記します。

  • ワークフロー名を使う方法

    ![](https://github.com/<OWNER>/<REPOSITORY>/workflows/<WORKFLOW_NAME>/badge.svg)

    ワークフロー名は URL エンコードが必要です。

  • ワークフローファイルを指定する方法

![](https://github.com/<OWNER>/<REPOSITORY>/workflows/.github/workflows/<WORKFLOW_FILE_NAME>.yml/badge.svg)