ハッカソンだからこそ、CI/CD 環境があると良いよね

月に一度、シビックテックの市民ボランティア活動をしています。

Code for Japan という団体が Social Hack Day という１日ハッカソンを毎月開催しています。多くのプロジェクトはオープンソースで、有志の人が不定期にコツコツと開発を進めています。

本日は開発者が開発しやすいように Next.js Web アプリの CI/CD 環境の整備を進めました。本記事は活動メンバーへの説明用の解説記事です。

何をやったか

• CI/CD 環境の設計ドキュメント整理（本記事）
• CI 環境（継続的インテグレーション）の実装
• CD 環境（継続的デリバリー）の実装

何をやらなかったか

• 静的コード解析（ESLint や Prettier）の設定
• テストコードの開発
• ビルド時の環境変数の準備
• デプロイ環境の準備

設計ドキュメント

考え方

• CI はソースコードの①静的コード解析→②テストを担う
• CD は③ビルド→④デプロイを担う

CI 環境（継続的インテグレーション）

タスクランナー "husky" を用いて一連のタスク（①静的コード解析→②テスト）を動かす。

husky は Git のコミットやプッシュ前に、ローカルPCで任意のコマンドを実行できる npm ライブラリ

husky の準備

yarn add husky --dev
npm set-script prepare "husky install"
yarn prepare
npx husky add .husky/pre-commit "yarn lint --fix"
npx husky add .husky/pre-push "yarn test"

package.json は以下のようになります。

{
  "scripts": {
    "test": "echo 'please write a test code'",
    "lint": "next lint",
    "prepare": "husky install"
  },
  "devDependencies": {
    "husky": "^8.0.1",
  }
}

①静的コード解析

Git コミット前に静的コード解析を実行

.husky/pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn lint --fix

実行結果

$ git commit

yarn run v1.22.17
$ next lint --fix
✔ No ESLint warnings or errors
Done in 2.53s.

....
...
..

[main b516a54] add CI/CD環境 , husky, GitHub Actions
 5 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 .github/workflows/main.yml
 create mode 100644 .husky/pre-commit
 create mode 100644 .husky/pre-push

②テスト

Git プッシュ前にテストを実行

.husky/pre-push

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn test

実行結果

$ git push

yarn run v1.22.17
$ echo 'please write a test code'
please write a test code
Done in 0.08s.

....
...
..

To github.com:t-kurasawa/JibungotoPlanet.git
   ba9858d..b516a54  main -> main

CD 環境（継続的デプロイ）

ワークフローツール "GitHub Actions" を用いて一連のタスク（③ビルド→④デプロイ）を動かす

GitHub Actions はプッシュやプルリクエストを契機に GitHub 上で任意のコマンドを実行できる GitHub の機能。

③ビルド→④デプロイ

• main branches の push, pull_request をトリガーにジョブ実行
• Build app の steps でビルド
• Deploy to production server の steps でデプロイ

※ jobs はパラレルに実行。steps は順番に実行となります。

.github/workflows/main.yml

# This is a basic workflow to help you get started with Actions

name: CD

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the "main" branch
  push:
    branches: ['main']
  pull_request:
    branches: ['main']

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build_and_deployment"
  build_and_deployment:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v3

      - name: Build app
        run: |
          yarn install --immutable --immutable-cache --check-cache
          yarn build

      - name: Deploy app to production server
        run: |
          echo 'please create a production server'

実行結果

以上です。