簡単なチャットを作ります。
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にアクセスします。 - 以下のような画面が表示されれば環境構築はひとまず完成です。
