Edited at

とっとるびー第27回で実施するハンズオン「Ruby on Rails 5.1 + Vue 2.4」で使用するDockerコンテナの準備方法

More than 1 year has passed since last update.

簡単なチャットを作ります。


Dockerのインストール


  • まずはDockerをインストールしてください。

  • 下記はmacOSでのDockerのインストール方法の例です。

$ brew cask install docker


Dockerイメージの取得


  • 今回のハンズオンで使えそうなDockerイメージをすずむらさんがハケーンして下さいましたのでこれを使います。

  • 下記のコマンドでDockerイメージを取得します。

$ docker pull sweorg/xenial-ruby2.2.2-node6.9.1-yarn0.22.0:v1


Dockerコンテナの作成と起動


  • 下記のコマンドでイメージ一覧を表示して上記で取得したイメージのIDを確認します。

  • この例では c265f8fbaaba が確認できます。

$ docker images                         

REPOSITORY TAG IMAGE ID CREATED SIZE
sweorg/xenial-ruby2.2.2-node6.9.1-yarn0.22.0 v1 c265f8fbaaba 7 weeks ago 1.04GB


  • 下記のコマンドでローカルに今回のハンズオンで使用するディレクトリ hands-on-with-rails-and-vue を作成してください。このディレクトリをDockerコンテナにマウントしてソースコードの編集を行います。

  • 以下の例では /Users/masayuki/hands-on-with-rails-and-vue にディレクトリを作成しています。

$ cd

$ mkdir hands-on-with-rails-and-vue
$ cd $_
$ pwd
/Users/masayuki/hands-on-with-rails-and-vue


  • イメージからコンテナを作成して起動します。


  • -p オプションによるポート3000と8080のフォワーディング設定は、それぞれrails serverとbin/webpack-dev-serverがlistenするので必要です。


  • -v オプションによるディレクトリのバインドも必要です。ローカルで編集してDockerコンテナでRailsを動作させるためです。

  • コンテナの /home/circle/ はイメージが提供しているデフォルトの設定なので変えないでください。

$ docker run -itd -p 3000:3000 -p 8080:8080 -v ~/hands-on-with-rails-and-vue:/home/circle/hands-on-with-rails-and-vue c265f8fbaaba


Dockerコンテナへの接続


  • コンテナ一覧を表示して上記で作成したコンテナのIDを確認します。下記の例では 86360d2bc784 です。

$ docker ps -a

CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
86360d2bc784 c265f8fbaaba "/bin/bash" 4 seconds ago Up 3 seconds 0.0.0.0:3000->3000/tcp, 0.0.0.0:8080->8080/tcp heuristic_swartz


  • コンテナIDを指定して端末をコンテナに接続します。

docker attach 86360d2bc784


Dockerコンテナ上での作業


  • ここから先は接続したDockerコンテナで作業します。

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

$ gem install bundler rails

Railsプロジェクトの作成

$ cd hands-on-with-rails-and-vue

$ rails new . --skip-turbolinks --webpack=vue
$ yarn add vue-i18n vue-router vuex axios es6-promise bootstrap-vue

Railsサーバの起動とJavaScriptのビルドサーバの起動


  • 後ろに & を付けるとそれぞれのコマンドをバックグラウンドで動作するジョブとして実行します。


  • jobs でバックグラウンドで動作しているジョブIDの一覧を表示できます。


  • fg ジョブIDでジョブをフォアグラウンドに変更できます。

$ bundle exec rails server &

$ bundle exec bin/webpack-dev-server &


  • 今回のハンズオンで使うモデルやらの作成とマイグレーションを実行します。

$ bundle exec rails g scaffold Message content:text

$ bundle exec rails db:migrate


  • app/views/layouts/application.html.erb の <head></head> に以下を追加します。

<%= javascript_pack_tag 'hello_vue' %>

<%= stylesheet_pack_tag 'hello_vue' %>


  • ここまできたらホストマシンで http://localhost:3000/messages にアクセスします。

  • 以下のような画面が表示されれば環境構築はひとまず完成です。