🫶

【Rails × Next.js】Rubocop、RSpec、ESLint、PrettierのCI設定

2025/01/23に公開

バックエンドをRails、フロントエンドをNext.jsにしたアプリケーションを作ることが多く、毎回CIをGitHub Actionsでどう設定するのか思い出すのが面倒なので、ここに備忘録として記載します。

初めてCIを設定する人にとっても、この内容が参考になれば幸いです。

使用する技術スタック

  • バックエンド: Ruby / Rails
    • コード解析 / フォーマッター: Rubocop
    • テストフレームワーク: RSpec
  • フロントエンド: Next.js
    • コード解析: ESLint
    • フォーマッター: Prettier

ディレクトリ構成

your_app_name
├── backend
├── frontend
└── .github

手順

  1. Rubocop、RSpec、ESLint、Prettierの設定
  2. GitHub Actionsの設定
  3. 実行確認

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が走っているのが分かります。

  1. この設定ファイルをリポジトリにプッシュします。
  2. GitHubのリポジトリページに移動し、Actions タブを開きます。
  3. 設定したワークフローがトリガーされ、CIが実行されていることを確認できます。

エラーが発生した場合は、該当するステップのログを確認して原因を特定してください。
これで基本的なCIの設定は完了です。

Discussion