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にアクセスして以下の画面が表示されましたら完了です。お疲れ様でした！
