DockerでRails + Vue.jsの環境を作ってみる

1 はじめに
2 MySQLのUTF-8対応
3 Node.jsをRubyコンテナに組み込む
4 Webpackerを使用してVue.jsをインストール
- 4.1 Vue.jsが動かない
5 devサーバーを一緒に立ち上げる
6 さいごに

はじめに

前回までのあらすじ

Vue.jsの勉強を始めたtonnyであったが、そろそろRailsの中に組み込んでみたいと思いたつ。
最近Dockerも勉強しているため、せっかくなので、Dockerで環境構築をしてみることにした。
前回までの記事はこちら。

今回の趣旨

下記のブログ、および動画でRails + Vue.jsの学習をしました。
非常に分かりやすいため、オススメです。
【動画付き】Rails 5.1で作るVue.jsアプリケーション～Herokuデプロイからシステムテストまで～

今回はこちらの記事内容をDockerを使用して実施しました。
そのため、今回はDockerを使って、Rails + Vue.jsの環境を作った話となります。

環境

Docker

$ docker --version
Docker version 17.03.0-ce, build 60ccb22
$ docker-compose --version
docker-compose version 1.11.2, build dfed245
$ docker-machine --version
docker-machine version 0.10.0, build 76ed2a

$ docker --version

Docker version 17.03.0-ce, build 60ccb22

$ docker-compose --version

docker-compose version 1.11.2, build dfed245

$ docker-machine --version

docker-machine version 0.10.0, build 76ed2a

Ruby: 2.4.1
Ruby on Rails: 5.1.2
MySQL: 5.7.17
Node.js: 7.10.0
Vue.js: 2.3.4

DBは使用しませんが、前回の記事のものを流用しようと考えたので、使っています。
（また、公式のMySQLイメージを使用すると日本語が文字化けしてしまうので、その対応も記載したいと思います。）

MySQLのUTF-8対応

本項は、今回の記事の内容に必須ではありません。

前回の記事にて、Dockerの公式チュートリアルのことを取り上げました。
ただ、MySQLは公式イメージをそのままプルして使用しているだけでした。
公式イメージはデフォルトだとUTF-8対応していないので、下記の記事を参考にさせていただき、新しくMySQL用のDockerfileを作成しました。

最速で日本語環境のMySQL Dockerコンテナを建てる方法

FROM mysql:latest

