はじめに
Webアプリケーションの開発環境を構築する際に、Dockerを使用することは効果的な方法の1つです。特に、Rails APIモードとNext.jsを組み合わせて開発する場合、Dockerを利用することで環境の構築と管理を簡素化できます。この記事では、Dockerを使用してRails APIモードとNext.jsの開発環境を構築する手順を紹介します。
技術スタックの概要
Rails APIモード
RailsのAPIモードは、フロントエンドとバックエンドを分離して開発する場合に便利な機能です。APIモードを使用することで、データの提供と処理を行うバックエンドのみを構築できます
Next.js
Next.jsは、Reactアプリケーションの開発をサポートするフレームワークです。サーバーサイドレンダリングや静的サイト生成などの機能を提供し、パフォーマンスの向上やSEO対策に役立ちます
Docker
Dockerは、コンテナ仮想化技術を使用してアプリケーションを環境に依存せずに実行することができるツールです。開発、テスト、本番環境など、異なる環境でアプリケーションを一貫して動作させることが可能です
手順
メインリポジトリの作成とサブモジュール化から始まり、Dockerの設定、そしてフロントエンドとバックエンドの環境構築までの流れを説明します。
1.メインリポジトリの作成とサブモジュール化:
GitHubでメインリポジトリを作成します。このリポジトリには、フロントエンドとバックエンドのサブモジュールが含まれます。
メインリポジトリ内に、フロントエンドとバックエンドのディレクトリをサブモジュールとして追加します。
(base) dev % cd TeachChest
(base) TeachChest % git init
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint:
hint: git config --global init.defaultBranch <name>
hint:
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint:
hint: git branch -m <name>
Initialized empty Git repository in /Users/jima/dev/TeachChest/.git/
(base) TeachChest % echo "# TeachChest" >> README.md
(base) TeachChest % git add README.md
(base) TeachChest % git commit -m "first commit"
[master (root-commit) d0e6835] first commit
1 file changed, 1 insertion(+)
create mode 100644 README.md
(base) TeachChest % git branch -M main
(base) TeachChest % git remote add origin git@github.com:jijimama/TeachChest.git
(base) TeachChest % git push -u origin main
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 223 bytes | 223.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)
To github.com:jijimama/TeachChest.git
* [new branch] main -> main
branch 'main' set up to track 'origin/main'.
サブモジュールの設定
(base) TeachChest % git submodule add git@github.com:jijimama/TeachChest-front.git front
Cloning into '/Users/jima/dev/TeachChest/front'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.
(base) TeachChest % git submodule add git@github.com:jijimama/TeachChest-back.git back
Cloning into '/Users/jima/dev/TeachChest/back'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.
(base) TeachChest % git add .
(base) TeachChest % git commit -m "Add: submolues"
[main e7f132a] Add: submolues
3 files changed, 8 insertions(+)
create mode 100644 .gitmodules
create mode 160000 back
create mode 160000 front
(base) TeachChest % git push
Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 8 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 434 bytes | 434.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)
To github.com:jijimama/TeachChest.git
d0e6835..e7f132a main -> main
(base) TeachChest % ls -al
total 24
drwxr-xr-x 8 jima staff 256 5 12 13:14 .
drwxr-xr-x 14 jima staff 448 5 12 13:09 ..
drwxr-xr-x 13 jima staff 416 5 12 13:12 .git
-rw-r--r-- 1 jima staff 169 5 12 13:12 .gitmodules
-rw-r--r-- 1 jima staff 13 5 12 13:09 README.md
drwxr-xr-x 5 jima staff 160 5 12 13:15 back
-rw-r--r--@ 1 jima staff 778 5 12 13:14 docker-compose.yml
drwxr-xr-x 5 jima staff 160 5 12 13:14 front
2.Dockerの設定
メインリポジトリ内にDockerfileとdocker-compose.ymlを作成します。
Dockerfileには、フロントエンドとバックエンドそれぞれの環境構築手順を記述します。
docker-compose.ymlには、フロントエンドとバックエンドのコンテナの設定を記述します。
version: "3"
services:
db:
image: postgres:15.5
environment:
POSTGRES_DB: app_development
POSTGRES_USER: user
POSTGRES_PASSWORD: password
ports:
- "5432:5432"
volumes:
- postgres_data:/var/lib/postgresql/data
back:
build:
context: ./back
dockerfile: Dockerfile
command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -b '0.0.0.0'"
volumes:
- ./back:/app
ports:
- "3000:3000"
depends_on:
- db
tty: true
stdin_open: true
environment:
- RAILS_ENV=development
front:
build:
context: ./front/
dockerfile: Dockerfile
volumes:
- ./front:/app
command: yarn dev -p 4000
ports:
- "8000:4000"
volumes:
postgres_data:
3.フロントエンドの環境構築（Next.js）
フロントエンドのディレクトリに移動し、Next.jsプロジェクトを作成します。
必要なパッケージをインストールし、開発環境を構築します。
Dockerfile内で、フロントエンドのビルドと実行のための設定を追加します。
FROM node:19.4.0
WORKDIR /app
4.バックエンドの環境構築（Rails API）:
バックエンドのディレクトリに移動し、Rails APIモードのプロジェクトを作成します。
必要なgemをインストールし、データベースのセットアップを行います。
Dockerfile内で、バックエンドのビルドと実行のための設定を追加します。
FROM ruby:3.2.2
RUN apt-get update -qq && apt-get install -y nodejs postgresql-client
WORKDIR /app
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
RUN gem install bundler
RUN bundle install
COPY . /app
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3002
CMD ["rails", "server", "-b", "0.0.0.0"]
また、entrypoint.shを作成します。entrypoint.shは、コンテナが開始された時に実行されるスクリプトです。
#!/bin/bash
set -e
rm -f /app/tmp/pids/server.pid
exec "$@"
$docker-compose buildをする前に、backディレクトリにGemfileとGemfile.lockを作成します。Gemfile.lockは空で問題ありません。
source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby "3.2.2"
gem "rails", "~> 7.0.5"
ルートディレクトリに移動
(base) TeachChest % docker-compose build
[+] Building 61.5s (21/21) FINISHED docker:desktop-linux
=> [back internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 445B 0.0s
=> [front internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 103B 0.0s
=> [back internal] load metadata for docker.io/library/ruby:3.2.2 2.4s
=> [front internal] load metadata for docker.io/library/node:19.4.0 2.6s
=> [back internal] load .dockerignore
・・・・
(base) TeachChest % docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
teachchest-back latest e08b29de2a5b 12 seconds ago 1.15GB
teachchest-front latest e9d09eec03a5 23 seconds ago 948MB
5.環境構築
フロントエンド側をやっていきます。frontディレクトリへ移動。
(base) front % docker-compose run --rm front yarn create next-app .
[+] Creating 2/0
✔ Network teachchest_default Created 0.0s
✔ Volume "teachchest_postgres_data" Created 0.0s
yarn create v1.22.19
・・・・
(base) front % docker-compose up front
[+] Running 1/0
✔ Container teachchest-front-1 Created 0.0s
Attaching to front-1
front-1 | yarn run v1.22.19
次にバックエンド。
(base) back % docker-compose run --rm --no-deps back bundle exec rails new . --api --database=postgresql
(base) back % docker-compose run --rm back bundle install
[+] Running 15/15
✔ db 14 layers [⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿] 0B/0B Pulled 17.6s
✔ 25d3892798f8 Pull complete 3.6s
✔ 77c2305dd978 Pull complete 0.7s
✔ 54c99c28f11f Pull complete 1.1s
✔ 5feeada49781 Pull complete
(base) back % docker-compose run --rm back rails db:create
(base) back % docker-compose up
[+] Running 3/0
✔ Container teachchest-db-1 Running 0.0s
✔ Container teachchest-front-1 Created 0.0s
✔ Container teachchest-back-1 Created 0.0s
以上で、環境構築完了です。最後までお読みいただきありがとうございました。