【Ruby on Rails+Next.js】DockerでフロントエンドをNext.jsにしてバックエンドをRuby on Railsで環境構築をする
開発環境
- 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で環境構築をする手順について解説していきます。
ディレクトリ構成
今回のディレクトリ構成は下記を目指していきます。
1# Directory structure 2project-root/ 3├── docker/ 4│ ├── frontend/ # Next.js用Dockerfile 5│ ├── backend/ # Ruby on Rails用Dockerfile 6│ ├── database/ # MySQLコンテナ(Dockerfile) 7│ └── nginx/ # Nginxコンテナ(Dockerfile + 設定ファイル) 8├── frontend/ # Next.jsプロジェクト 9├── backend/ # Ruby on Railsプロジェクト 10└── docker-compose.yml
最初に必要なディレクトリを作成しておいてください。
docker-compose.ymlを作成
まずはdocker-compose.ymlを作成していきます。 ルートディレクトリの直下にdocker-compose.ymlを作成し、以下のようにしてください。
1# docker-compose.yml 2version: '3.8' 3 4services: 5 frontend: 6 build: 7 context: . 8 dockerfile: docker/frontend/Dockerfile 9 container_name: next_frontend 10 ports: 11 - "3000:3000" 12 volumes: 13 - ./frontend:/var/www/html 14 depends_on: 15 - nginx 16 networks: 17 - app-network 18 19 backend: 20 build: 21 context: . 22 dockerfile: docker/backend/Dockerfile 23 container_name: rails_backend 24 volumes: 25 - ./backend:/var/www/html 26 ports: 27 - "3001:3000" 28 depends_on: 29 - db 30 networks: 31 - app-network 32 33 nginx: 34 build: 35 context: . 36 dockerfile: docker/nginx/Dockerfile 37 container_name: nginx_proxy 38 ports: 39 - "80:80" 40 volumes: 41 - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf 42 - ./backend:/var/www/html 43 depends_on: 44 - backend 45 networks: 46 - app-network 47 48 db: 49 build: 50 context: . 51 dockerfile: docker/database/Dockerfile 52 container_name: mysql_db 53 environment: 54 MYSQL_DATABASE: app_db 55 MYSQL_ROOT_PASSWORD: root 56 MYSQL_USER: user 57 MYSQL_PASSWORD: password 58 ports: 59 - "3306:3306" 60 volumes: 61 - db_data:/var/lib/mysql 62 networks: 63 - app-network 64 65volumes: 66 db_data: 67 68networks: 69 app-network: 70 driver: bridge
Rubyコンテナを作成
次にRubyコンテナを作成していきます。
docker/backend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。
1# docker/backend/Dockerfile 2FROM ruby:3.2 3 4WORKDIR /var/www/html 5 6COPY ./backend /var/www/html/ 7 8RUN gem install bundler && bundle install
backend/ディレクトリの直下にGemfileを作成し、以下のようにしてください。
1# backend/Gemfile 2source 'https://rubygems.org' 3 4gem 'rails'
backend/ディレクトリの直下にGemfile.lockを作成してください。
Gemfile.lockの中身は空で問題ありません。
Nodeコンテナを作成
次にNodeコンテナを作成していきます。
docker/frontend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。
1# docker/frontend/Dockerfile 2FROM node:lts-alpine3.21 3 4WORKDIR /var/www/html 5 6COPY ./frontend .
MySQLコンテナを作成
次にMySQLコンテナを作成していきます。
docker/database/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。
1# docker/database/Dockerfile 2FROM mysql:8.0
Nginxコンテナを作成
次にNginxコンテナを作成していきます。
docker/nginx/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。
1# docker/nginx/Dockerfile 2FROM nginx:alpine 3COPY ./docker/nginx/default.conf /etc/nginx/conf.d/default.conf
docker/nginx/ディレクトリの直下にdefault.confを作成し、以下のようにしてください。
1# docker/nginx/default.conf 2server { 3 listen 80; 4 server_name localhost; 5 6 # -------------------------------------------------- 7 # Ruby on Rails APIへのルーティング（例: http://localhost/api/test） 8 # -------------------------------------------------- 9 location /api/ { 10 proxy_pass http://backend:3000; 11 proxy_set_header Host $host; 12 proxy_set_header X-Real-IP $remote_addr; 13 } 14 15 # -------------------------------------------------- 16 # Next.js へのプロキシ（例: http://localhost/） 17 # -------------------------------------------------- 18 location / { 19 proxy_pass http://frontend:3000; 20 proxy_set_header Host $host; 21 proxy_set_header X-Real-IP $remote_addr; 22 } 23}
Next.jsプロジェクトとRuby on Railsプロジェクトの作成
次にNext.jsプロジェクトとRuby on Railsプロジェクトの作成をしていきます。 まずは以下のコマンドでプロジェクトディレクトリに移動します。
1cd project-root
以下のコマンドでコンテナをビルドします。
1docker-compose build
以下のコマンドでNext.jsプロジェクトを作成します。
1docker-compose run --rm frontend sh -c 'npx create-next-app .'
以下のコマンドでRuby on Railsプロジェクトを作成します。
1docker-compose run --rm backend rails new . --force --database=mysql
docker-compose.ymlを修正
次にdocker-compose.ymlを修正していきます。 ルートディレクトリの直下にdocker-compose.ymlを以下のように修正してください。
1# docker-compose.yml 2version: '3.8' 3 4services: 5 frontend: 6 build: 7 context: . 8 dockerfile: docker/frontend/Dockerfile 9 container_name: next_frontend 10 ports: 11 - "3000:3000" 12 volumes: 13 - ./frontend:/var/www/html 14+ command: npm run dev 15 depends_on: 16 - nginx 17 networks: 18 - app-network 19 20 backend: 21 build: 22 context: . 23 dockerfile: docker/backend/Dockerfile 24 container_name: rails_backend 25 volumes: 26 - ./backend:/var/www/html 27+ command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -b '0.0.0.0'" 28 ports: 29 - "3001:3000" 30 depends_on: 31 - db 32 networks: 33 - app-network 34 35 nginx: 36 build: 37 context: . 38 dockerfile: docker/nginx/Dockerfile 39 container_name: nginx_proxy 40 ports: 41 - "80:80" 42 volumes: 43 - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf 44 - ./backend:/var/www/html 45 depends_on: 46 - backend 47 networks: 48 - app-network 49 50 db: 51 build: 52 context: . 53 dockerfile: docker/database/Dockerfile 54 container_name: mysql_db 55 environment: 56 MYSQL_DATABASE: app_db 57 MYSQL_ROOT_PASSWORD: root 58 MYSQL_USER: user 59 MYSQL_PASSWORD: password 60 ports: 61 - "3306:3306" 62 volumes: 63 - db_data:/var/lib/mysql 64 networks: 65 - app-network 66 67volumes: 68 db_data: 69 70networks: 71 app-network: 72 driver: bridge
Nodeコンテナを作成
次にNodeコンテナを作成していきます。
docker/frontend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。
1# docker/frontend/Dockerfile 2FROM node:lts-alpine3.21 3 4WORKDIR /var/www/html 5 6COPY ./frontend . 7+RUN npm install
Dockerコンテナを再ビルド
以下のコマンドでDockerコンテナを再ビルドします。
1docker-compose build --no-cache
Ruby on Railsアプリケーションのデータベース設定
次にRuby on Railsアプリケーションのデータベース設定をしていきます。
Ruby on Railsアプリケーションのdatabase.yml設定を以下のように修正します。
1# web/config/database.yml 2default: &default 3 adapter: mysql2 4 encoding: utf8mb4 5 pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> 6 username: user 7 password: password 8 host: db 9 10development: 11 <<: *default 12 database: app_db 13 14test: 15 <<: *default 16 database: app_db
次にRuby on Railsのマイグレーションを実行していきます。
1docker-compose exec backend rails db:migrate
動作テスト
動作テストのためにコードを追記していきます。 まずはRuby on RailsにAPIを追加していきます。
1# backend/config/routes.rb 2Rails.application.routes.draw do 3 get "up" => "rails/health#show", as: :rails_health_check 4 5+ namespace :api do 6+ get 'test', to: 'test#index' 7+ end 8end
次にコントローラーからJsonレスポンスを返すようにしていきます。
1# /backend/app/controllers/api/test_controller.rb 2module Api 3 class TestController < ApplicationController 4 def index 5 render json: { message: "Hello from API!" } 6 end 7 end 8end
次にNext.jsにページを追加していきます。
1# /frontend/src/app/test/page.tsx 2'use client'; 3 4import { useEffect, useState } from 'react'; 5 6export default function Home() { 7 const [message, setMessage] = useState(''); 8 9 useEffect(() => { 10 fetch('/api/test') 11 .then(res => res.json()) 12 .then(data => setMessage(data.message)) 13 .catch(err => { 14 console.error('API Error:', err); 15 setMessage('エラーが発生しました'); 16 }); 17 }, []); 18 19 return ( 20 <main> 21 <h1>Next.js + Ruby on Rails API 接続確認</h1> 22 <p>{message}</p> 23 </main> 24 ); 25}
次に以下のコマンドでコンテナを起動します。
1docker-compose up
ブラウザでhttp://localhost/testにアクセスし、「Hello from API!」が表示されていれば成功です。
まとめ
今回はDockerでRuby on RailsとNext.jsの環境構築をする手順について解説していきましたが、いかがだったでしょうか。 近年、フロントエンドとバックエンドを分けて運用するアプリケーションが増えてきましたが、Dockerを使えば簡単に開発環境を構築することができます。 Dockerを使った開発は必須となりつつありますので、是非、チャレンジしてみてください。