RUN apt-get update
RUN apt-get install -y locales
RUN rm -rf /var/lib/apt/lists/*
ENV LC_ALL ja_JP.UTF-8

RUN { \
  echo '[mysqld]'; \
  echo 'character-set-server=utf8mb4'; \
  echo 'collation-server=utf8mb4_general_ci'; \
  echo '[client]'; \
  echo 'default-character-set=utf8mb4'; \
} > /etc/mysql/conf.d/charset.cnf

FROM mysql:latest

RUN apt-get update

RUN apt-get install -y locales

RUN rm -rf /var/lib/apt/lists/*

ENV LC_ALL ja_JP.UTF-8

RUN { \

echo '[mysqld]'; \

echo 'character-set-server=utf8mb4'; \

echo 'collation-server=utf8mb4_general_ci'; \

echo '[client]'; \

echo 'default-character-set=utf8mb4'; \

} > /etc/mysql/conf.d/charset.cnf

なお、RubyコンテナもDockerfile-rubyとリネームします。
合わせてdocker-compose.ymlを修正します。

version: '2'
services:
  db:
    build:
      context: .
      dockerfile: Dockerfile-mysql
    environment:
      MYSQL_ROOT_PASSWORD: root
      TZ: 'Asia/Tokyo'
    ports:
      - 3306:3306
  web:
    build:
      context: .
      dockerfile: Dockerfile-ruby
    command: ./bin/bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/my_project
    ports:
      - 3000:3000
    depends_on:
      - db

version: '2'

services:

db:

build:

context: .

dockerfile: Dockerfile-mysql

environment:

MYSQL_ROOT_PASSWORD: root

TZ: 'Asia/Tokyo'

ports:

- 3306:3306

web:

build:

context: .

dockerfile: Dockerfile-ruby

command: ./bin/bundle exec rails s -p 3000 -b '0.0.0.0'

volumes:

- .:/my_project

ports:

- 3000:3000

depends_on:

- db

これで再度ビルドすれば、MySQLの設定ファイルに追記された上で、MySQLが起動します。
余談ですが、下記コマンドで、バックグラウンドにてビルドから立ち上げまでできます。

$ docker-compose up -d --build

1	$ docker-compose up -d --build

フォアグラウンドでログなどを見たい場合は-dオプションをなくしてください。
下記コマンドでRubyコンテナとMySQLコンテナを両方停止させることができます。

$ docker-compose stop

1	$ docker-compose stop

Node.jsをRubyコンテナに組み込む

Rails 5.1からはwebpackerを使用することで、Vue.jsやReactなどを組み込むことができます。
ただ、Node.jsが必要などでRubyコンテナを立ち上げる際にもろもろインストールします。
下記の記事を参考にさせていただきました。

https://terakoya.site/dev/docker-mac-rails51-vuejs-setup/

Rubyコンテナ用のDockerfileに追記し、下記のようにしました。

FROM ruby:2.4.1
# シェルスクリプトとしてbashを利用
RUN rm /bin/sh && ln -s /bin/bash /bin/sh
# 必要なライブラリインストール
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev

# 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
# Node.jsをインストール
RUN curl -sL https://deb.nodesource.com/setup_7.x | bash - && apt-get install nodejs

# ワークディレクトリ設定
ENV ROOT_PATH /rails-vue-practice
RUN mkdir $ROOT_PATH
WORKDIR $ROOT_PATH
ADD Gemfile $ROOT_PATH/Gemfile
ADD Gemfile.lock $ROOT_PATH/Gemfile.lock
RUN bundle install
ADD . $ROOT_PATH

FROM ruby:2.4.1

# シェルスクリプトとしてbashを利用

RUN rm /bin/sh && ln -s /bin/bash /bin/sh

# 必要なライブラリインストール

RUN apt-get update -qq && apt-get install -y build-essential libpq-dev

# 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

# Node.jsをインストール

RUN curl -sL https://deb.nodesource.com/setup_7.x | bash - && apt-get install nodejs

# ワークディレクトリ設定

ENV ROOT_PATH /rails-vue-practice

RUN mkdir $ROOT_PATH

WORKDIR $ROOT_PATH

ADD Gemfile $ROOT_PATH/Gemfile

ADD Gemfile.lock $ROOT_PATH/Gemfile.lock

RUN bundle install

ADD . $ROOT_PATH

参考にさせていただいているRailsとVueの記事でもyarnを使用したパッケージ管理をしていたので、今回はyarnをインストールします。
Rails 5.1からnpmやyarnパッケージもデフォルトでサポートされているようですね。

また、Dockerfile内でENVを使用すると環境変数を設定できます。
プロジェクトへのパスなど、変数にしておくと後々楽かと思います。
（1度、パスの記述を間違えてビルド失敗したこともあるので。。。）

Webpackerを使用してVue.jsをインストール

さて、本項はRailsのことになります。
Rails 5.1から、rails newコマンドでプロジェクトを生成する際にwebpackオプションを使用することでVue.jsやReactなどを一緒にインストールしてくれます。
例えば、下記のようなコマンドです。

$ rails new my-project --webpack=vue

1	$ rails new my-project --webpack=vue

これは後から追加することも可能です。
その場合はwebpackerのGemを追加します。

gem 'webpacker', '~> 2.0'

1	gem 'webpacker', '~> 2.0'

これでbundle installすると、webpackを生成するrailsコマンドを使用することができます。
（ex. webpacker:install）
Rubyコンテナにてrailsコマンドを実行する際には、docker-compose runコマンドを使用します。
bundle installする場合は下記になります。

$ docker-compose run web bundle install

1	$ docker-compose run web bundle install

まずはWebpackerをインストールします。

$ docker-compose run web rails webpacker:install

1	$ docker-compose run web rails webpacker:install

これでWebPack関連ファイルがインストールされます。

次にVue.jsをインストールします。

$ docker-compose run web rails webpacker:install:vue

1	$ docker-compose run web rails webpacker:install:vue

これで、さらにVue.js関連のファイルが作成されるかと思います。

Vue.jsが動かない

実際にVue.jsのコードを書いて実行すると、下記のようなエラーが出て詰まりました。

You are using the runtime-only build of Vue where the template compiler is not available.
Either pre-compile the templates into render functions, or use the compiler-included build.

1 2	You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

下記の記事にもまとめられていますが、完全コンパイルする必要があるそうです。

Rails5.1でVue.jsで単一ファイルコンポーネントのエラーがでる（You are using the runtime-only build of Vue where the template compiler is not available）

この場合、config/webpack/shared.jsに以下のように追記してエイリアスを設定します。

   ],
  
    resolve: {
 +    alias: {
 +      'vue$': 'vue/dist/vue.esm.js'
 +    },
      extensions: settings.extensions,
      modules: [
        resolve(settings.source_path),

resolve: {

+ alias: {

+ 'vue$': 'vue/dist/vue.esm.js'

+ },

extensions: settings.extensions,

modules: [

resolve(settings.source_path),

devサーバーを一緒に立ち上げる

devサーバーを設定しておけば、JSをいちいちコンパイルしなくても、変更を監視して勝手にコンパイルしてくれます。
参考にさせていただいた記事でも紹介されていましたが、作成の仕方は下記の記事で記載されております。

Introducing Webpacker

記事に従って必要なファイルを作成していきます。

gem 'foreman'

1	gem 'foreman'

Gemfileに記載したら、bundle installします。

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

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

これでrails serverとwebpack-dev-serverを起動させることができます。
次に、bin/serverというファイルを新たに作成し、Procfile.devに記載されたコマンドを実行するようにします。

#!/bin/bash -i
bundle install
bundle exec foreman start -f Procfile.dev

#!/bin/bash -i

bundle install

bundle exec foreman start -f Procfile.dev

これで普通は終了ですが、今回はDockerを使用しているので、docker-compose.ymlを修正します。

     build:
        context: .
        dockerfile: Dockerfile-ruby
 -    command: ./bin/bundle exec rails s -p 3000 -b '0.0.0.0'
 +    command: ./bin/server
      volumes:
        - .:/rails-vue-practice
      ports:
        - 3000:3000
 +      - 8080:8080
      depends_on:
        - db

build:

context: .

dockerfile: Dockerfile-ruby

- command: ./bin/bundle exec rails s -p 3000 -b '0.0.0.0'

+ command: ./bin/server

volumes:

- .:/rails-vue-practice

ports:

- 3000:3000

+ - 8080:8080

depends_on:

- db

8080ポートでdevサーバーが起動しているので、そちらも通してあげます。
これで動画の通りにいけるかと思います。

さいごに

今回は主にDockerを使用して、Rails 5.1で作るVue.jsアプリケーションを実施させていただいた記事になります。
ただ、システムテストに関しまして、ChromeDriverがうまく適用できず、うまくいっておりません。
こちらは検討します。（他にも方法があるようですが。。。）

また、参考記事としてDockerでVue.jsを実施したものを紹介させていただきます。
Webpack and Docker for Development and Deployment

日	月	火	水	木	金	土
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

DockerでRails + Vue.jsの環境を作ってみる

はじめに

前回までのあらすじ

今回の趣旨

環境

MySQLのUTF-8対応

Node.jsをRubyコンテナに組み込む

Webpackerを使用してVue.jsをインストール

Vue.jsが動かない

devサーバーを一緒に立ち上げる

さいごに

フォロー

アプリ情報