環境構築

【Docker】MySQL+Rails7+Next.jsの開発環境を準備する（git設定まで）

nanoha.creator@gmail.com

Rails（バックエンド）とNext.js（フロントエンド）での開発環境をDockerで準備していく手順をまとめました。

開発用の環境構築を目標とし、本番用の環境構築については、深くは触れていません。

Contents
  1. 実行環境（OSや各種バージョンなど）
  2. 手順
  3. git設定
  4. 参考サイト

実行環境（OSや各種バージョンなど）

今回、試した環境は、以下のとおりです。

OSWindows11
Docker Desktopv4.22.1
MySQL8.0
Ruby3.2.2
Rails7.1.3
Node.jsv18.17.1
Next.js14.1.0

手順

Docker Desktopがインストール済み・起動済みの状態で、以降の手順に沿って、開発環境を準備していきます。

環境構築済みのファイルは、以下で確認できます。

GitHub
GitHub - nanoha94/rails-nextjs-environment
https://github.com/nanoha94/rails-nextjs-environment/tree/main
Contribute to nanoha94/rails-nextjs-environment development by creating an account on GitHub.

フォルダ構成

以下のようなフォルダ構成で、各ファイルを準備します。

rails-nextjs-app/（作業フォルダ）
├ backend/
│  ├ Dockerfile
│  ├ entrypoint.sh
│  ├ Gemfile
│  └ Gemfile.lock
│
├ frontend/
│  └ Dockerfile
│
├ .env
└ docker-compose.yml

各種ファイルの準備

.env

docker-compose.ymlや、Railsプロジェクト作成後に生成される backend/config/database.ymlで参照する環境変数を定義しておきます。

MYSQL_ROOT_USER=root
MYSQL_ROOT_PASSWORD=password
MYSQL_DB=db_docker_rails7
MYSQL_USER=user
MYSQL_PASSWORD=password
RAILS_HOST=0.0.0.0
RAILS_PORT=3000
NEXTJS_PORT=8000

docker-compose.yml

Dockerコンテナを管理する設定を記述します。

${MYSQL_ROOT_PASSWORD}など、${}で囲まれた部分で、先ほど定義した環境変数の値を使用しています。

db、backend、frontendの３つのサービスを設定します。

version: "3"
services:
  # MySQLの設定
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD} # 環境変数（.env）から参照
      MYSQL_DATABASE: ${MYSQL_DB} # 環境変数（.env）から参照
      MYSQL_USER: ${MYSQL_USER} # 環境変数（.env）から参照
      MYSQL_PASSWORD: ${MYSQL_PASSWORD} # 環境変数（.env）から参照
      TZ: "Asia/Tokyo"
    volumes:
      # db-dataというボリュームをコンテナ内の/var/lib/mysqlにマウントする
      - db-data:/var/lib/mysql
    ports:
      - "3306:3306"

  # バックエンド（Rails）の設定
  backend:
    build:
      context: ./backend/
      dockerfile: Dockerfile
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      # カレントディレクトリの内容をコンテナ内の/appにマウントする
      - ./backend:/app
    env_file:
      - .env
    ports:
      - ${RAILS_PORT}:3000 # 環境変数（.env）から参照
    # コンテナを起動したままにする
    tty: true
    # 標準入出力とエラー出力をコンテナに結び付ける設定
    stdin_open: true

  # フロントエンド（Next.js）の設定
  frontend:
    build:
      context: ./frontend/
      dockerfile: Dockerfile
    command: "yarn dev"
    volumes:
      # ./frontend/appの内容をコンテナ内の/usr/src/appにマウントする
      - ./frontend/app:/usr/src/app
    ports:
      - ${NEXTJS_PORT}:3000 # 環境変数（.env）から参照
volumes:
  db-data:

backend/Dockerfile

Rails（バックエンド）用のDockerイメージのビルド手順を記述します。

FROM ruby:3.2.2

# 環境変数
ENV APP_HOME /app

# 作業ディレクトリ指定
WORKDIR ${APP_HOME}

# コンテナがリッスンするポートを指定
EXPOSE 3000

# ローカルのGemfileをコンテナ内にコピー
COPY Gemfile ${APP_HOME}/Gemfile
COPY Gemfile.lock ${APP_HOME}/Gemfile.lock

# パッケージリストを最新にする
RUN apt-get update

# Gemをアップデート
RUN bundle install

