Zenn
🔄

【Next.js】Github ActionsでCIを構築する

2024/02/12に公開
Next.js
GitHub Actions
tech

概要

  • 最初の環境構築時にGithub ActionsでCIを構築する際のメモになります。
  • 最低限の動作を担保できるようにシンプルな方法を採用しています。

前提条件

  • 2024/01時点の情報になります。

やりたいこと

  • PR作成時に、lintやbuildコマンドを実行して正常にできるか検証させたい

Github Actionsとは

  • 以下の記事が非常に分かりやすかったです。

【初心者向け】【入門】GitHub Actionsの書き方についてデバッグ設定、runs-onやcheckoutなどの仕組みや構造も含めて徹底解説 - Qiita

結論

  • .github/workflows/frontend-ci.ymlを作成して、以下のようにコードを記述しました。
name: Frontend CI

on:
  pull_request:
    types: [opened, reopened, synchronize]
  workflow_dispatch:

jobs:
  lint-and-build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: ["18.x"]
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
        with:
          version: 8
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: "pnpm"
      - name: Install dependencies
        run: pnpm install
      - name: Lint
        run: pnpm run lint
      - name: Build
        run: pnpm run build

ワークフローの名前

name: Frontend CI
  • ワークフローが複数ある時に、判別するための名前です。
    • nameの表記が無い場合は絶対パスになります。
      • 例).github/workflows/frontend-ci.yml

トリガーになるGithubイベント

on:
  pull_request:
    types: [opened, reopened, synchronize]
  workflow_dispatch:

  • このCIが実行されるタイミングを指定できます。

    • opened: プルリクエストが新しく開かれたときにワークフローをトリガーします。
    • reopened: 一度クローズされたプルリクエストが再開されたときにワークフローをトリガーします。
    • synchronize: プルリクエストに対して新しいコミットがプッシュされたとき（プルリクエストが更新されたとき）にワークフローをトリガーします。

  • workflow_dispatchを記述しておくと、手動でブランチを選択して実行することが可能です。

    ワークフローの手動実行 - GitHub Docs

    workflow_dispatch の使い方、使い所 - Qiita

ジョブ定義

jobs:
  # ジョブ名
  lint-and-build:
    # 実行するランナー
    runs-on: ubuntu-latest
    # マトリックス戦略を使ってNode.jsのバージョンを指定します
    strategy:
      matrix:
        node-version: [18]
    # ジョブの実行ステップ
    steps:
      # リポジトリのコードのチェックアウト
      - uses: actions/checkout@v4
      # pnpmをセットアップ
      - uses: pnpm/action-setup@v2
        with:
          version: 8
      # Node.jsのセットアップ マトリックス戦略で指定されたバージョンを使用しています
      - name: Use Node.js ${{ matrix.node-version }}
        # pnpmのキャッシュを有効にします
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: "pnpm"
      # 依存関係のインストール
      - name: Install dependencies
        run: pnpm install
      - name: Lint
        run: pnpm run lint
      - name: Build
        run: pnpm run build

参考文献

【初心者向け】【入門】GitHub Actionsの書き方についてデバッグ設定、runs-onやcheckoutなどの仕組みや構造も含めて徹底解説 - Qiita
TypeScript(Next.js)のCIをGitHub Actionsで構築してみる！ - Qiita
workflow_dispatch の使い方、使い所 - Qiita

Discussion