Rails5とwebpackerをdocker-composeを使って快適に開発する

背景

お試し用スモールアプリケーションを開発することになった。

• サクッと作って、はようお試ししたい
  • Rails使うか
    • Rails5まだ弄ってないし弄りたい
      • Rails5はwebpackが統合されたらしい

こんな感じ。

環境

先に環境晒しておきます。

• Ruby 2.4.1
• Rails 5.1.3
• webpacker 2.0

Railsプロジェクトを作成

$ rails new example_project --webpack

Railsをdockernizeする

ymlで定義している設定値を環境変数からinjectするように変える。

database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  charset: utf8mb4
  collation: utf8mb4_general_ci
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV['RAILS_DATABASE_USER'] %>
  password: <%= ENV['RAILS_DATABASE_PASSWORD'] %>
  host: <%= ENV['RAILS_DATABASE_HOST'] %>

test:
  <<: *default
  database: <%= ENV['RAILS_DATABASE_TEST'] %>

development:
  <<: *default
  database: <%= ENV['RAILS_DATABASE'] %>

production:
  <<: *default
  database: <%= ENV['RAILS_DATABASE'] %>

secrets.yml

test:
  secret_key_base: <%= ENV["SECRET_KEY_BASE"] %>

development:
  secret_key_base: <%= ENV["SECRET_KEY_BASE"] %>

production:
  secret_key_base: <%= ENV["SECRET_KEY_BASE"] %>

webpacker-dev-serverの設定を変える

webpacker-web-serverをホストからアクセス出来るように変える。

webpacker.yml

dev_server:
  host: 0.0.0.0
  port: 8000

hostは必ず0.0.0.0にしましょう。ホストからアクセス出来なくなるので。
ポートはお好きな番号で良いんやで。

foremanの導入

foremanとは、複数のプロセスを束ねて管理してくれる便利gem。
こいつを使ってRailsサーバとwebpacker-dev-serverを1コンテナ内に同時で起動させる。
↓のProcfile.devはアプリケーションのルートディレクトリに設置してね。

Procfile.dev

web: bundle exec rails s -b 0.0.0.0 -p 3000
webpacker: bin/webpack-dev-server

Dockerの準備

アプリケーション用のDockerfileを用意する。

Dockerfile

FROM ruby:2.4.1

ENV APP /app
RUN apt-get update -qq && \
    apt-get install -y build-essential libpq-dev nodejs npm && \
    npm install -g n && \
    n stable && \
    npm install -g yarn && \
    ln -s /usr/bin/nodejs /usr/bin/node && \
    mkdir $APP

WORKDIR $APP
ADD Gemfile* $APP/
RUN bundle install

ADD package.json $APP
ADD yarn.lock $APP
RUN yarn install

ADD . $APP

docker-compose.yml

version: '3'
services:
  db:
    image: mysql:5.7
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_general_ci
    volumes:
      - store:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: 'password'
    ports:
      - 3306
  app:
    build: .
    command: bundle exec foreman start -f Procfile.dev
    volumes:
      - .:/app
      - bundle:/usr/local/bundle
      - /app/node_modules
    ports:
      - '3000:3000'
      - '8000:8000'
    environment:
      TZ: 'Asia/Tokyo'
      SECRET_KEY_BASE: 'hogehoge'
      RAILS_ENV: 'development'
      RAILS_DATABASE: 'app_db'
      RAILS_DATABASE_TEST: 'app_db_test'
      RAILS_DATABASE_USER: 'root'
      RAILS_DATABASE_PASSWORD: 'password'
      RAILS_DATABASE_HOST: db
    depends_on:
      - db
volumes:
  store:
    driver: local
  bundle:
    driver: local

アプリケーションの起動

ここまで準備出来たら、後はコンテナを起動するだけ。

$ docker-compose build
$ docker-compose up -d

Rails5 + webpackerを触ってみて

ふああああああああああああああああああああああああ！！！！！！！！！
快適いいいいいいいいいいいいいいいいい！！！！！！！！！！！！！！！！