Vue.js | RemoNote

Rails5.2 + Docker環境にVue.js (Webpacker) を導入する

rails docker vuejs

既存のRails + Docker環境にVue.jsを導入しましたので、その手順をメモしておきます。Rails 5.1からはwebpackerを使用することで、Vue.jsやReactなどのモダンなJSフレームワークを組み込むことができるようになりましたので、そちらを使っていきます。

Dockerfileとdocker-compose.ymlの設定

Rubyコンテナを立ち上げる際に必要となるライブラリ（build-essential, libpq-dev, yarn, Node.js）をインストールします。

Dockerfile

FROM ruby:2.5.1

RUN rm /bin/sh && ln -s /bin/bash /bin/sh

RUN apt-get update -qq && apt-get install -y build-essential libpq-dev

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

RUN curl -sL https://deb.nodesource.com/setup_8.x | bash - && \

apt-get install nodejs

ENV APP_HOME /myapp

RUN mkdir -p $APP_HOME

WORKDIR $APP_HOME

ADD Gemfile $APP_HOME/Gemfile

ADD Gemfile.lock $APP_HOME/Gemfile.lock

RUN bundle install

ADD . $APP_HOME

続いてdocker-compose.ymlです。

docker-compose.yml

version: '3'

services:

db:

image: postgres:latest

web:

build: .

command: bundle exec rails s -p 4000 -b '0.0.0.0'

volumes:

- .:/myapp

ports:

- "4000:4000"

depends_on:

- db

tty: true

コンテナの起動

1	$ docker-compose build

webpackerの導入

Gemfile に以下を追加し、bundle します。

Gemfile

1	gem 'webpacker', github: 'rails/webpacker'

1	$ docker-compose run web bundle install

これでrails webpackerコマンドが使えるようになりました。

1	$ docker-compose run web rails webpacker:install

これで以下のWebPack関連ファイルが生成されました。
・.babelrc （babel設定ファイル）
・.postcssrc.yml （PostCSS設定ファイル）
・app/javascript/packs/application.js （エントリーポイントファイル）
・bin/webpack （webpackのビルドスクリプト）
・bin/webpack-dev-server （ビルドサーバーの起動スクリプト）
・config/webpack/development.js （開発環境設定ファイル）
・config/webpack/environment.js （共通環境設定ファイル）
・config/webpack/production.js （プロダクション環境設定ファイル）
・config/webpack/test.js （テスト環境設定ファイル）
・config/webpacker.yml （webpacker設定ファイル）

Vue.jsの導入

1	$ docker-compose run web rails webpacker:install:vue

このコマンドでは以下のVue.js関連のファイルが生成されました。
・app/javascript/app.vue （Vueコンポーネントファイル）
・app/javascript/packs/hello_vue.js （エントリーポイントファイル）
・config/webpack/loaders/vue.js （Vue.jsの環境設定ファイル）

Vue.jsファイルのビルド

それでは、Vue.js関連のコンポーネントをJavascriptにコンパイルするため、bin/webpackコマンド実行しビルドします。

1	$ docker-compose run web bin/webpack

ここで「Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-preset-env’」のエラーが出た場合の対象法はこちら。

viewに次の記述をすると、app/javascript/pack以下にあるhello_vueファイルが呼び出されます！

1	<%= javascript_pack_tag 'hello_vue' %>

そして railsを起動して、”Hello Vue”が表示されたら成功です！

1	$ docker-compose up

webpack-dev-server

ただ、今のままだとVue.js用のJSを変更するたびに、毎回bin/webpackを実行してコンパイルしなければいけません。ですので、JSを変更したらすぐに変更が反映されるように、devサーバーを設定しておきます。
まず、ルートディレクトリにProcfile.devというファイルを以下のように作成します。

Procfile.dev

web: bundle exec rails s

# watcher: ./bin/webpack-watcher

hot: ./bin/webpack-dev-server

次に、binディレクトリの下にserverという名前のファイルを以下のように作成します。

bin/server

#!/bin/bash -i

bundle install

bundle exec foreman start -f Procfile.dev

また、serverではforemanを使うので、Gemfileに追加します。foremanはProcfile を読み込み、複数のプロセスを管理できるツールで、rails serverとwebpack-dev-serverを一度に起動できます。

Gemfile

group :development do

gem 'foreman'

end

config/environments/development.rbに以下を追加します。

config/environments/development.rb

1	config.x.webpacker[:dev_server_host] = "http://localhost:8080"

それらに合わせてdocker-compose.ymlを修正します。

docker-compose.yml

build: .

- command: bundle exec rails s -p 4000 -b '0.0.0.0'

+ command: ./bin/server

volumes:

- .:/myapp

ports:

- - "4000:4000"

+ - "8080:8080"

depends_on:

これでjavascriptの変更が、即座にブラウザに反映されるようになりました！

以上です！

【Vue.js】ディレクティブをいろいろ使ってみる

Vue.jsのディレクティブ（Directive）を学習を兼ねて jsfiddle でいろいろと使ってみました！よろしければ、動作させてみてください！

