行動すれば次の現実

テック中心の個人ブログ

Rails7+bootstrap+esbuld+Postgresqlの構成でDockerの開発環境を構築する

Docker Rails

Docker-Composeを使ったRails7の開発環境構築手順を説明します。

意外にもDocker構築を含めた一筆書きのRails7セットアップ手順が見受けられなかったので自分で試行錯誤しながら記事にしました。極力シンプルな手順を心がけています。誰かの参考になれば幸いです。

環境情報

  • MacBook Pro
    • MacOS Monterey(12.4)
  • Rails 7.0.4
  • Ruby 3.1.2
  • Postgresql 13.6
  • Docker 20.10.12
  • docker-compose 1.29.2
  • node.js 18.9.1
  • bootstrap 5.2.1

設定ファイルの準備

プロジェクトフォルダの作成

プロジェクトのフォルダを作成して、カレントディレクトリを移動しておきます。 空のGemfile.lock yarn.lockの空ファイルも事前に作成しておきます。

mkdir my_app
cd my_app
touch Gemfile.lock
touch yarn.lock

※ 「my_app」と記述されている箇所はご自身のアプリ名に置き換えてください。

Docker設定ファイル

RubyとNode.jsイメージを使用してDockerfileを作成します。 RubyのイメージにデフォルトでインストールされているNode.jsのバージョンををNode.jsイメージのバージョンに置き換えて構築します。

Dockerfile

FROM node:18.9.1 as node
FROM ruby:3.1.2

ENV TZ Asia/Tokyo

WORKDIR /my_app

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]

COPY --from=node /usr/local/bin/node /usr/local/bin/node
COPY --from=node /usr/local/include/node /usr/local/include/node
COPY --from=node /usr/local/lib/node_modules /usr/local/lib/node_modules
RUN ln -s /usr/local/bin/node /usr/local/bin/nodejs && \
    ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npm

RUN apt-get update -qq && apt-get install -y postgresql-client
RUN npm install yarn -g -y

COPY Gemfile Gemfile
COPY Gemfile.lock Gemfile.lock
RUN gem update --system && bundle install

COPY package.json yarn.lock ./
RUN yarn install

COPY . ./
EXPOSE 3000
CMD ["rails", "server", "-b", "0.0.0.0"]

続いて、docker-compose.ymlを作成します。webサーバーとdbサーバーの定義を記述します。

docker-compose.yml

version: "3.9"
services:
  web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bin/dev"
    tty: true
    stdin_open: true
    ports:
      - "3000:3000"
    volumes:
      - .:/my_app:delegated
      - bundle:/usr/local/bundle
    depends_on:
      - db
  db:
    image: postgres:13.6
    volumes:
      - postgres:/var/lib/postgresql/data
    ports:
      - "5432:5432"
    environment:
      POSTGRES_USER: my_app
      POSTGRES_PASSWORD: password
      POSTGRES_DB: my_app_development
      TZ: "Asia/Tokyo"
      POSTGRES_INITDB_ARGS: "--encoding=UTF-8 --locale=C"

volumes:
  bundle:
  postgres:

Rails用のファイルの作成

Gemfileを作成します。Rails7以上を使用するという記述します。

Gemfile

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

下記の内容でentrypoint.shを作成します。これはRails特有の問題を防ぐために使用されるスクリプトです。 サーバー内にserver.pidというファイルが先に存在していたときに、サーバーが再起動できなくなる問題を回避するために使用されます。

entrypoint.sh

#!/bin/bash
set -e

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

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

package.json

空のjsonオブジェクトを定義しておきます

{}

ファイル構成の確認

上記を踏まえるとファイル構成は以下の通りになります。

my_app
  Dockerfile
  docker-compose.yml
  entrypoint.sh
  Gemfile
  Gemfile.lock
  package.json
  yarn.lock

環境構築

docker-compose build

docker-compose buildコマンドを使用してDocker環境を構築します。

docker-compose build --no-cache

rails new

続いてカレントディレクトリに対してrails newコマンドでファイルを展開します。

docker-compose run web rails new . --force --no-deps --database=postgresql --css=bootstrap --javascript=esbuild

rails newが完了するとターミナル上に以下のメッセージが表示されますのでpackage.jsonに追記します。

Add "scripts": { "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets" } to your package.json
Add "scripts": { "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules" } to your package.json

package.json

{
 "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  },
 "dependencies": {
  // 省略...
}

application.jsの書き換え

このままではtooltipsやpopoverが動作しませんので、application.jsに以下を追記します。

app/javascript/application.js

document.addEventListener('turbo:load', () => {
  const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
  const popoverList = [...popoverTriggerList].map(d => new bootstrap.Popover(d))
  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  const tooltipList = [...tooltipTriggerList].map(d => new bootstrap.Tooltip(d))
})

Procfile.devの書き換え

-b '0.0.0.0'の部分を追記します。

web: bin/rails server -p 3000 -b '0.0.0.0'
js: yarn build --watch
css: yarn build:css --watch

database.ymlの書き換え

rails newで作成されたdatabase.ymlの設定を以下のように変更します。

config/database.yml

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

development:
  <<: *default
  database: my_app_development

test:
  <<: *default
  database: my_app_test

rails db:create

データベースを構築します。

docker-compose run web rake db:create db:migrate

アプリ起動

docker-compose up

upコマンドでアプリケーションを起動します。

docker-compose up

起動確認

localhost:3000にアクセスして以下の画面が表示されましたら完了です。お疲れ様でした！

起動確認