Posted at

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

More than 1 year has passed since last update.


背景

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


  • サクッと作って、はようお試ししたい


    • 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を触ってみて

ふああああああああああああああああああああああああ!!!!!!!!!

快適いいいいいいいいいいいいいいいいい!!!!!!!!!!!!!!!!