【Ruby on Rails+Next.js】DockerでフロントエンドをNext.jsにしてバックエンドをRuby on Railsで環境構築をする

動画で解説を見る

1 開発環境
2 DockerでフロントエンドをNext.jsにしてバックエンドをRuby on Railsで環境構築をする手順
3 動作テスト
4 まとめ

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
Docker Engine:v23.0.5

DockerでフロントエンドをNext.jsにしてバックエンドをRuby on Railsで環境構築をする手順

DockerでフロントエンドをNext.jsにしてバックエンドをRuby on Railsで環境構築をする手順について解説していきます。

ディレクトリ構成

今回のディレクトリ構成は下記を目指していきます。

project-root/
├── docker/
│   ├── frontend/       # Next.js用Dockerfile
│   ├── backend/        # Ruby on Rails用Dockerfile
│   ├── database/       # MySQLコンテナ(Dockerfile)
│   └── nginx/          # Nginxコンテナ(Dockerfile + 設定ファイル)
├── frontend/           # Next.jsプロジェクト
├── backend/            # Ruby on Railsプロジェクト
└── docker-compose.yml

project-root/

├── docker/

│ ├── frontend/ # Next.js用Dockerfile

│ ├── backend/ # Ruby on Rails用Dockerfile

│ ├── database/ # MySQLコンテナ(Dockerfile)

│ └── nginx/ # Nginxコンテナ(Dockerfile + 設定ファイル)

├── frontend/ # Next.jsプロジェクト

├── backend/ # Ruby on Railsプロジェクト

└── docker-compose.yml

最初に必要なディレクトリを作成しておいてください。

docker-compose.ymlを作成

まずはdocker-compose.ymlを作成していきます。

ルートディレクトリの直下にdocker-compose.ymlを作成し、以下のようにしてください。

version: '3.8'

services:
  frontend:
    build:
      context: .
      dockerfile: docker/frontend/Dockerfile
    container_name: next_frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/var/www/html
    depends_on:
      - nginx
    networks:
      - app-network

  backend:
    build:
      context: .
      dockerfile: docker/backend/Dockerfile
    container_name: rails_backend
    volumes:
      - ./backend:/var/www/html
    ports:
      - "3001:3000"
    depends_on:
      - db
    networks:
      - app-network

  nginx:
    build:
      context: .
      dockerfile: docker/nginx/Dockerfile
    container_name: nginx_proxy
    ports:
      - "80:80"
    volumes:
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./backend:/var/www/html
    depends_on:
      - backend
    networks:
      - app-network

  db:
    build:
      context: .
      dockerfile: docker/database/Dockerfile
    container_name: mysql_db
    environment:
      MYSQL_DATABASE: app_db
      MYSQL_ROOT_PASSWORD: root
      MYSQL_USER: user
      MYSQL_PASSWORD: password
    ports:
      - "3306:3306"
    volumes:
      - db_data:/var/lib/mysql
    networks:
      - app-network

volumes:
  db_data:

networks:
  app-network:
    driver: bridge

version: '3.8'

services:

frontend:

build:

context: .

dockerfile: docker/frontend/Dockerfile

container_name: next_frontend

ports:

- "3000:3000"

volumes:

- ./frontend:/var/www/html

depends_on:

- nginx

networks:

- app-network

backend:

build:

context: .

dockerfile: docker/backend/Dockerfile

container_name: rails_backend

volumes:

- ./backend:/var/www/html

ports:

- "3001:3000"

depends_on:

- db

networks:

- app-network

nginx:

build:

context: .

dockerfile: docker/nginx/Dockerfile

container_name: nginx_proxy

ports:

- "80:80"

volumes:

- ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf

- ./backend:/var/www/html

depends_on:

- backend

networks:

- app-network

db:

build:

context: .

dockerfile: docker/database/Dockerfile

container_name: mysql_db

environment:

MYSQL_DATABASE: app_db

MYSQL_ROOT_PASSWORD: root

MYSQL_USER: user

MYSQL_PASSWORD: password

ports:

- "3306:3306"

volumes:

- db_data:/var/lib/mysql

networks:

- app-network

volumes:

db_data:

networks:

app-network:

driver: bridge

Rubyコンテナを作成

次にRubyコンテナを作成していきます。

docker/backend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。

FROM ruby:3.2

WORKDIR /var/www/html

COPY ./backend /var/www/html/

RUN gem install bundler && bundle install

FROM ruby:3.2

