モノレポ構成のRuby on Rails / Next.jsの雛形

Docker環境で下記の構成による開発環境をモノレポ構成で構築してみました。

※development環境を想定しており、本番環境での運用は想定していません。

構成

フロントエンド

• Next.js 14.2.18
• Node.js 23.3.0

バックエンド

• Ruby 3.3
• Rails 8.0.0

※Webサーバー(Nginxなど)は今回実装していません。

データベース

• MySQL8.4

またサンプルとしてgithubに本記事の完成形をアップしています。

https://github.com/a-itabashi/rails_next_monorepo

1, 各種ファイルを用意

root/
├── backend/           # Railsアプリケーション（APIサーバー）
│   ├── config/
│   │   ├── database.yml
│   ├── Dockerfile
│   ├── Gemfile
│   ├── Gemfile.lock
│   └── entrypoint.sh
├── frontend/          # Next.jsアプリケーション
│   ├── Dockerfile
├── docker-compose.yml 
├── .gitignore       
├── README.md          
└── その他設定ファイル

services:
  db:
    image: mysql:8.4
    # Credentialで管理すべきだが、今回はべタ書きで対応
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: rails_app_development
      MYSQL_USER: user
      MYSQL_PASSWORD: password
    ports:
      - "3307:3306"
    volumes:
      - mysql_data:/var/lib/mysql
  backend:
    build:
      context: ./backend
    command: bash -c "bundle exec rails s -b '0.0.0.0'"
    volumes:
      - ./backend:/rails-app
    ports:
      - 3000:3000
    depends_on:
      - db
    environment:
      - DB_HOST=db
      - DB_USER=user
      - DB_PASSWORD=password
      - DB_NAME=rails_app_development
    working_dir: /rails-app
    tty: true
    stdin_open: true
  frontend:
    build:
      context: ./frontend
    command: bash -c "npm run dev"
    volumes:
      - ./frontend:/next-app
    ports:
      - "8000:3000"
    working_dir: /next-app
    tty: true
    stdin_open: true
volumes:
  mysql_data:

# ベースにするイメージを指定
FROM ruby:3.3.6

