Docker + Rails7 + Webpack な開発環境の構築方法【コピペでOK】

はじめに

この記事の概要

こんにちは、Rubyをメインで書いている株式会社TOKOSのツキヤです!
今回はRails7の開発環境をDockerで構築する方法を説明します!
Rails6バージョンは過去に書いていますので、ご参考ください😎
【Rails6】Dockerを用いたRails6の開発環境構築【コピペでOK】

Rails6と7の大きな違いとして、組み込まれるJavascriptのバンドラーがあります。
この違いも簡単に説明するので、分からない方はぜひ最後まで読んでみて下さい💪

対象読者

  • Rails7 + Dockerの環境を構築したい方
  • 開発環境を構築する上でのRails7と6の違いを知りたい方

今回作成する環境

技術等バージョン
ruby3.1.2
rails7.0.3
Webpack5.73.0

Rails6と7の違い

まずは6系と7系の違いを説明します!
と言っても、今回は開発環境の構築方法なので、環境構築に関わる部分だけの説明に留めておきます。
全体的な違いが知りたい方は、下記記事を参考にして下さい🙏
参考 Ruby on Rails 7の主要な新機能・機能追加・変更点Qiita
参考 Rails 7.0 + Ruby 3.1でゼロからアプリを作ってみたときにハマったところあれこれQiita

JavaScript

デフォルトでインストールされるJavascriptのライブラリの違いが1番大きいです!
Rails6の時はWebpackerという、Webpackのラッパーがインストールされていました。

ツキヤ

Webpackがよく分かっていなくても、JSの処理を良い感じにまとめてくれるようなものだね!

Rails7は、このJSのまとめ役のようなものがrails newの際に4種類から選べるようになりました!
具体的には、importmapesbuildRollupWebpackの4つです!
つまり、Webpackerはその中に入っておらず、Rails6と同じように開発・デプロイをしようと思ったらWebpackを選択する必要があります😨
それぞれの説明は今回割愛しますが、大事なことは何も選択しなかった場合のデフォルトはimportmapになってしまうということです🙄
Rails6までと同じような感じで使うためには、Webpackを選択することが必要です!

CSS

CSSに関しても同様で、rails newする際に任意のライブラリを選択する事ができます。
具体的には、

  • TailwindCSS
  • Bootstrap
  • bulma
  • postcss
  • sass

です!
Rails6ではデフォルトでsassが入っていたかと思いますが、Rails7では何も入っていなさそうですね🤔

構築方法

それでは早速構築方法の説明をしていきます!
前提として、MacOS + Docker for Desktopを使っていきますので、Windowsの方は適宜読み替えをしてください。
またRails6と違う部分を重点的に書きますので、まずは下記のRails6バージョンの記事を読んでいただけると理解がスムーズになると思います!
【Rails6】Dockerを用いたRails6の開発環境構築【コピペでOK】

ファイルの作成・記述

$ touch Dockerfile docker-compose.yml entrypoint.sh Gemfile Gemfile.lock my.cnf

上記コマンドを打つことで必要なディレクトリとファイルが全て作成されます!

docker-compose.yml

version: "3"
services:
  app:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && ./bin/dev"
    # raisl6の場合: command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/myapp:delegated
    ports:
      - "3000:3000"
    depends_on:
      - db
    tty: true
    stdin_open: true

  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - '3306:3306'
    volumes:
      - ./tmp/db:/var/lib/mysql:delegated
      - ./my.cnf:/etc/mysql/conf.d/my.cnf
    cap_add:
      - SYS_NICE

Rails6との違いとしては、5行目のbundle exec rails s -p 3000 -b ‘0.0.0.0’./bin/devになっているところです!
これは、Rails7でのサーバーの立ち上げコマンドがbin/devになったことによる変更です!

MEMO
bin/devコマンドで、リロードによるJSやCSSの自動コンパイルがされるようになります

その他ファイル

他はRails6とバージョンくらいしか違いが無いのでまとめて載せておきます!
(ファイル名はコードボックスの右上に書いてあります)

FROM ruby:3.1.2
ENV TZ Asia/Tokyo

RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash - \
    && apt-get update -qq \
    && apt-get install -y nodejs \
    && npm install -g yarn

WORKDIR /myapp
RUN gem install bundler
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/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"]
#!/bin/bash
set -e

rm -f /myapp/tmp/pids/server.pid

exec "$@"
source 'https://rubygems.org'
gem 'rails', '~>6.1.4'
[mysqld]
character-set-server=utf8mb4
collation-server=utf8mb4_general_ci
default-authentication-plugin=mysql_native_password

[client]

default-character-set=utf8mb4

Gemfile.lockは相変わらず空です!

コマンド

それではnewのコマンドを打ち込みます!

$ docker-compose run --no-deps app rails new . --force --database=mysql --javascript=webpack --skip-test
$ docker-compose build

この–javascript=webpackの記述でJavascriptのバンドラーはWebpackになります!
 
またTailwindCSSを使いたいときはコマンドに追加で–css=tailwind、Bootstarapを使いたいときは–css=bootstrapを追記するだけです🥳
あとは、config/database.ymlのデータベースの設定をRails6と同様に記述した上で$ docker-compose upコマンドでRails7の画面が確認できるハズです!
rails7のnew画面

終わりに

Rails7でWebpackを使うのであれば、Rails6とほぼ変わりなく環境構築ができそうですね!
Rails7では他にもTurboStimulusというフロントエンド側の大幅アップデートがあり、そちらも記事に書いていく予定ですのでお楽しみに😎
Railsの勉強をしたい方はこの本が参考になるかと思いますので興味がある方は是非読んで見て下さい🙇‍♂️