WORKDIR /var/www/html

COPY ./backend /var/www/html/

RUN gem install bundler && bundle install

backend/ディレクトリの直下にGemfileを作成し、以下のようにしてください。

source 'https://rubygems.org'

gem 'rails'

source 'https://rubygems.org'

gem 'rails'

backend/ディレクトリの直下にGemfile.lockを作成してください。

Gemfile.lockの中身は空で問題ありません。

Nodeコンテナを作成

次にNodeコンテナを作成していきます。

docker/frontend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。

FROM node:lts-alpine3.21

WORKDIR /var/www/html

COPY ./frontend .

FROM node:lts-alpine3.21

WORKDIR /var/www/html

COPY ./frontend .

MySQLコンテナを作成

次にMySQLコンテナを作成していきます。

docker/database/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。

FROM mysql:8.0

1	FROM mysql:8.0

Nginxコンテナを作成

次にNginxコンテナを作成していきます。

docker/nginx/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。

FROM nginx:alpine
COPY ./docker/nginx/default.conf /etc/nginx/conf.d/default.conf

1 2	FROM nginx:alpine COPY ./docker/nginx/default.conf /etc/nginx/conf.d/default.conf

docker/nginx/ディレクトリの直下にdefault.confを作成し、以下のようにしてください。

server {
    listen 80;
    server_name localhost;

    # --------------------------------------------------
    # Ruby on Rails APIへのルーティング（例: http://localhost/api/test）
    # --------------------------------------------------
    location /api/ {
        proxy_pass http://backend:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # --------------------------------------------------
    # Next.js へのプロキシ（例: http://localhost/）
    # --------------------------------------------------
    location / {
        proxy_pass http://frontend:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

server {

listen 80;

server_name localhost;

# --------------------------------------------------

# Ruby on Rails APIへのルーティング（例: http://localhost/api/test）

# --------------------------------------------------

location /api/ {

proxy_pass http://backend:3000;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

}

# --------------------------------------------------

# Next.js へのプロキシ（例: http://localhost/）

# --------------------------------------------------

location / {

proxy_pass http://frontend:3000;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

}

Next.jsプロジェクトとRuby on Railsプロジェクトの作成

次にNext.jsプロジェクトとRuby on Railsプロジェクトの作成をしていきます。

まずは以下のコマンドでプロジェクトディレクトリに移動します。

cd project-root

1	cd project-root

以下のコマンドでコンテナをビルドします。

docker-compose build

1	docker-compose build

以下のコマンドでNext.jsプロジェクトを作成します。

docker-compose run --rm frontend sh -c 'npx create-next-app .'

1	docker-compose run --rm frontend sh -c 'npx create-next-app .'

以下のコマンドでRuby on Railsプロジェクトを作成します。

docker-compose run --rm backend rails new . --force --database=mysql

1	docker-compose run --rm backend rails new . --force --database=mysql

docker-compose.ymlを修正

次にdocker-compose.ymlを修正していきます。

ルートディレクトリの直下にdocker-compose.ymlを以下のように修正してください。

version: '3.8'

services:
  frontend:
    build:
      context: .
      dockerfile: docker/frontend/Dockerfile
    container_name: next_frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/var/www/html
    command: npm run dev
    depends_on:
      - nginx
    networks:
      - app-network

  backend:
    build:
      context: .
      dockerfile: docker/backend/Dockerfile
    container_name: rails_backend
    volumes:
      - ./backend:/var/www/html
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -b '0.0.0.0'"
    ports:
      - "3001:3000"
    depends_on:
      - db
    networks:
      - app-network

  nginx:
    build:
      context: .
      dockerfile: docker/nginx/Dockerfile
    container_name: nginx_proxy
    ports:
      - "80:80"
    volumes:
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./backend:/var/www/html
    depends_on:
      - backend
    networks:
      - app-network

  db:
    build:
      context: .
      dockerfile: docker/database/Dockerfile
    container_name: mysql_db
    environment:
      MYSQL_DATABASE: app_db
      MYSQL_ROOT_PASSWORD: root
      MYSQL_USER: user
      MYSQL_PASSWORD: password
    ports:
      - "3306:3306"
    volumes:
      - db_data:/var/lib/mysql
    networks:
      - app-network

volumes:
  db_data:

networks:
  app-network:
    driver: bridge

version: '3.8'

services:

frontend:

build:

context: .

dockerfile: docker/frontend/Dockerfile

container_name: next_frontend

ports:

- "3000:3000"

volumes:

- ./frontend:/var/www/html

command: npm run dev

depends_on:

- nginx

networks:

- app-network

backend:

build:

context: .

dockerfile: docker/backend/Dockerfile

container_name: rails_backend

volumes:

- ./backend:/var/www/html

command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -b '0.0.0.0'"

ports:

- "3001:3000"

depends_on:

- db

networks:

- app-network

nginx:

build:

context: .

dockerfile: docker/nginx/Dockerfile

container_name: nginx_proxy

ports:

- "80:80"

volumes:

- ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf

- ./backend:/var/www/html

depends_on:

- backend

networks:

- app-network

db:

build:

context: .

dockerfile: docker/database/Dockerfile

container_name: mysql_db

environment:

MYSQL_DATABASE: app_db

MYSQL_ROOT_PASSWORD: root

MYSQL_USER: user

MYSQL_PASSWORD: password

ports:

- "3306:3306"

volumes:

- db_data:/var/lib/mysql

networks:

- app-network

volumes:

db_data:

networks:

app-network:

driver: bridge

Nodeコンテナを作成

次にNodeコンテナを作成していきます。

docker/frontend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。

FROM node:lts-alpine3.21

WORKDIR /var/www/html

COPY ./frontend .

RUN npm install

FROM node:lts-alpine3.21

WORKDIR /var/www/html

COPY ./frontend .

RUN npm install

Dockerコンテナを再ビルド

以下のコマンドでDockerコンテナを再ビルドします。

docker-compose build --no-cache

1	docker-compose build --no-cache

Ruby on Railsアプリケーションのデータベース設定

次にRuby on Railsアプリケーションのデータベース設定をしていきます。

Ruby on Railsアプリケーションのdatabase.yml設定を以下のように修正します。

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: user
  password: password
  host: db

development:
  <<: *default
  database: app_db

test:
  <<: *default
  database: app_db

default: &default

adapter: mysql2

encoding: utf8mb4

pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

username: user

password: password

host: db

development:

<<: *default

database: app_db

test:

<<: *default

database: app_db

次にRuby on Railsのマイグレーションを実行していきます。

docker-compose exec backend rails db:migrate

1	docker-compose exec backend rails db:migrate

動作テスト

動作テストのためにコードを追記していきます。

まずはRuby on RailsにAPIを追加していきます。

Rails.application.routes.draw do
  get "up" => "rails/health#show", as: :rails_health_check

  namespace :api do
    get 'test', to: 'test#index'
  end
end

Rails.application.routes.draw do

get "up" => "rails/health#show", as: :rails_health_check

namespace :api do

get 'test', to: 'test#index'

end

次にコントローラーからJsonレスポンスを返すようにしていきます。

module Api
    class TestController < ApplicationController
      def index
        render json: { message: "Hello from API!" }
      end
    end
end

module Api

class TestController < ApplicationController

def index

render json: { message: "Hello from API!" }

end

次にNext.jsにページを追加していきます。

'use client';

import { useEffect, useState } from 'react';

export default function Home() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('/api/test')
      .then(res => res.json())
      .then(data => setMessage(data.message))
      .catch(err => {
        console.error('API Error:', err);
        setMessage('エラーが発生しました');
      });
  }, []);

  return (
    <main>
      <h1>Next.js + Ruby on Rails API 接続確認</h1>
      <p>{message}</p>
    </main>
  );
}

'use client';

import { useEffect, useState } from 'react';

export default function Home() {

const [message, setMessage] = useState('');

useEffect(() => {

fetch('/api/test')

.then(res => res.json())

.then(data => setMessage(data.message))

.catch(err => {

console.error('API Error:', err);

setMessage('エラーが発生しました');

});

}, []);

return (

<main>

<h1>Next.js + Ruby on Rails API 接続確認</h1>

<p>{message}</p>

</main>

);

}

次に以下のコマンドでコンテナを起動します。

docker-compose up

1	docker-compose up

ブラウザでhttp://localhost/testにアクセスし、「Hello from API!」が表示されていれば成功です。

まとめ

今回はDockerでRuby on RailsとNext.jsの環境構築をする手順について解説していきましたが、いかがだったでしょうか。

近年、フロントエンドとバックエンドを分けて運用するアプリケーションが増えてきましたが、Dockerを使えば簡単に開発環境を構築することができます。

Dockerを使った開発は必須となりつつありますので、是非、チャレンジしてみてください。