
HOME > Web > Docker for MacでRails5.1+Vue.jsの環境をサクッと構築
つい先日Railsの最新バージョンである5.1のベータ版がリリースされました。Rails5.1では様々な機能追加があり、目玉機能であるwebpacker
を使って最近流行りのフロントエンドライブラヂのVue.jsやReact.jsの環境を簡単に構築できるようになりました。
Dockerを使う事によりVagrantといった仮想環境を作って一から構築するよりも早く、さらにDockerなら環境の構築・削除がとても簡単にできます。
今回はその環境をDockerを使って簡単にかつ素早く構築する方法を紹介いたします。
まずDocker for MacをインストールしてMacでDockerが使えるようにします。 Docker for Macは非Linux環境でサクッとLinux環境を構築するのに適したコンテナを作成できるツールです。
https://docs.docker.com/docker-for-mac/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 | Dockerの実行環境そのもの |
docker-compose | 複数のコンテナを利用して一つのサービスを提供する場合に YAML 一発で構築出来るようにするツール |
docker-machine | dockerをバーチャルホストや Mac、Windows でも使えるようにしてくれるもの |
ターミナルを開いて実際にインストールされたか確認してみましょう。
ターミナルで実行
docker --version
docker-compose --version
docker-machine --version
下図のようにバージョン情報が確認できれば正常にインストールできています。
それでは続いてDockerを使ってRails環境を構築していきます。
今回は下記の環境でRails5.1を構築していきます。
それではRails環境を構築するフォルダを作成します。適当な箇所でフォルダを作成してください。
ターミナルでコマンド実行
cd ~/Documents
mkdir docker-rails51
cd docker-rails51
作成したフォルダ内に環境構築のファイルを作成していきます。
今回私はVisual Studio Codeを使って構築していきますので、このフォルダをVisual Studio Codeで開いておきます。
Visual Studio Codeはcode
コマンドで開く事ができます。
ターミナルでコマンド実行
code ./
まずは、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のイメージを元に、下記の内容をインストールしています。
Rails5.1からはwebpakerというライブラリからVue.jsを簡単に導入できるようになり、最新のNode.js環境と、新しいNode.jsのパッケージ管理であるyarn
というツールが必要ですのでそれをインストールしています。
続いて、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のイメージ・コンテナをオーケストレーションするツールである、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プロジェクトのファイル群が追加されます。
続いて、今回の目的である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が追加されている事を確認しましょう。
次に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
下図の画面が出れば無事にデータベースが作成されたことになります。
これでrails webpacker
コマンドが使えるようになっているはずですので実行します。
ターミナルでコマンド実行
docker-compose run web rails webpacker:install
下記のような出力が出ていればOKです。
Railsプロジェクトのnode_module内にもwebpacker関連のファイル群がインポートされているはずです。
次にVue.jsを使うためのrails webpacker:install:vue
コマンドを実行します。
ターミナルでコマンド実行
docker-compose run web rails webpacker:install:vue
処理が完了するとjavascript/package
の中にVue.js関連のファイルが作られ、またnode_modules
の中にもライブラリが追加されます。
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関連のコンポーネントをネイティブのJavascriptにコンパイルするためのwebpackを起動してみます。
Rails5.1からはbin/webpack
をコマンド実行する事によりwebpackによるビルドが開始されます。
ターミナルでコマンド実行
docker-compose run web bin/webpack
下記のように表示されれば無事Vue.jsのコンポーネントがwebpackによりビルドされています。
docker-compose up
コマンドでサービスを起動します。
docker-compose up
下記のようなログが出力されていればOKデス
これでRailsアプリのサービスが起動しているはずですので、下記URLにアクセスします。
http://localhost:3000このようにHello Vue
を表示されれば無事Vue.jsが動いています。
このようにRails5.1からVue.jsやReact.jsなどの流行りのフロントエンド開発の環境を手軽に連携して開発できるようになりました。 昨今のJavascriptでのフロントエンド開発は環境を構築するのが一苦労ですが、DockerとRails5.1を使うと比較的に楽に構築できるのでおすすめです。
Gitalking ...