Docker for MacでRails5.1+Vue.jsの環境をサクッと構築

つい先日Railsの最新バージョンである5.1のベータ版がリリースされました。Rails5.1では様々な機能追加があり、目玉機能であるwebpackerを使って最近流行りのフロントエンドライブラヂのVue.jsやReact.jsの環境を簡単に構築できるようになりました。

Dockerを使う事によりVagrantといった仮想環境を作って一から構築するよりも早く、さらにDockerなら環境の構築・削除がとても簡単にできます。

今回はその環境をDockerを使って簡単にかつ素早く構築する方法を紹介いたします。

Docker for Macのインストール

まずDocker for MacをインストールしてMacでDockerが使えるようにします。 Docker for Macは非Linux環境でサクッとLinux環境を構築するのに適したコンテナを作成できるツールです。

Get Docker for Mac [stable]ボタンをクリックしてDocker.dmgをダウンロードします。

Docker.dmgをダブルクリックします。

DockerのアプリフォルダをApplicationsフォルダに移動します。これでDocker for Macのインストールは完了です。

ApplicationsフォルダからDockerをダブルクリックして起動してください。

初回起動時は下記の画面が表示されます。Nextをクリックします。

Docker for Macの起動には管理者権限が必要という事です。OKボタンをクリックして管理者のパスワードを入力します。

パスワード入力してOKをクリックするとステータスバーにDockerのアイコンが追加され下図のポップアップが表示されます。 Got it!ボタンを押して閉じましょう。

ちなみにステータスバーのDockerのアイコンをクリックすると各種設定を行えます。 Dockerの起動状態や、停止など行えます。

これでDockerを使うための下記のツールがインストールされた状態です。

ターミナルを開いて実際にインストールされたか確認してみましょう。

ターミナルで実行

docker --version
docker-compose --version
docker-machine --version

下図のようにバージョン情報が確認できれば正常にインストールできています。

それでは続いてDockerを使ってRails環境を構築していきます。

DockerでRails5.1環境インストール

今回は下記の環境でRails5.1を構築していきます。

• Ruby 2.4.0
• Rails 5.1.0.beta1
• PostgreSQL

プロジェクトフォルダの作成

それではRails環境を構築するフォルダを作成します。適当な箇所でフォルダを作成してください。

ターミナルでコマンド実行

cd ~/Documents
mkdir docker-rails51
cd docker-rails51

作成したフォルダ内に環境構築のファイルを作成していきます。 今回私はVisual Studio Codeを使って構築していきますので、このフォルダをVisual Studio Codeで開いておきます。 Visual Studio Codeはcodeコマンドで開く事ができます。

ターミナルでコマンド実行

code ./

Dockerfileの作成

まずは、Dockerfileを作成していきます。

ターミナルでコマンド実行

touch Dockerfile

Dockerfileを開いて下記を追加してください。

Dockerfile

FROM ruby:2.4.0

# シェルスクリプトとして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

# ワークディレクトリ設定
RUN mkdir /myapp
WORKDIR /myapp
ADD Gemfile /myapp/Gemfile
ADD Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
ADD . /myapp

今回はDockerファイルではruby2.4.0のイメージを元に、下記の内容をインストールしています。

• シェルスクリプトとしてbashを利用
• 必要なライブラリインストール（build-essential、libpq-dev）
• yarnインストール
• Node.jsインストール（Ver7）

Rails5.1からはwebpakerというライブラリからVue.jsを簡単に導入できるようになり、最新のNode.js環境と、新しいNode.jsのパッケージ管理であるyarnというツールが必要ですのでそれをインストールしています。

Gemfile・Gemfile.lockの作成

続いて、Railsアプリの各種gemをインストールするためにGemfileとGemfile.lockを作成します。

ターミナルでコマンド実行

touch Gemfile

Gemfileにはまず、Rails5.1環境をインストールするよう下記を追加しておきます。

Gemfile

source 'https://rubygems.org'
gem 'rails', '~> 5.1.0.beta1'

Gemfile.lockは何も入力していない状態のファイルを予め作成しておきます。

ターミナルでコマンド実行

touch Gemfile.lock

docker-compose.ymlの作成

Dockerのイメージ・コンテナをオーケストレーションするツールである、Docker Composeを使ってRails環境をDocker上に構築していきます。 Docker Composeの設定内容はdocker-compose.ymlというファイルを作って定義します。

ターミナルでコマンド実行

touch docker-compose.yml

docker-compose.yml

version: '2'
services:
  db:
    image: postgres
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db

docker-compose.ymlの内容を実際に構築するため、下記のコマンドを実行します。

ターミナルでコマンド実行

docker-compose run web bundle exec rails new . --force --database=postgresql --skip-bundle

この処理でローカルに保存していないイメージをダウンロードしたり、Dockerfileの初期化処理をするのでしばらく時間がかかります。 docker-compose runコマンドで対象のコンテナに対してコマンドを実行できるようになっており、webのコンテナに対してbundle exec rails new . --force --database=postgresql --skip-bundleのrailsコマンドを実行してRailsプロジェクトを作成しています。