v-model

インプットデータをバインディングするディレクティブです。入力ボックスのデータをリアルタイムで同期できます。

次はtextareaで複数行入力する場合です。

checkboxの場合です。

SVGのデータバインディング

circleタグにおいて、中心からの半径を定義してる「r」の値を、DOM操作をしています。スライダーを動かすと”radius”の値と同期してcircleが変化します。

v-on

v-onディレクティブでは、DOMイベントを受け取ります。次の例ではクリックイベントでメソッドが呼ばれて、アラートが出ます。
v-on:clickは@clickに省略できます。

v-for, v-if

v-on:changeで _set_animal メソッドを呼んで、一つ目のセレクトに対して、二つ目のセレクトメニューの中身が変わります。v-forでは配列のインデックスを取得して、v-if=”selected_types.length > 0″のところで条件分岐しています。

v-transition

v-transitionディレクティブは、v-ifやv-showと組み合わせて状態を変化させます。vue.jsのトランジションには「enter」と「leave」の２つのフェーズが有り、DOM追加時にv-enter、削除時にv-leaveのトランジションクラスが付与されます。

次の例で使用されているv-enter-activeとv-leave-activeは、トランジション全体となり、追加される時のフェーズはv-enterからv-enter-to、削除される時はv-leaveからv-leave-toのトランジションクラスが付与されます。
同じ要素をvi-ifでグループ化する場合、keyを分ける必要があります。

参考にさせていただいたのはこちらの書籍です。

基礎から学ぶ Vue.js

bin/webpack-dev-serverコマンドで「Cannot destructure property `compile` of ‘undefined’ or ‘null’」となる対処

Rails + Docker + Vue.jsの環境構築を行なっている時に、bin/webpack-dev-serverコマンドを実行すると、「TypeError: Cannot destructure property compile of ‘undefined’ or ‘null’.」とエラーが出たのでその対処です。

実行環境はこちらです

ruby 2.5.1

rails 5.2.1

webpacker 4.0.0

Node: v8.11.4

エラー内容

$ docker-compose run web bin/webpack-dev-server

Starting myapp_db_1 ... done

/myapp/node_modules/webpack-dev-server/bin/webpack-dev-server.js:363

throw err;

TypeError: Cannot destructure property `compile` of 'undefined' or 'null'.

at addHooks (/myapp/node_modules/webpack-dev-server/lib/Server.js:103:49)

at new Server (/myapp/node_modules/webpack-dev-server/lib/Server.js:116:5)

at startDevServer (/myapp/node_modules/webpack-dev-server/bin/webpack-dev-server.js:355:14)

at processOptions (/myapp/node_modules/webpack-dev-server/bin/webpack-dev-server.js:309:5)

at Object.<anonymous> (/myapp/node_modules/webpack-dev-server/bin/webpack-dev-server.js:424:1)

at Module._compile (module.js:652:30)

at Object.Module._extensions..js (module.js:663:10)

at Module.load (module.js:565:32)

at tryModuleLoad (module.js:505:12)

at Function.Module._load (module.js:497:3)

at Function.Module.runMain (module.js:693:10)

at startup (bootstrap_node.js:191:16)

at bootstrap_node.js:612:3

解決方法

こちらのissuesにあがっていました。https://github.com/rails/webpacker/issues/1303
webpack-dev-serverのバージョンをダウングレードすればよいとのことで、yarn upgrade webpack-dev-server@^2.11.1を実行してみました。

1	$ docker-compose run web yarn upgrade webpack-dev-server@^2.11.1

再度、行うと…

$ docker-compose run web bin/webpack-dev-server

Starting myapp_db_1 ... done

Project is running at http://localhost:3035/

webpack output is served from /packs/

Content not from webpack is served from /myapp/public/packs

404s will fallback to /index.html

Hash: c2b35394ebbb54e5a94d

Version: webpack 3.12.0

Time: 6174ms

Asset Size Chunks Chunk Names

hello_vue-dcd31c56077c7dd6c92f.js 573 kB 0 [emitted] [big] hello_vue

application-a7359c322d3b74bf8142.js 331 kB 1 [emitted] [big] application

hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css 138 bytes 0 [emitted] hello_vue

hello_vue-dcd31c56077c7dd6c92f.js.map 673 kB 0 [emitted] hello_vue

hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css.map 561 bytes 0 [emitted] hello_vue

application-a7359c322d3b74bf8142.js.map 384 kB 1 [emitted] application

manifest.json 434 bytes [emitted]

[2] (webpack)-dev-server/client?http://localhost:3035 7.93 kB {0} {1} [built]

[3] ./node_modules/url/url.js 23.3 kB {0} {1} [built]

[10] ./node_modules/strip-ansi/index.js 161 bytes {0} {1} [built]

[12] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} {1} [built]

[13] (webpack)-dev-server/client/socket.js 1.08 kB {0} {1} [built]

[14] ./node_modules/sockjs-client/dist/sockjs.js 181 kB {0} {1} [built]

