EY-Office ブログ

前回のブログに書いたように、私もやっとGitHub Actionsのような現代的なCIを使えるようになりました。
人は武器を手にすると使いたくなるものです、前々から自動化したかった「作りながら学ぶReact入門」サポートページのインストール手順のCIを書きました。

下の画像のように、CIのステータス表示をサポートページに追加しました（どや顔）。

なぜサポートページにCIが必要なのか

作りながら学ぶReact入門は3年前に出版された本なので、create-react-appのようなお手軽開発ツールは無かったのです。開発環境はwebpack, bable, eslint… をインストールし設定ファイルをサポートページからコピーして作っています。

ReactやVueを使われている方は経験されていると思いますが、webpack, bable, eslint等は頻繁にバージョンアップされる良いソフトです。しかし非互換なバージョンアップもたまに行われます！
そして インストールできません！ というイシューがやって来ます、申し訳ない事です。

そこで、CIをときどき行い現在のインストール手順（インストールするnpm、設定ファイル）が正しいのかを自動化したいなと思っていました。

ところで、その本売れてるの？

ありがい事に今でも少しですが売れているのです、以下は作りながら学ぶReact入門のAmazonでのランキングです。ランキングが激しく上がり下がりしてますが、1冊でも売れると上がり、売れない時は下がっているのだと思います。

開発環境だけで無く内容は古くなっている部分も多いですが、JSX、State、Propsなどの基本的な部分は、今でも使える部分も多いので、買って頂いた方のためにサポートページは継続的にサポートしていきたいと思います。

CIのコード

CIで行っている内容は、

1. サポートページにあるプロジェクトをチェックアウト
2. packege.json, package-lock.jsonを削除
3. packege.jsonをリセット
4. npmをインストール（2,3,4により、最新の開発用npmがインストールされます）
5. webpackを起動し、React等をコンパイルしデプロイ用ファイルを作成

です。アプリが正しい画面を表示しているかは確認していませんがwebpackが正常に動作するれば、ほぼ問題ないので今回はこのレベルで終わらせています。

• .github/workflows/main.yml

name: React install

on:
  schedule:
    - cron: '8 1 * * 1'
  workflow_dispatch:
    inputs:

jobs:
  windows:
    name: Install on Windows
    runs-on: windows-latest
    defaults:
      run:
        shell: cmd
        working-directory: .\projects\hello_react
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - name: Reset package.json
        run: |
          del /q package-lock.json package.json
          npm init -y
      - run: npm install react react-dom
      - run: npm install webpack webpack-cli webpack-dev-server --save-dev
      - run: npm install @babel/core @babel/preset-env @babel/preset-react @babel/cli --save-dev
      - run: npm install eslint babel-eslint eslint-loader eslint-plugin-react --save-dev
      - run: npm install css-loader style-loader babel-loader --save-dev
      - name: Run webpack
        run: npx webpack -d

  mac:
    name: Install on Mac
    runs-on: macos-latest
    defaults:
      run:
        shell: bash
        working-directory: ./projects/hello_react
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - name: Reset package.json
        run: |
          rm package-lock.json package.json
          npm init -y
      - run: npm install react react-dom
      - run: npm install webpack webpack-cli webpack-dev-server --save-dev
      - run: npm install @babel/core @babel/preset-env @babel/preset-react @babel/cli --save-dev
      - run: npm install eslint babel-eslint eslint-loader eslint-plugin-react --save-dev
      - run: npm install css-loader style-loader babel-loader --save-dev
      - name: Run webpack
        run: npx webpack -d

感想

• ワークフローファイルは慣れると簡単（とはいえ、ちょとしたミスでなんども試行錯誤しています）
• GitHub ActionsはWindowsとMac両方で実行できるのが素晴らしい！
• - run: npm install が並んでいる部分は、もう少しスマートに書けるのですが、Windowsで動作しなかったのでこのうようにしました。バグなのかcmdの制限か？
• それほど頻繁に確認する必要はないので週1回の実行にしました

今回上手くいったので、他の作業等もGitHub Actions化しようかと思っています・・・