0
Help us understand the problem. What are the problem?

posted at

updated at

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ビルドされることを確認する

以上で終了。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?