Help us understand the problem. What is going on with this article?

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

More than 3 years have 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 にアクセスします。
  • 以下のような画面が表示されれば環境構築はひとまず完成です。

Kobito.9LmkkK.png

61503891
寿司の上の部分って美味しいですよね。
http://msyk.hgsn.info
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away