[15] (webpack)-dev-server/client/overlay.js 3.67 kB {0} {1} [built]

[20] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} {1} [built]

[22] (webpack)/hot/emitter.js 77 bytes {0} {1} [built]

[27] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/application.js 40 bytes {1} [built]

[28] ./app/javascript/packs/application.js 515 bytes {1} [built]

[29] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_vue.js 40 bytes {0} [built]

[30] ./app/javascript/packs/hello_vue.js 1.89 kB {0} [built]

[31] ./node_modules/vue/dist/vue.runtime.esm.js 212 kB {0} [built]

[35] ./app/javascript/app.vue 1.16 kB {0} [built]

+ 29 hidden modules

Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--1-2!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/postcss-loader/lib/index.js??ref--1-3!node_modules/vue-loader/lib/index.js??vue-loader-options!app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css&:

[0] ./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 759 bytes {0} [built]

[1] ./node_modules/css-loader/lib/css-base.js 2.26 kB {0} [built]

webpack: Compiled successfully.

これで無事、実行できました！！

Rails 5.2 + docker + webpackerでVue.jsの導入時に「Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-preset-env’」が起きた時の対処

Rails + Docker + Vue.jsの環境構築を行なう際に、JSのコンパイルにbin/webpackを実行するとエラーが出て、手が止まってしまったので、その対処についてです。

環境はこちらです

ruby 2.5.1

rails 5.2.1

webpacker 4.0.0

Node: v8.11.4

エラー内容

bin/webpackコマンドを入力すると、「Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-preset-env’」と出ました。

$ docker-compose run web bin/webpack

Starting xxxxxxx_db_1 ... done

Hash: 20c260cxxxxsssxxxe9e6dc82f

Version: webpack 3.12.0

Time: 3166ms

Asset Size Chunks Chunk Names

hello_vue-de0c1e6254d1895909a5.js 247 kB 0 [emitted] hello_vue

application-12a437e15157c0d4029c.js 3.27 kB 1 [emitted] application

hello_vue-de0c1e6254d1895909a5.js.map 292 kB 0 [emitted] hello_vue

application-12a437e15157c0d4029c.js.map 3.19 kB 1 [emitted] application

manifest.json 274 bytes [emitted]

[0] (webpack)/buildin/global.js 509 bytes {0} [built]

[1] ./app/javascript/app.vue?vue&type=script&lang=js& 364 bytes {0} [built]

[2] ./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=script&lang=js& 112 bytes {0} [built]

[3] ./node_modules/extract-text-webpack-plugin/dist/loader.js??ref--1-0!./node_modules/style-loader??ref--1-1!./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 1.02 kB {0} [built] [failed] [1 error]

[4] ./app/javascript/packs/application.js 515 bytes {1} [built]

[5] ./app/javascript/packs/hello_vue.js 1.89 kB {0} [built]

[10] ./app/javascript/app.vue 1.16 kB {0} [built]

[11] ./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true& 213 bytes {0} [built]

[12] ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true& 288 bytes {0} [built]

[13] ./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 898 bytes {0} [built]

[15] ./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 547 bytes [built] [failed] [1 error]

+ 7 hidden modules

ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css&

Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-preset-env'

解決方法

yarn add で postcss-preset-env というプラグインを入れてやれとのことです。ちなみに、Yarnとは Facebook、Google、Exponent、Tildeによって開発されたJavaScriptパッケージマネージャーです。

yarn add
https://yarnpkg.com/en/docs/cli/add
PostCSS Preset Env
https://github.com/csstools/postcss-preset-env

1	$ docker-compose run web yarn add postcss-preset-env

これでコマンドが通るようになりました。

$ docker-compose run web bin/webpack

Starting xxxxxxx_db_1 ... done

Hash: 20c260cxxxxsssxxxe9e6dc82f

Version: webpack 3.12.0

Time: 5851ms

Asset Size Chunks Chunk Names

hello_vue-e8c68f28fd2baad033fe.js 246 kB 0 [emitted] hello_vue

application-12a437e15157c0d4029c.js 3.27 kB 1 [emitted] application

hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css 138 bytes 0 [emitted] hello_vue

hello_vue-e8c68f28fd2baad033fe.js.map 293 kB 0 [emitted] hello_vue

hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css.map 561 bytes 0 [emitted] hello_vue

application-12a437e15157c0d4029c.js.map 3.19 kB 1 [emitted] application

manifest.json 434 bytes [emitted]

[0] (webpack)/buildin/global.js 509 bytes {0} [built]

[1] ./app/javascript/app.vue?vue&type=script&lang=js& 364 bytes {0} [built]

[2] ./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=script&lang=js& 112 bytes {0} [built]

[4] ./app/javascript/packs/application.js 515 bytes {1} [built]

[5] ./app/javascript/packs/hello_vue.js 1.89 kB {0} [built]

[10] ./app/javascript/app.vue 1.16 kB {0} [built]

[11] ./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true& 213 bytes {0} [built]

[13] ./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 898 bytes {0} [built]

+ 8 hidden modules

+ 1 hidden module

やったね！！😊