🫶
【Rails × Next.js】Rubocop、RSpec、ESLint、PrettierのCI設定
バックエンドをRails、フロントエンドをNext.jsにしたアプリケーションを作ることが多く、毎回CIをGitHub Actionsでどう設定するのか思い出すのが面倒なので、ここに備忘録として記載します。
初めてCIを設定する人にとっても、この内容が参考になれば幸いです。
使用する技術スタック
- バックエンド: Ruby / Rails
- コード解析 / フォーマッター: Rubocop
- テストフレームワーク: RSpec
- フロントエンド: Next.js
- コード解析: ESLint
- フォーマッター: Prettier
ディレクトリ構成
your_app_name
├── backend
├── frontend
└── .github
手順
- Rubocop、RSpec、ESLint、Prettierの設定
- GitHub Actionsの設定
- 実行確認
Rubocop、RSpec、ESLint、Prettierの設定
Rubocop、RSpec、ESLint、Prettierの設定については、それぞれの公式ドキュメントや関連情報を調べながら進めるのがおすすめです。
これらのツールは頻繁にバージョンアップされるため、現時点での設定方法を記載しても、後々変更される可能性があります。そのため、ここでは具体的な設定内容の記載を控えます。
GitHub Actionsの設定
以下は、GitHub Actionsの設定ファイル例です。
バックエンドとフロントエンドのCIをそれぞれ独立して動作させるように構成しています。
.github/workflows/ci-backend-frontend.yml
name: "CI: Backend (Rubocop / RSpec), Frontend (ESLint / Prettier)"
on:
push:
jobs:
backend-ci:
name: "Backend CI: Rubocop / RSpec"
runs-on: ubuntu-latest
steps:
# GitHubリポジトリのコードをチェックアウト
- uses: actions/checkout@v4
# Rubyのセットアップ
- name: Setup Ruby
uses: ruby/setup-ruby@v1
with:
ruby-version: 3.1.4 # 使用しているRubyのバージョンを明示
bundler-cache: true
# バックエンドの依存関係をインストール
- name: Install Dependencies
run: bundle install
working-directory: ./backend
# Rubocopによるコードの静的解析と自動修正の実行
- name: Run Rubocop
run: bundle exec rubocop -A
working-directory: ./backend
# RSpecによるテストの実行
- name: Run RSpec
run: bin/rspec
working-directory: ./backend
frontend-ci:
name: "Frontend CI: ESLint / Prettier"
runs-on: ubuntu-latest
steps:
# GitHubリポジトリのコードをチェックアウト
- uses: actions/checkout@v4
# Node.jsのセットアップ
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: '18' # Next.jsが要求するNode.jsバージョンを指定
# フロントエンドの依存関係をキャッシュ
- name: Cache Node Modules
uses: actions/cache@v3
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
# フロントエンドの依存関係をインストール
- name: Install Dependencies
run: npm ci --legacy-peer-deps
working-directory: ./frontend
# ESLintによるコードのリントと修正の実行
- name: Run ESLint
run: npm run lint:fix
working-directory: ./frontend
# Prettierによるコードフォーマットの実行
- name: Run Prettier
run: npm run format
working-directory: ./frontend
実行確認
これでpushをする。
GithubのActionsを見たらCIが走っているのが分かります。
- この設定ファイルをリポジトリにプッシュします。
- GitHubのリポジトリページに移動し、Actions タブを開きます。
- 設定したワークフローがトリガーされ、CIが実行されていることを確認できます。
エラーが発生した場合は、該当するステップのログを確認して原因を特定してください。
これで基本的なCIの設定は完了です。
Discussion