# コンテナ起動時に実行させるスクリプト
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]

# コンテナ実行時にRailsサーバーを起動（entrypoint.shへの引数として使用される）
CMD ["bundle", "exec", "rails", "server", "-b", "0.0.0.0"]

backend/entrypoint.sh

初回起動時のみに実行させたい内容を記述します。
server.pidファイルを消す内容を記述しています。

exec "$@"の部分で、Dockerfileで設定したCMD処理が実行されます。

#!/bin/bash
set -e
rm -f /app/tmp/pids/server.pid
exec "$@"

backend/Gemfile

RailsのGemを記述します。
バージョンを指定しておくこともできます。
今回は、最新の安定版にしたいので、バージョン指定はしません。

source 'https://rubygems.org'
gem 'rails'

backend/Gemfile.lock

空のままでOKです。
bundle installコマンドで、中身が生成されます。

Dockerfileに以下の記述があるので、空でもファイルを準備しておく必要があります。

COPY Gemfile.lock ${APP_HOME}/Gemfile.lock

frontend/Dockerfile

Next.js（フロントエンド）用のDockerイメージのビルド手順を記述します。

2024年2月現在、Next.jsの最新バージョンである14.1.0を使用するには、Nodo.jsのバージョンが18.17以上である必要があります。

https://nextjs.org/docs/getting-started/installation

FROM node:20
WORKDIR /usr/src/app

Railsプロジェクトの作成

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

docker-compose run --rm backend bundle exec rails new . -f -d mysql --api -T
  • -f：ファイルが存在する場合、上書きして作成する
  • -d mysql：データベースをMySQLに指定
  • –api：APIモード
  • -T：テストフレームワークをスキップ

開発環境用と本番環境用とでファイルを分ける

rails newでbackend/Dockerfileが上書きされます。
生成されたDockerfileの中身を見ていくと、以下の記述があり、RAILS_ENV="production"というところから、本番環境用のDockerfileであることがわかります。

ENV RAILS_ENV="production" \
    BUNDLE_DEPLOYMENT="1" \
    BUNDLE_PATH="/usr/local/bundle" \
    BUNDLE_WITHOUT="development"

開発用の環境を用意したいので、本番環境用のものとファイルを分けます。

backend/Dockerfileをコピーして、backend/Dockerfile.devとbackend/Dockerfile.prodという２つのファイルを作成します。
（backend/Dockerfileは削除してOKです）

backend/Dockerfile.devには、上書きされる前の内容を記述します。

FROM ruby:3.2.2

# 環境変数
ENV APP_HOME /app

# 作業ディレクトリ指定
WORKDIR ${APP_HOME}

# コンテナがリッスンするポートを指定
EXPOSE 3000

# ローカルのGemfileをコンテナ内にコピー
COPY Gemfile ${APP_HOME}/Gemfile
COPY Gemfile.lock ${APP_HOME}/Gemfile.lock

# パッケージリストを最新にする
RUN apt-get update

# Gemをアップデート
RUN bundle install

# コンテナ起動時に実行させるスクリプト
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]

# コンテナ実行時にRailsサーバーを起動
CMD ["bundle", "exec", "rails", "server", "-b", "0.0.0.0"]

backend/Dockerfile.prodは、backend/Dockerfileの内容そのままでOKです。
※本記事では、本番環境の構築まではやらないので、必要に応じてカスタマイズしてください。

docker-compose.ymlもdocker-compose-dev.ymlとdocker-compose-prod.ymlに分けます。
それぞれ、webサービスのbuild項目の箇所を変更します。

開発環境用：docker-compose-dev.yml

(省略)

backend:
    build:
      context: ./backend
      dockerfile: Dockerfile.dev  # ここを編集

(省略)

本番環境用：docker-compose-prod.yml
※本記事では、本番環境の構築まではやらないので、必要に応じてカスタマイズしてください。

(省略)

backend:
    build:
      context: ./backend
      dockerfile: Dockerfile.prod  # ここを編集

(省略)

環境変数も開発環境と本番環境で分けておきます。
どちらにも.envの内容をそのまま記述します。

開発環境用：.env.dev

本番環境用：.env.prod
※本記事では、本番環境の構築まではやらないので、必要に応じてカスタマイズしてください。

環境変数ファイルの指定を変更したいので、docker-compose-dev.ymlとdocker-compose-prod.ymlを以下のように編集します。

