🔄
【Next.js】Github ActionsでCIを構築する
概要
- 最初の環境構築時に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
- 例)
- nameの表記が無い場合は絶対パスになります。
トリガーになるGithubイベント
on:
pull_request:
types: [opened, reopened, synchronize]
workflow_dispatch:
-
このCIが実行されるタイミングを指定できます。
-
opened
: プルリクエストが新しく開かれたときにワークフローをトリガーします。 -
reopened
: 一度クローズされたプルリクエストが再開されたときにワークフローをトリガーします。 -
synchronize
: プルリクエストに対して新しいコミットがプッシュされたとき(プルリクエストが更新されたとき)にワークフローをトリガーします。
-
-
workflow_dispatchを記述しておくと、手動でブランチを選択して実行することが可能です。
ジョブ定義
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
-
以下の公式ドキュメントを参考に定義しています。
-
pnpmを使っている場合の例はこちら
-
cache
アクションを使用して依存関係をキャッシュおよび復元できます。
参考文献
【初心者向け】【入門】GitHub Actionsの書き方についてデバッグ設定、runs-onやcheckoutなどの仕組みや構造も含めて徹底解説 - Qiita
TypeScript(Next.js)のCIをGitHub Actionsで構築してみる! - Qiita
workflow_dispatch の使い方、使い所 - Qiita
Discussion