Zenn
🔖

DockerでRails(API)＋Next.js環境構築方法

2021/10/19に公開
Docker
Next.js
Rails
React
Ruby
tech

この記事ではDockerを使用して、Ruby on Rails APIとNext.jsの環境構築方法について紹介します。

今回作成するコードになります。
https://github.com/tatsuya06068/RailsNext

前提条件

マシンに Docker のインストールをしてください。
⇢Docker公式

docker-composeも使用するためインストールしてください。
⇢Docker公式

好きなエディタをインストールをしてください。
私の場合は、大人気のVSCodeを使用しています。
⇢VSCode公式

Docker準備

ターミナルを起動して、好きな場所にディレクトリを作成します。
作成後はディレクトリ内に入ります。

mkdir railsNextApp
cd railsNextApp

Rails用とNext用に２つディレクトリを作成します。

mkdir front
mkdir api

front準備

まずはfrontディレクトリにDockerファイルを作成します。

cd front 
touch Dockerfile

Dockerfileを編集します。

Dockerfile
FROM node:14.17.0
RUN mkdir /railsNextApp
WORKDIR /railsNextApp

api準備

次にapiディレクトリにDockerファイルを作成しましょう。

cd ..
cd api
touch Dockerfile

Dockerfileを編集します。

Dockerfile
FROM ruby:3.0
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs
RUN mkdir /railsNextApp
WORKDIR /railsNextApp 
COPY Gemfile /railsNextApp/Gemfile
COPY Gemfile.lock /railsNextApp/Gemfile.lock
RUN bundle install
COPY . /railsNextApp

# シェルスクリプトを実行します。
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0"]

次にRailsに必要なファイルを作成します。
まずはGemfileを作成しましょう。

touch Gemfile

Gemfileを編集しましょう。

Gemfile
source 'https://rubygems.org'
gem 'rails', '~> 6'

次にGemfile.lockを作成します。
このファイルは編集せずにそのままにします。

touch Gemfile.lock

次にentrypoint.shを作成します。

touch entrypoint.sh

entrypoint.shを編集しましょう。

enrtypoint.sh
#!/bin/bash
set -e

# Remove a potentially pre-existing server.pid for Rails.
rm -f /railsNextApp/tmp/pids/server.pid

# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"

docker-compose準備

次にapiやforntディレクトリと同じディレクトリにdocker-compose.ymlを作成しましょう。

cd ..
touch docker-compose.yml

次にdocker-compose.ymlを編集します。
今回はDBにMYSqlを使用しています。

docker-compose.yml
version: '3'
services:
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - '3306:3306'
    command: --default-authentication-plugin=mysql_native_password
    volumes:
      - mysql-data:/var/lib/mysql
  api:
    build: 
      context: ./api
      dockerfile: Dockerfile
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - ./api:/railsNextApp
      - gem_data:/usr/local/bundle
    ports:
      - "3000:3000"
    depends_on:
      - db
    stdin_open: true
    tty: true
  front:
    build: 
      context: ./front
      dockerfile: Dockerfile
    command: sh -c "cd front-next && npm run dev"
    ports:
      - '8000:3000'
    volumes:
      - ./front:/railsNextApp
    depends_on:
      - api
volumes:
  mysql-data:
  gem_data:
    driver: local

ここまで作成できたらbuildしましょう！

docker-compose build

Dockerの準備はここまでです！

Next.js環境構築

次はNext.js環境を構築します。
まずはcreate-next-appを使用できるようにしましょう。

docker-compose run --rm front npm install create-next-app

これでcreate-next-appコマンドが使用できます。

実際にNext.jsを構築しましょう。
下記のコマンドを入力します。
front-nextの部分は任意です。

docker-compose run --rm app npx create-next-app front-next --ts

構築が完了するとしたら、起動してみましょう。

docker-compose up -d

http://localhost:8000/にアクセスしてみて、下記の用に表示されれば成功です！！

Ruby on Rails環境構築

次はRuby on Rails環境を構築します。
下記コマンドを入力しましょう。

docker-compose run --rm api bundle exec rails new . --api -d mysql

コマンド実行中序盤で下記の用に表示されるのでYを入力して上書きしましょう。

Overwrite /app/Gemfile? (enter "h" for help) [Ynaqdhm] Y

処理が完了したら、MYSqlの設定を行います。
まずはDB用に環境変数を作成しましょう。
apiディレクトリ内にenvironmentsディレクトリを作成します。

mkdir environments

environments内にdb.envファイルを作成します。

cd environments
touch db.env

db.envファイルを編集します。

db.env
MYSQL_ROOT_PASSWORD=root_password
MYSQL_USER=root
MYSQL_PASSWORD=password

次にconfigディレクトリにあるdatabase.ymlを編集します。
defaultの部分だけ編集します。

database.yml
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV.fetch('MYSQL_USER') { 'root' } %>
  password: <%= ENV.fetch('MYSQL_PASSWORD') { 'password' } %>
  host: db

ここまできたらもう一息です！
buidとDB:createを行いましょう。

docker-compose build
docker-compose run --rm api bundle exec rails db:create

DBの作成ができたら起動させて見ましょう!

docker-compose up -d --build

http://localhost:3000/にアクセスしてみて、下記の用に表示されれば成功です！！

お疲れさまでした！

終わり

ここまで見てくださりありがとうございました！

ツイッターもやっているのでぜひフォローもお願いします！
Twitter

Discussion