💡
Next.js製のAPPにGitHub Actionsを使用してCIの仕組みを構築してみた
はじめに
こんにちは！ご訪問いただきありがとうございます！
本記事はNext.js製のアプリケーションに対するGitHub Actionsの導入から、簡易的なCIの仕組みの構築までを紹介する記事です。
皆さんの開発スピードををより加速させるきっかけになれば幸いです。
CI(Continuous Integration)とは
- CI(Continuous Integration)とは、継続的インテグレーションのこと。
- 解析・テスト・ビルドなどの作業を自動化し、継続的にコードを統合（Integration）する仕組み。
GitHub Actionsとは
- GitHubが提供しているアプリケーション開発における様々な作業を自動化することができるサービス。
GitHub Actionsで実現できること
- リポジトリに対する操作をトリガーとして、様々な作業を自動化することができる。
GitHub Actionsの代表的なトリガー
- 対象のブランチへのプッシュ
- 対象のブランチへのプルリクエスト
- 対象のディレクトリ内の更新
- リポジトリ内のissueの作成・更新
- 事前に設定した時間
GitHub Actionsで自動化できる作業の一例
- ユニットテスト・統合テスト・E2Eテスト
- ビルドプロセス
- パフォーマンスチェック
- ESLintなどを使用した静的解析
- Prettierなどを使用したコードのフォーマット
- StoryBookのデプロイ
GitHub Actionsの導入の流れ
-
.githubディレクトリを作成 -
.githubディレクトリ内にworkflowsディレクトリを作成 -
workflowsディレクトリ内にYAMLファイルを作成 - GitHub上のリポジトリにプッシュ
- 以上
YAMLファイルの一例
.github/workflows/nextjs-ci.yaml
# 任意のワークフローの名前を定義
name: nextjs-ci
#どのGitHubイベントに対して実行されるかを定義
on:
# メインブランチにpushがあったときにワークフローを実行
push:
branches: [ main ]
# メインブランチに対するプルリクエストが作成されたときにワークフローを実行
pull_request:
branches: [ main ]
# このワークフローで実行されるジョブを定義
jobs:
# ジョブの名前を定義
nextjs-ci:
# このジョブを実行する環境（GitHub Actionsランナー）を指定
# 今回はubuntuを指定
runs-on: ubuntu-latest
strategy:
matrix:
# 使用するNode.jsのバージョンを定義
node-version: [18.x]
# 自動化したい作業を定義
steps:
# 実行環境にソースコードを取り込む
- uses: actions/checkout@v3
# 実行環境に対してNode.jsのセットアップをする
# 作業に任意の名前を定義
- name: Use Node.js ${{ matrix.node-version }}
# Node.jsのセットアップに必要な設定
uses: actions/setup-node@v3
with:
# Node.jsのバージョンを指定
node-version: ${{ matrix.node-version }}
# yarnのキャッシュを使用する設定
cache: 'yarn'
# 作業に任意の名前を定義
- name: Install dependencies
# プロジェクトの依存関係をインストール
run: yarn install
# 作業に任意の名前を定義
- name: Format code
# Prettierでフォーマット
run: yarn prettier
# 作業に任意の名前を定義
- name: Lint code
# ESLintで静的解析の実行
run: yarn lint
終わりに
今回はNext.js製のアプリケーションに対するGitHub Actionsの導入から、簡易的なCIの仕組みの構築までを紹介しました。
GitHub Actionsを使用することで開発フローを自動化し、プロジェクトの品質と効率を向上させることができます。本記事の内容が皆さんの開発スピードををより加速させるヒントとなり、きっかけになれば幸いです。
ここまでご覧いただき、ありがとうございました。
Discussion