（省略）

env_file:
      - .env.dev     # ここを編集

（省略）

（省略）

env_file:
      - .env.prod     # ここを編集

（省略）

dotenv-railsのgemを追加

環境変数（.env）を読み込むために、Gemfileに以下の記述を追加します。
Gemfileもrails newで上書きされています。

# 環境変数
gem 'dotenv-rails'

Dockerイメージ作成

以下のコマンドで、Dockerイメージをビルドします。

docker-compose -f docker-compose-dev.yml --env-file .env.dev build

コンテナの立ち上げ

以下のコマンドで、作成されたDockerコンテナを立ち上げます。

docker-compose -f docker-compose-dev.yml --env-file .env.dev up -d

DBの設定

backend/config/database.ymlを編集して、データベースファイルの設定を変更します。
環境変数（.env）の値を使って設定します。

(省略)

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV['MYSQL_ROOT_USER'] %>      # 変更
  password: <%= ENV['MYSQL_ROOT_PASSWORD'] %>  # 変更
  host: db  # 変更

development:
  <<: *default
  database: <%= ENV['MYSQL_DB'] %>_development  # 変更

(省略)

test:
  <<: *default
  database: <%= ENV['MYSQL_DB'] %>_test  # 変更

(省略)

production:
  <<: *default
  database: <%= ENV['MYSQL_DB'] %>_production  # 変更
  username: <%= ENV['MYSQL_ROOT_USER'] %>      # 変更
  password: <%= ENV["MYSQL_ROOT_PASSWORD"] %>  # 変更

DBの作成

以下のコマンドで、データベースを作成します。（少し時間がかかります）

docker-compose -f docker-compose-dev.yml --env-file .env.dev exec backend rails db:create

コンソールログが以下のようになればデータベースが作成できています。

Created database 'db_docker_rails7_development'
Created database 'db_docker_rails7_test'

動作確認（Rails）

ブラウザからhttp://localhost:3000/にアクセスして、以下のような画面が出たら成功です。

Nex.jsプロジェクトの作成

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

docker-compose -f docker-compose-dev.yml --env-file .env.dev run --rm frontend yarn create next-app .

途中でいくつか質問されるので、必要に応じて、カスタマイズしてください。
今回は、すべてデフォルトのまま選択して進めました。

コンテナの立ち上げ

以下のコマンドで、コンテナを立ち上げます。

docker-compose -f docker-compose-dev.yml　--env-file .env.dev up -d

動作確認（Next.js）

ブラウザからhttp://localhost:8000/にアクセスして、以下のような画面が出たら成功です。

git設定

このままだと、backend/配下のディレクトリのみがgit管理されるので、作業ディレクトリ全体をgit管理できるようにしておきます。
PowerShellだとコマンドが動作しなかったので、以降は、Git Bashでコマンド操作していきます。

.gitの削除

作業ディレクトリでfindコマンドを実行すると、backend/配下のみに.gitディレクトリが存在していることが確認できます。

$ find . -type d -name .git
./backend/.git

.gitディレクトリを削除します。

rm -rf backend/.git

.gitignoreファイルなども存在しますが、そのままにしておきます。
作業ディレクトリをgit管理にしたときに、.gitignoreがそのまま適用されます。

作業ディレクトリにgitリポジトリを作成する

以下のコマンドで、作業ディレクトリにgitリポジトリを作成します。

git init

これで作業ディレクトリをgit管理にすることができました。
あとは、README.mdファイルを追加したり、githubなどに登録したりして利用してください。

参考サイト

Qiita
Next.js×Rails APIモードのJSONを返すアプリをDockerで環境構築して作ってみた - Q...
https://qiita.com/devactken/items/7f26ab5096229d756a66
はじめにフロントエンドをNext.js 13(TypeScript)、バックエンドをRuby on RailsのAPIモードで構成するアプリケーションをDockerで環境構築しJSONを返すアプリ…

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


ABOUT ME
Haruna Abe
Haruna Abe
Webエンジニア
フロントエンドエンジニア２年目｜ReactやTypeScriptなど、フロントエンドの情報を発信していきます
Recommend
こちらの記事もどうぞ
CONTACT

お問い合わせ

制作のお見積もりやご依頼、その他ご相談等ございましたら
お気軽にお問い合わせください。

    記事URLをコピーしました