# 必要なパッケージをインストール
RUN apt-get update -qq && apt-get install -y \
    build-essential \
    libpq-dev \
    nodejs \
    default-mysql-client \
    vim \
    && rm -rf /var/lib/apt/lists/* \
    && apt-get clean 

# 作業用ディレクトリを設定して、ディレクトリ作成と設定を同時に行う
WORKDIR /rails-app

# ローカルの Gemfile と Gemfile.lock をコンテナ内にコピー
COPY Gemfile Gemfile.lock ./

# bundle install を実行
RUN bundle install

# ローカルのrails-app配下のファイルをコンテナ内にコピー
COPY . .

# ENTRYPOINT を設定し、コンテナ起動時に常に実行されるスクリプトを指定
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]

# CMD を設定し、デフォルトのサーバ起動コマンドを指定
CMD ["rails", "server", "-b", "0.0.0.0"]

source "https://rubygems.org"
gem 'rails', '~> 8.0'

#!/bin/bash
set -e

rm -f /rails-app/tmp/pids/server.pid

exec "$@"

FROM node:23.3.0
WORKDIR /next-app

ファイルを準備し、この時点で一度buildしてエラーが出ないかを確認します。

docker-compose build

2, Railsの環境構築

【Railsプロジェクトを作成】

docker-compose run --rm backend bundle exec rails new . --force --api --database=mysql --skip-action-cable --skip-sprockets --skip-turbolinks --skip-webpack-install --skip-test --skip-bundle --skip-javascript

コマンドを実行するとRailsプロジェクトが生成される。また、backendフォルダ内に.gitファイルが生成されるので削除しておく。

rm -rf backend/.git

backend/.gitginoreのファイル情報を元にルートの.gitignoreを修正

# Temporary files generated by your text editor or operating system
# belong in git's global ignore instead:
# `$XDG_CONFIG_HOME/git/ignore` or `~/.config/git/ignore`

# Ignore bundler config.
backend/.bundle

# Ignore all environment files.
backend/.env*

# Ignore all logfiles and tempfiles.
backend/log/*
backend/tmp/*
!backend/log/.keep
!backend/tmp/.keep

# Ignore pidfiles, but keep the directory.
backend/tmp/pids/*
!backend/tmp/pids/
!backend/tmp/pids/.keep

# Ignore storage (uploaded files in development and any SQLite databases).
backend/storage/*
!backend/storage/.keep
backend/tmp/storage/*
!backend/tmp/storage/
!backend/tmp/storage/.keep

# Ignore master key for decrypting credentials and more.
backend/config/master.key

database.ymlを編集し、db:createで新規作成をします。

ENV.fetchする値はdocker-compose.ymlに記載している値を参照しています。

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV.fetch("DB_USER") { 'root' } %>
  password: <%= ENV.fetch("DB_PASSWORD") { "password" } %>
  host: <%= ENV.fetch("DB_HOST") { "127.0.0.1" } %>

development:
  <<: *default
  database: rails_app_development

test:
  <<: *default
  database: rails_app_test

production:
  primary: &primary_production
    <<: *default
    database: rails_app_production
    username: rails_app
    password: <%= ENV["RAILS_APP_DATABASE_PASSWORD"] %>
  cache:
    <<: *primary_production
    database: rails_app_production_cache
    migrations_paths: db/cache_migrate
  queue:
    <<: *primary_production
    database: rails_app_production_queue
    migrations_paths: db/queue_migrate

念の為 http://localhost:3000/up(ヘルスチェック用のエンドポイント)を叩いて200がレスポンスされればOK !!!!

$ docker-compose run --rm backend bundle exec rails db:create
[+] Creating 1/0
 ✔ Container rails_next_monorepo-db-1  Created                                                                                                                                              0.0s 
[+] Running 1/1
 ✔ Container rails_next_monorepo-db-1  Started                                                                                                                                              0.1s 
Created database 'rails_app_development'
Created database 'rails_app_test

$ docker-compose up 

Rails7からrails newで新規作成した時にDockerfileが自動生成され内容が上書きされてしまうため、開発環境用に修正をします。

root/
├── backend/           
│   ├── Dockerfile # rails newで上書きされたファイル(一旦このまま残す)
│   ├── Dockerfile.dev # 開発環境用に新たに作成

# ベースにするイメージを指定
FROM ruby:3.3.6

# 必要なパッケージをインストール
RUN apt-get update -qq && apt-get install -y \
    build-essential \
    libpq-dev \
    nodejs \
    default-mysql-client \
    vim \
    && rm -rf /var/lib/apt/lists/* \
    && apt-get clean 

# 作業用ディレクトリを設定して、ディレクトリ作成と設定を同時に行う
WORKDIR /rails-app

# ローカルの Gemfile と Gemfile.lock をコンテナ内にコピー
COPY Gemfile Gemfile.lock ./

# bundle install を実行
RUN bundle install

# ローカルのrails-app配下のファイルをコンテナ内にコピー
COPY . .

# ENTRYPOINT を設定し、コンテナ起動時に常に実行されるスクリプトを指定
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]

# CMD を設定し、デフォルトのサーバ起動コマンドを指定
CMD ["rails", "server", "-b", "0.0.0.0"]

  ~~省略~~
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile.dev ## 設定を追加

3, Next.jsの環境構築

services:
  ~~省略~~
  frontend:
    build:
      context: ./frontend
    ## 一時的にコメントアウト
    ## command: bash -c "npm run dev"
    volumes:
      - ./frontend:/next-app
    ports:
      - "8000:3000"
    working_dir: /next-app
    tty: true
    stdin_open: true
 ~~省略~~

docker-compose up --build を実行したまま、新規で別ターミナルを起動させ、Next.jsを新規作成します。

docker-compose exec frontend bash
npx create-next-app@14.2.8

Next.jsを新規作成後、frontend > my-appディレクトリの my-appフォルダ配下をfrontendディレクトリ配下に移動させ、my-appフォルダを削除しNext.jsの環境構築は完了です。

4, 動作確認

docker-compose up を実行しhttp://localhost:8000にアクセスしNext.jsの初回起動時の画面が表示されればOK!!!