docker-composeでrails7の開発環境を作る

現在rails7で使える情報がないので記す。webpackerがなくなったので構築するための
ノウハウも変わっている。

5つのファイルを準備する

Gemfile

source "https://rubygems.org"
gem "rails", "~> 7.0.2", ">= 7.0.2.4"

$ touch Gemfile.lock

Dockerfile

FROM ruby:3.1.2
RUN apt-get update -qq \
  && apt-get install -y nodejs npm \
  && rm -rf /var/lib/apt/lists/* \
  && npm install --global yarn

ENV APP_NAME=myapp
ENV TZ=Asia/Tokyo

WORKDIR /${APP_NAME}

COPY Gemfile /${APP_NAME}/Gemfile
COPY Gemfile.lock  /${APP_NAME}/Gemfile.lock
RUN gem update --system && \
    gem update bundler && \
    bundle install

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

docker-compose.yml

version: "3.9"
services:
  rails:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bin/dev"
    volumes:
      - .:/myapp
      - public-data:/myapp/public
    ports:
      - "3000:3000"
    environment:
      - APP_ENV=development
    tty: true
    depends_on:
      - db

  db:
    image: mysql:8.0.27
    environment:
      TZ: Asia/Tokyo
      MYSQL_ROOT_PASSWORD: pass
    ports:
      - "3306:3306"
    volumes:
      - db:/var/lib/mysql

volumes:
  db:
    driver: local
  public-data:

entrypoint.sh

#!/bin/bash
set -e

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

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

Railsインストール後に設定ファイルを書き換える

CSSはいろいろ選べる

• tailwind
• bootstrap
• bulma
• postcss
• sass

今回はBootstrapにした。

$ docker-compose run rails rails new . --force --no-deps --database=mysql --css=bootstrap

config/database.yml

# MySQL. Versions 5.5.8 and up are supported.
#
# Install the MySQL driver
#   gem install mysql2
#
# Ensure the MySQL gem is defined in your Gemfile
#   gem "mysql2"
#
# And be sure to use new-style password hashing:
#   https://dev.mysql.com/doc/refman/5.7/en/password-hashing.html
#
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: pass
  host: db

development:
  <<: *default
  database: myapp_development

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: myapp_test

# As with config/credentials.yml, you never want to store sensitive information,
# like your database password, in your source code. If your source code is
# ever seen by anyone, they now have access to your database.
#
# Instead, provide the password or a full connection URL as an environment
# variable when you boot the app. For example:
#
#   DATABASE_URL="mysql2://myuser:mypass@localhost/somedatabase"
#
# If the connection URL is provided in the special DATABASE_URL environment
# variable, Rails will automatically merge its configuration values on top of
# the values provided in this file. Alternatively, you can specify a connection
# URL environment variable explicitly:
#
#   production:
#     url: <%= ENV["MY_APP_DATABASE_URL"] %>
#
# Read https://guides.rubyonrails.org/configuring.html#configuring-a-database
# for a full overview on how database connection configuration can be specified.
#
production:
  <<: *default
  database: myapp_production
  username: myapp
  password: <%= ENV["MYAPP_DATABASE_PASSWORD"] %>

Procfile.dev

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

以下のコマンドを実行してrailsを立ち上げる

$ docker-compose run rails rails db:create
$ docker-compose up

これでサーバーが立ち上がる。

もう一つコンソールを立ち上げてスキャフォルドを確認する

$ docker-compose exec rails bash
# bin/rails g scaffold blog  title:string content:text
# bin/rails db:migrate

localhost:3000/blogsにアクセスする
docker-compose upをしたコンソールを見てアクセルログを確認する

CSSのビルドを確認する

assets/stylesheets/application.bootstrap.scss

@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';

body {
  color: #666666;
}

docker-compose upをしたコンソールを見てCSSビルドされることを確認する

Javascriptのビルドを確認する

javascript/application.js

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"

alert('テスト')

docker-compose upをしたコンソールを見てJavascriptビルドされることを確認する

以上で終了。