Setting up Rails + webpacker on Docker Compose

In this, hopefully short post, I want to detail how I'm using docker-compose to run webpacker in a Rails 5.1+ environment.

You'll need to run through the docker-compose installation procedures yourself.

Docker paired with docker-compose is an easy way to get a mock production environment spun up really quickly. This assists in developing against a real world-like production environment.

The file below is what I'm using for Dockerfile. This essentially pulls from the lastest ruby docker image, gets some updates and packages we need and installs node and yarn for package management (not the yarn rubygem, that thing is the devil).

FROM ruby:latest

RUN apt-get update -qq && apt-get install -y build-essential apt-transport-https apt-utils

# for nokogiri
RUN apt-get install -y libxml2-dev libxslt1-dev

# for a JS runtime
RUN curl -sL https://deb.nodesource.com/setup_8.x | bash -
RUN apt-get install -y nodejs

# for yarn
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
RUN apt-get update -qq && apt-get install -y yarn

ENV APP_HOME /app
RUN mkdir $APP_HOME
WORKDIR $APP_HOME

ADD Gemfile* $APP_HOME/
RUN bundle install

ADD . $APP_HOME

And a simplified production environment setup for our docker-compose YAML file.

version: '2'
services:
  db:
    image: mysql:latest
    environment:
      - MYSQL_ROOT_PASSWORD=T0pS3cretP@ssword
    ports:
      - "3307:3306"

  web:
    build: .
    command: rails s --port 4000 --binding 0.0.0.0
    ports:
      - "4000:4000"
    links:
      - db
    volumes:
      - .:/app

If you haven't built your environment run docker-compose build web. This will process through the Dockerfile and install all the required packages. After all of the system level packages are installed it will run through and install all your gems.

Due to a security issue with earlier versions of the webpacker gem you need to pass the --public LOCALDOCKERIP option when running bin/webpack-dev-server.

bin/webpack-dev-server --public LOCALDOCKERIP:8080

To retrieve your docker instance IP simply login to your instance docker-compose exec NAMEFROMDOCKERCOMPOSEYML bash and run ip addr.

Then all you need to do is run docker-compose up web(replace web with your web frontend name) to spin up all of the instances for the environment. Once that is up, open a new terminal tab and run docker-compose exec up web bash and then run the webpack-dev-server command above to compile and serve your assets.

This can be improved to run when you bring up your environment and will be what I tackle next when I get a moment. Leave any improvements below in the comments. Now, back to webpack.