既存のRails & Vue.js (Webpacker) アプリをDockerで動かす

個人ブログをRailsとWebpackerを使ってVue.jsで運用しています。
最近メインマシンをMackBookProからThinkPadT470sに移したのはいいですが、
環境構築だるいなーということでDockerで動かすようにしました。

こちらのプルリクを見てもらうとだいたいわかると思います。
https://github.com/tackeyy/blog/pull/200/files

前提

• 既存のアプリをDockerで動かせるようにします
• Railsの起動はforemanを使っており、foreman startでRailsが起動するようになっています

環境

$ docker-compose version
docker-compose version 1.16.1, build 6d1ac21
docker-py version: 2.5.1
CPython version: 2.7.13
OpenSSL version: OpenSSL 1.0.1t  3 May 2016

1. Dockerファイル作成

+FROM ruby:2.4.1
+LABEL maintainer 'tackeyy'
+
+# Set environment variables
+ENV LANG C.UTF-8
+ENV ROOT_PATH /blog
+
+# Install essential libraries
+RUN apt-get update && apt-get install -y build-essential libpq-dev
+
+# Install node.js
+RUN curl -sL https://deb.nodesource.com/setup_8.x | bash - && \
+    apt-get install nodejs
+
+# Install yarn
+RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
+    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
+    echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
+    apt-get update && apt-get install -y yarn
+
+# Fix: 'Cannot find module 'node-sass'
+RUN yarn add node-sass
+
+# Move to root
+RUN mkdir $ROOT_PATH
+WORKDIR $ROOT_PATH
+
+# Bundle install
+ADD Gemfile $ROOT_PATH/Gemfile
+ADD Gemfile.lock $ROOT_PATH/Gemfile.lock
+RUN bundle install
+
+# Install foreman
+RUN gem install foreman
+
+ADD . $ROOT_PATH

2. docker-compose.yml作成

+services:+version: '2'
+services:
+  db:
+    image: mysql:5.7
+    ports:
+      - "4306:3306"
+    environment:
+      MYSQL_USER: "root"
+      MYSQL_ALLOW_EMPTY_PASSWORD: "true"
+  web:
+    build: .
+    command: foreman start
+    volumes:
+      - .:/blog
+    ports:
+      - "5000:5000"
+      - "8080:8080"
+    depends_on:
+      - db

3. docker-compose.ymlに記載したサービスのビルド

$ docker-compose build

4. DB/テーブル/初期データ作成

$ docker-compose run web rake db:create db:migrate db:seed_fu

5. コンテナとサービスの起動

$ docker-compose up

これで localhost:5000 にアクセスすればOKです。