コマンド処理が完了すると下図のとおり、プロジェクトフォルダ内にRailsプロジェクトのファイル群が追加されます。

Gemfileの修正

続いて、今回の目的であるVue.jsでフロントエンド開発できる準備を整えていきます。 先ほどのrailsコマンドでGemfileに色々書き込まれていると思います。そのGemfileをさらに追記していきます。

Gemfile

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.0.beta1'
# Use postgresql as the database for Active Record
gem 'pg', '~> 0.18'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# Use SCSS for stylesheets
gem 'sass-rails', github: "rails/sass-rails"

# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
//▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼コメントアウト▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
gem 'therubyracer', platforms: :ruby
//▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲コメントアウト▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
//▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼追加▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
gem 'webpacker', github: 'rails/webpacker'
//▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲追加▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks

therubyracerとRails5.1での新ツールであるwebpackerを追加しています。 追加できたらbundle updateとdocker-compose buildで環境を再構築します。

ターミナルでコマンド実行

docker-compose run web bundle update
docker-compose build

また、Railsプロジェクト内にもwebpackerが追加されている事を確認しましょう。

database.ymlの修正

次にRailsプロジェクトのデータベース設定をしていきます。今回はdocker-composeで一緒に構築したpostgresのデータベースコンテナに対しての接続設定をconfig/database.ymlに追加しています。

config/database.yml

development: &default
  adapter: postgresql
  encoding: unicode
  database: myapp_development
  pool: 5
  username: postgres
  password:
  host: db

test:
  <<: *default
  database: myapp_test

データベースの作成

次にRailsプロジェクトようのデータベースを作成するコマンドrake db:createをdocker-compose runで実行します。

ターミナルでコマンド実行

docker-compose run web rake db:create

下図の画面が出れば無事にデータベースが作成されたことになります。

webpackerインストール

これでrails webpackerコマンドが使えるようになっているはずですので実行します。

ターミナルでコマンド実行

docker-compose run web rails webpacker:install

下記のような出力が出ていればOKです。

Railsプロジェクトのnode_module内にもwebpacker関連のファイル群がインポートされているはずです。

webpackerにてVue.js環境インストール

次にVue.jsを使うためのrails webpacker:install:vueコマンドを実行します。

ターミナルでコマンド実行

docker-compose run web rails webpacker:install:vue

処理が完了するとjavascript/packageの中にVue.js関連のファイルが作られ、またnode_modulesの中にもライブラリが追加されます。

hello_vue.jsを表示する画面を作成

webpackerを使ってRails環境にVue.jsの関連ファイルが生成されました。その中のhello_vue.jsの内容をRailsのViewテンプレートで呼び出して表示させてみます。

今後はこのpackの中のJavascriptファイルとvueファイルを編集してVue.jsのフロントエンドを開発していきます。 それでは、rails gコマンドでホーム画面を表示させるためのコントローラークラスを作成します。

ターミナルでコマンド実行

docker-compose run web rails g controller Home index

下記のファイルが追加されます。

次に、先ほどのrails webpacker:vueコマンドで追加されたVue.jsのUIコンポーネントであるhello_vueを表示させるようにしてみます。 app/views/home/index.html.erbを開いてjavascript_pack_tagを追加します。

app/views/home/index.html.erb

//▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼削除▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>
//▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲削除▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
//▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼追加▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
<h1><%= javascript_pack_tag 'hello_vue' %></h1>
//▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲追加▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲

javascript_pack_tagを使う事により、packフォルダ内にあるVue.jsコンポーネントクラスを読み込むためのscriptタグが追加されます。

次にルーティング管理のファイルconfig/routes.rbにて先ほど作ったホーム画面のルーティング設定を追加しておきます。

config/routes.rb

Rails.application.routes.draw do
  //▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼削除▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
  get 'home/index'
  //▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲削除▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
  //▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼追加▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
  root to: 'home#index'
  //▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲追加▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

Vue.jsファイルのビルド

それでは、Vue.js関連のコンポーネントをネイティブのJavascriptにコンパイルするためのwebpackを起動してみます。 Rails5.1からはbin/webpackをコマンド実行する事によりwebpackによるビルドが開始されます。

ターミナルでコマンド実行

docker-compose run web bin/webpack

下記のように表示されれば無事Vue.jsのコンポーネントがwebpackによりビルドされています。

Railsサービス起動

docker-compose upコマンドでサービスを起動します。

docker-compose up

下記のようなログが出力されていればOKデス

これでRailsアプリのサービスが起動しているはずですので、下記URLにアクセスします。

このようにHello Vueを表示されれば無事Vue.jsが動いています。

このようにRails5.1からVue.jsやReact.jsなどの流行りのフロントエンド開発の環境を手軽に連携して開発できるようになりました。 昨今のJavascriptでのフロントエンド開発は環境を構築するのが一苦労ですが、DockerとRails5.1を使うと比較的に楽に構築できるのでおすすめです。