フロントサイド(React,Next)のGithubActionsのCI構築 - 駆け出しエンジニアの気ままブログ

今回の概要

フロントサイドのlintチェックやformatを忘れてしまい、gitへpushしてしまうことが多々あります…

コードのlintチェックを行わずにマージしてしまうことは、様々なプロジェクトの中のルールに反してしまいます。

今回は、フロントサイド用のlintチェックをGitHub Actionsをつかって、pushするたびに、動くワークフローを作成しました。

使用技術

Next.js(React.js)
Javascript

GitHub Actionsの勉強

参考はこちらGitHub Actionsのドキュメント

できることは、ビルド・テスト・デプロイ等の自動化。

設定すること
- 名前の設定(name)
- 実行するタイミングの指定(on)
- 実行する中身の設定(jobs)

実際に書いてみる

名前とタイミングの設定

名前は何でも良い

name: Nextjs_ci

今回は、こんな形にしてみた(ネーミングセンスが全くありません…　リーダブルコード読みます!)

タイミングの設定

on: 
  push:
    branches:
      - "**"

今回は上記の様にpushするタイミングを設定した。

詳しくは、こちらを参考にしてほしい(GitHub Actions onのドキュメント)https://docs.github.com/ja/actions/using-workflows/workflow-syntax-for-github-actions#on

こちらを見ると、イベントの指定もできるみたいです。pushだけでなく、fork,pull_requestなどの指定も可能

また、今回はbranches:を全て指定しているが、こちらも指定できる。

これを指定しないと、mainやdevelop、releaseのようなブランチにマージするときにもワークフローが動く。実行対象のファイルに対して、2回以上は実行されます

2回以上は実行されるというのは、

ローカル環境(PC)からプッシュして、プルリクを作成するときに実行。
- feat/create_topのようなブランチを作成。ローカルからGitHubへプッシュするタイミングでワークフローが動く
release/top_pageブランチにマージするときに実行。
- feat/create_topをrelease/top_pageにマージするタイミングでワークフローが動く
デプロイ等をするためにmainの集約するタイミングで実行される

こんな感じとなるので、実行するタイミングは指定したほうが無駄なワークフローを防げるかもしれません。

ジョブの設定

こちらは意外とつまりました…

まずは、node の設定ですが、

Github Actionsを作成するときに参考が出てくるのでNode.jsを指定すると、下記のようなymlがあります

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: Node.js CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x, 16.x, 18.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build --if-present
    - run: npm test

こちらを変更していくだけです。

やること
- node-versionを設定
- npmではなく、自分が使っているパッケージを指定。(今回はyarn)

完成形

今回は、yarn lintとyarn formatを設定したかったので、下記のように書いてみました。

name: Nextjs_ci

on:
  push:
    branches:
      - "**"

jobs:
  Nextjs_ci:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [16.x]
    
    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'yarn'
      - name: Install dependencies
        run: yarn install
      - name: format code
        run: yarn format
      - name: lint code
        run: yarn lint

注意点

駆け出しエンジニアです。日々の業務や学習から、気になったことをアウトプットしています。

まだ、理解できていない点も多く、間違えている点が多々あるかと思います。

その時は、ご指摘いただけると助かります。よろしくお願いします。