Dockerでアプリケーション構築 - Rails7 × Next.js

はじめに
1. 初期ファイルの準備
- シェルスクリプトを作成し実行
2. docker-compose.ymlに記述を加える
3. frontend/Dockerfileに記述を加える
4. backend/Dockerfileに記述を加える
- Gemfileにも記述を追加
5. Next.jsアプリケーションを作成する
- package.jsonに記述を追加
6. Railsアプリケーションを作成する
7. database.ymlを修正 & DB作成
- データベース作成のコマンド実行
完成！
- バックエンド（Rails）: http://localhost:3000/
- フロント（Next.js）: http://localhost:8000/
おわりに
- コメント
- プログラミングスクールのご紹介 (卒業生より)

はじめに

DockerでRails7とNext.jsを構築していきます。

本記事では手順のみを書いておき詳細は別の記事に移したいと思います。

1. 初期ファイルの準備

シェルスクリプトを作成し実行

今回は必要最低限の構成をシェルスクリプトを使って用意します。

#!/bin/bash

# ディレクトリを作成
mkdir frontend backend

# frontend
touch frontend/Dockerfile frontend/package.json

# backend
touch backend/Dockerfile backend/Gemfile backend/Gemfile.lock

# docker-compose.yml
touch docker-compose.yml

プロジェクトのディレクトリで実行したらよきです。

chmod +x docker.sh

../docker.sh

2. docker-compose.ymlに記述を加える

docker-compose.yml

version: '3.7'

services:
  postgres:
    image: postgres:11.6-alpine
    ports:
      - '5432:5432'
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      POSTGRES_INITDB_ARGS: '--encoding=UTF-8 --locale=ja_JP.UTF-8'
      TZ: Asia/Tokyo
    volumes:
      - postgres_volume:/var/lib/postgresql
    hostname: postgres
  backend:
    tty: true
    depends_on:
      - postgres
    build:
      context: ./backend/
      dockerfile: Dockerfile
    ports:
      - 3000:3000
    volumes:
      - ./backend:/app
    command: rails server -b 0.0.0.0
  frontend:
    build:
      context: ./frontend/
      dockerfile: Dockerfile
    volumes:
      - ./frontend/app:/usr/src/app
    command: 'yarn dev'
    ports:
      - "8000:3000"
volumes:
  postgres_volume:
    driver: local

3. frontend/Dockerfileに記述を加える

FROM node:16-alpine

WORKDIR /usr/src/app

COPY package.json yarn.lock ./

RUN yarn install

COPY . .

CMD ["yarn", "dev"]

4. backend/Dockerfileに記述を加える

FROM ruby:3.2.2

RUN apt-get update -qq \
  && apt-get install -y nodejs postgresql-client npm \
  && rm -rf /var/lib/apt/lists/* \
  && npm install --global yarn

WORKDIR /app
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
RUN bundle install

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"]

Gemfileにも記述を追加

source 'https://rubygems.org'
gem "rails", "~> 7.0.4"

5. Next.jsアプリケーションを作成する

package.jsonに記述を追加

{
  "name": "app",
  "private": "true"
}

frontnedディレクトリに移動してcreate nextする

docker-compose run --rm frontend yarn create next-app .

docker-compose upでコンテナを起動し、

localhost:8000にアクセスして、Next.jsの画面が表示されれば正常に動作していることが確認できる

6. Railsアプリケーションを作成する

backendディレクトリに移動してrails newを実行

docker-compose run --rm --no-deps backend bundle exec rails new . --api --force --database=postgresql

7. database.ymlを修正 & DB作成

default: &default
  adapter: postgresql
  encoding: unicode
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: postgres
  password: postgres
  host: postgres

development:
  <<: *default
  database: postgres_development

test:
  <<: *default
  database: postgres_test

production:
  <<: *default
  database: postgres_production
  password: <%= ENV["POSTGRES_DATABASE_PASSWORD"] %>

データベース作成のコマンド実行

docker-compose run --rm backend rails db:create

完成！

バックエンド（Rails）: http://localhost:3000/

フロント（Next.js）: http://localhost:8000/

おわりに

本記事の内容は以上になります！

参考になったり学びのきっかけになりますと幸いです。

間違いがありましたら修正いたしますので、ご指摘ください。

興味があれば他の記事も更新していきますので是非ご覧になってください♪

プログラミングスクールのご紹介 (卒業生より)

お世話になったプログラミングスクールであるRUNTEQです♪

https://runteq.jp/r/ohtFwbjW

こちらのリンクを経由すると１万円引きになります。

RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。

もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。

https://twitter.com/outputky

Yanonoblog!

こつこつと