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

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

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

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

https://github.com/codeforjapan/JibungotoPlanet/issues/26

https://github.com/codeforjapan/JibungotoPlanet/pull/31

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

### 何をやらなかったか
- 静的コード解析（ESLint や Prettier）の設定
- テストコードの開発
- ビルド時の環境変数の準備
- デプロイ環境の準備

# 設計ドキュメント
## 考え方
- CI はソースコードの①静的コード解析→②テストを担う
- CD は③ビルド→④デプロイを担う

## CI 環境（継続的インテグレーション）
タスクランナー **"husky"** を用いて一連のタスク（①静的コード解析→②テスト）を動かす。

https://www.npmjs.com/package/husky

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

### husky の準備

```bash
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` は以下のようになります。

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

```



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

`.husky/pre-commit`

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

yarn lint --fix
```

#### 実行結果

```bash
$ 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`

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

yarn test
```

#### 実行結果

```bash
$ 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"** を用いて一連のタスク（③ビルド→④デプロイ）を動かす

https://github.co.jp/features/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'
```


#### 実行結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/ec2524f7-44ae-a244-9521-9bbdb028597a.png)


以上です。