概要
こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、Next.js のビルドテストを Github Actions で実行させる方法を紹介します。
Github Actions 触れてみたいけど、やり方がわからない方もいると思います。今回は初心者でもできるよう解説していきますので、ぜひ最後までご付き合いください。
関連記事
はじめに
本記事では、Next.js のビルドテストを GithubActions で実行させる方法を紹介します。基本的に構築方法は、他のフレームワークや言語でも活用できますが、正常に動作しない可能性はあります。今回は構築の一例であることをご理解の上、参考にしていただけると幸いです。
実現したいこと
今回実現したいことは、Github Actions で Next.js のビルドが正常にできるかを検証するというものです。非常にシンプルなので、導入自体は初心者でも簡単にできると思います。
使用するプラグイン
action-slack-notify
Github Actions の成功可否を Slack に通知するプラグイン
実装方法
Github Actions の発火条件を設定する
今回は、Next.js のビルドテストのため、ファイルが更新されると毎回実行するようにしておきます。但し、デフォルトブランチである「development」やリリースブランチである「main」では、発火しないようにします。これは、前述のブランチは、テストが通過した後にマージするベースブランチで重複実行されてしまうためです。
上記を踏まえて、Github Actions の YAML に書き起こすと以下の通りです。
name: Build Test
on:
push:
branches-ignore:
- main
- development
Node 環境をセットアップする
発火条件を設定したので、次にジョブを設定していきます。まずは、テストを実行する Node 環境を用意する必要があるので、セットアップしていきます。
name: Build Test
on:
push:
branches-ignore:
- main
- development
+ jobs:
+ build:
+ runs-on: ubuntu-latest
+ steps:
+ - name: checkout
+ uses: actions/checkout@v3
+
+ - name: setup-node
+ uses: actions/setup-node@v3
+ with:
+ node-version: 16
+ cache: npm
パッケージをインストールする
Node 環境のセットアップが完了したら、パッケージをインストールしていきます。特別気をつけることはありませんが、ビルド時に Java や Python など Node 以外の言語が必要となるプラグインが含まれている場合、この方法では動作しません。その場合は Docker で動作するものを作成する必要があります。こちらに関しては別の記事で紹介する予定ですので、気長にお待ちいただけると幸いです。
name: Build Test
on:
push:
branches-ignore:
- main
- development
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v3
- name: setup-node
uses: actions/setup-node@v3
with:
node-version: 16
cache: npm
+ - name: npm-install
+ run: npm i
ビルドを実行する
パッケージのインストールが終わったら最後にビルドを実行します。
name: Build Test
on:
push:
branches-ignore:
- main
- development
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v3
- name: setup-node
uses: actions/setup-node@v3
with:
node-version: 16
cache: npm
- name: npm-install
run: npm i
+ - name: app-build
+ run: npm run build
実行結果を Slack に通知させる
ここに関してはやらなくてもいいですが、やっておくと Github で確認しなくてもテストの実行結果を確認できるため余力があれば対応してみてください。必要なものは Slack の WebHook URL のみです。直接書くのはセキュリティ的に良くないため、必ず Github Action のシークレットに保存しましょう。
name: Build Test
on:
push:
branches-ignore:
- main
- development
+ env:
+ SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK_URL }}
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v3
- name: setup-node
uses: actions/setup-node@v3
with:
node-version: 16
cache: npm
- name: npm-install
run: npm i
- name: app-build
run: npm run build
+ - name: slack-notification-success
+ if: ${{ success() }}
+ uses: rtCamp/action-slack-notify@v2
+ env:
+ SLACK_COLOR: good
+ SLACK_TITLE: 'Success to Build Test :rocket:'
+ SLACK_MESSAGE: ':closed_book: ${{ github.repository }}'
+ - name: slack-notification-failure
+ if: ${{ failure() }}
+ uses: rtCamp/action-slack-notify@v2
+ env:
+ SLACK_COLOR: danger
+ SLACK_TITLE: 'Failure to Build Test :boom:'
+ SLACK_MESSAGE: ':closed_book: ${{ github.repository }}'
【おまけ】キャッシュさせて高速化
上記の状態でも期待した動作はしますが、一工夫すると実行時間を大幅に短縮できます。今回のワークフローで実行時間が最もかかるのは恐らく npm-install のステップだと思います。そこで node_modules をキャッシュすることで高速化を実現させたいと思います。
name: Build Test
on:
push:
branches-ignore:
- main
- development
env:
SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK_URL }}
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v3
- name: setup-node
uses: actions/setup-node@v3
with:
node-version: 16
cache: npm
+ - name: cache-node-modules
+ uses: actions/cache@v3
+ id: node_modules_cache_id
+ env:
+ cache-name: cache-node-modules
+ with:
+ path: '**/node_modules'
+ key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
- name: npm-install
+ if: ${{ steps.node_modules_cache_id.outputs.cache-hit != 'true' }}
run: npm i
- name: app-build
run: npm run build
- name: slack-notification-success
if: ${{ success() }}
uses: rtCamp/action-slack-notify@v2
env:
SLACK_COLOR: good
SLACK_TITLE: 'Success to Build Test :rocket:'
SLACK_MESSAGE: ':closed_book: ${{ github.repository }}'
- name: slack-notification-failure
if: ${{ failure() }}
uses: rtCamp/action-slack-notify@v2
env:
SLACK_COLOR: danger
SLACK_TITLE: 'Failure to Build Test :boom:'
SLACK_MESSAGE: ':closed_book: ${{ github.repository }}'
参考記事
完成品
name: Build Test
on:
push:
branches-ignore:
- main
- development
env:
SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK_URL }}
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v3
- name: setup-node
uses: actions/setup-node@v3
with:
node-version: 16
cache: npm
- name: cache-node-modules
uses: actions/cache@v3
id: node_modules_cache_id
env:
cache-name: cache-node-modules
with:
path: '**/node_modules'
key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
- name: npm-install
if: ${{ steps.node_modules_cache_id.outputs.cache-hit != 'true' }}
run: npm i
- name: app-build
run: npm run build
- name: slack-notification-success
if: ${{ success() }}
uses: rtCamp/action-slack-notify@v2
env:
SLACK_COLOR: good
SLACK_TITLE: 'Success to Build Test :rocket:'
SLACK_MESSAGE: ':closed_book: ${{ github.repository }}'
- name: slack-notification-failure
if: ${{ failure() }}
uses: rtCamp/action-slack-notify@v2
env:
SLACK_COLOR: danger
SLACK_TITLE: 'Failure to Build Test :boom:'
SLACK_MESSAGE: ':closed_book: ${{ github.repository }}'
まとめ
今回は、Next.js のビルドテストを Github Actions で実行させる方法について紹介しました。Github Actions をあまり触れたことがない方でも苦戦せずに導入できる内容だと思いますので、ぜひお試しいただけると幸いです。これで Github Actions に興味を持たれた方は、ぜひ色々なことを CI 上で実行するチャレンジをしてみてください！
本記事を最後まで読んで頂き、ありがとうございました。いいねしていただけると記事執筆の励みになりますので、参考になったと思った方は是非よろしくお願いします！
関連記事
副業転職の Offers 開発チームがお送りするテックブログです。【エンジニア積極採用中】カジュアル面談、副業からのトライアル etc 承っております💪 jobs.overflow.co.jp
Discussion