はじめに
前回までのあらすじ
Vue.jsの勉強を始めたtonnyであったが、そろそろRailsの中に組み込んでみたいと思いたつ。
最近Dockerも勉強しているため、せっかくなので、Dockerで環境構築をしてみることにした。
前回までの記事はこちら。
今回の趣旨
下記のブログ、および動画でRails + Vue.jsの学習をしました。
非常に分かりやすいため、オススメです。
【動画付き】Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～
今回はこちらの記事内容をDockerを使用して実施しました。
そのため、今回はDockerを使って、Rails + Vue.jsの環境を作った話となります。
環境
- Docker
1 2 3 4 5 6 | $docker--version Docker version17.03.0-ce,build60ccb22 $docker-compose--version docker-compose version1.11.2,build dfed245 $docker-machine--version docker-machine version0.10.0,build76ed2a |
- Ruby: 2.4.1
- Ruby on Rails: 5.1.2
- MySQL: 5.7.17
- Node.js: 7.10.0
- Vue.js: 2.3.4
DBは使用しませんが、前回の記事のものを流用しようと考えたので、使っています。
（また、公式のMySQLイメージを使用すると日本語が文字化けしてしまうので、その対応も記載したいと思います。）
MySQLのUTF-8対応
本項は、今回の記事の内容に必須ではありません。
前回の記事にて、Dockerの公式チュートリアルのことを取り上げました。
ただ、MySQLは公式イメージをそのままプルして使用しているだけでした。
公式イメージはデフォルトだとUTF-8対応していないので、下記の記事を参考にさせていただき、新しくMySQL用のDockerfileを作成しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | FROM mysql:latest RUN apt-get update RUN apt-get install-ylocales RUN rm-rf/var/lib/apt/lists/* ENV LC_ALL ja_JP.UTF-8 RUN{\ echo'[mysqld]';\ echo'character-set-server=utf8mb4';\ echo'collation-server=utf8mb4_general_ci';\ echo'[client]';\ echo'default-character-set=utf8mb4';\ }>/etc/mysql/conf.d/charset.cnf |
なお、RubyコンテナもDockerfile-rubyとリネームします。
合わせてdocker-compose.ymlを修正します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | version: '2' services: db: build: context: . dockerfile: Dockerfile-mysql environment: MYSQL_ROOT_PASSWORD: root TZ: 'Asia/Tokyo' ports: - 3306:3306 web: build: context: . dockerfile: Dockerfile-ruby command: ./bin/bundle exec rails s -p 3000 -b '0.0.0.0' volumes: -.:/my_project ports: - 3000:3000 depends_on: -db |
これで再度ビルドすれば、MySQLの設定ファイルに追記された上で、MySQLが起動します。
余談ですが、下記コマンドで、バックグラウンドにてビルドから立ち上げまでできます。
1 | $docker-compose up-d--build |
フォアグラウンドでログなどを見たい場合は-dオプションをなくしてください。
下記コマンドでRubyコンテナとMySQLコンテナを両方停止させることができます。
1 | $docker-compose stop |
Node.jsをRubyコンテナに組み込む
Rails 5.1からはwebpackerを使用することで、Vue.jsやReactなどを組み込むことができます。
ただ、Node.jsが必要などでRubyコンテナを立ち上げる際にもろもろインストールします。
下記の記事を参考にさせていただきました。
https://terakoya.site/dev/docker-mac-rails51-vuejs-setup/
Rubyコンテナ用のDockerfileに追記し、下記のようにしました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | FROM ruby:2.4.1 # シェルスクリプトとしてbashを利用 RUN rm/bin/sh&&ln-s/bin/bash/bin/sh # 必要なライブラリインストール RUN apt-get update-qq&&apt-get install-ybuild-essential libpq-dev # yarnパッケージ管理ツールインストール RUN apt-get update&&apt-get install-ycurl 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-yyarn # Node.jsをインストール RUN curl-sL https://deb.nodesource.com/setup_7.x | bash - && apt-get install nodejs # ワークディレクトリ設定 ENV ROOT_PATH/rails-vue-practice RUN mkdir$ROOT_PATH WORKDIR$ROOT_PATH ADD Gemfile$ROOT_PATH/Gemfile ADD Gemfile.lock$ROOT_PATH/Gemfile.lock RUN bundle install ADD.$ROOT_PATH |
参考にさせていただいているRailsとVueの記事でもyarnを使用したパッケージ管理をしていたので、今回はyarnをインストールします。
Rails 5.1からnpmやyarnパッケージもデフォルトでサポートされているようですね。
また、Dockerfile内でENVを使用すると環境変数を設定できます。
プロジェクトへのパスなど、変数にしておくと後々楽かと思います。
（1度、パスの記述を間違えてビルド失敗したこともあるので。。。）
Webpackerを使用してVue.jsをインストール
さて、本項はRailsのことになります。
Rails 5.1から、rails newコマンドでプロジェクトを生成する際にwebpackオプションを使用することでVue.jsやReactなどを一緒にインストールしてくれます。
例えば、下記のようなコマンドです。
1 | $rails newmy-project--webpack=vue |
これは後から追加することも可能です。
その場合はwebpackerのGemを追加します。
1 | gem'webpacker','~> 2.0' |
これでbundle installすると、webpackを生成するrailsコマンドを使用することができます。
（ex. webpacker:install）
Rubyコンテナにてrailsコマンドを実行する際には、docker-compose runコマンドを使用します。bundle installする場合は下記になります。
1 | $docker-compose run web bundle install |
まずはWebpackerをインストールします。
1 | $docker-compose run web rails webpacker:install |
これでWebPack関連ファイルがインストールされます。
次にVue.jsをインストールします。
1 | $docker-compose run web rails webpacker:install:vue |
これで、さらにVue.js関連のファイルが作成されるかと思います。
Vue.jsが動かない
実際にVue.jsのコードを書いて実行すると、下記のようなエラーが出て詰まりました。
1 2 | You are using the runtime-only build of Vue where the template compiler isnotavailable. Either pre-compile the templates into render functions,orusethe compiler-included build. |
下記の記事にもまとめられていますが、完全コンパイルする必要があるそうです。
この場合、config/webpack/shared.jsに以下のように追記してエイリアスを設定します。
1 2 3 4 5 6 7 8 9 | ], resolve: { + alias: { + 'vue$': 'vue/dist/vue.esm.js' + }, extensions: settings.extensions, modules: [ resolve(settings.source_path), |
devサーバーを一緒に立ち上げる
devサーバーを設定しておけば、JSをいちいちコンパイルしなくても、変更を監視して勝手にコンパイルしてくれます。
参考にさせていただいた記事でも紹介されていましたが、作成の仕方は下記の記事で記載されております。
記事に従って必要なファイルを作成していきます。
1 | gem'foreman' |
Gemfileに記載したら、bundle installします。
1 2 | web:bundle exec railss-b0.0.0.0-p3000 webpacker:./bin/webpack-dev-server |
これでrails serverとwebpack-dev-serverを起動させることができます。
次に、bin/serverというファイルを新たに作成し、Procfile.devに記載されたコマンドを実行するようにします。
1 2 3 | #!/bin/bash -i bundle install bundle exec foreman start-fProcfile.dev |
これで普通は終了ですが、今回はDockerを使用しているので、docker-compose.ymlを修正します。
1 2 3 4 5 6 7 8 9 10 11 12 | build: context: . dockerfile: Dockerfile-ruby - command: ./bin/bundle exec rails s -p 3000 -b '0.0.0.0' + command: ./bin/server volumes: - .:/rails-vue-practice ports: - 3000:3000 + - 8080:8080 depends_on: - db |
8080ポートでdevサーバーが起動しているので、そちらも通してあげます。
これで動画の通りにいけるかと思います。
さいごに
今回は主にDockerを使用して、Rails 5.1で作るVue.jsアプリケーションを実施させていただいた記事になります。
ただ、システムテストに関しまして、ChromeDriverがうまく適用できず、うまくいっておりません。
こちらは検討します。（他にも方法があるようですが。。。）
また、参考記事としてDockerでVue.jsを実施したものを紹介させていただきます。
Webpack and Docker for Development and Deployment
![](<iframe src="https://rcm-fe.amazon-adsystem.com/e/cm?o=9&p=12&l=ur1&category=amazonrotate&f=ifr&linkID=b58084340147c66533fd679fc7896f47&t=nukky1985-22&tracking_id=nukky1985-22" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>)
![](<iframe src="https://rcm-fe.amazon-adsystem.com/e/cm?o=9&p=42&l=ur1&category=literaturebooks&banner=0E3R1FMFGRH02M3C66R2&f=ifr&linkID=f9a0550b8551699876e6550703fc853b&t=nukky1985-22&tracking_id=nukky1985-22" width="234" height="60" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>)