Edited at

Vagrant環境でwebpack-dev-serverを動かしたい

More than 1 year has passed since last update.


背景

Ruby on Rails 5.1.rc1 で webpacker を使ってみたかったので、手始めに

【動画付き】Rails 5.1で作るVue.jsアプリケーション ~Herokuデプロイからシステムテストまで~

を参考にして環境を整えていた。


バージョン


  • rails (5.1.0.rc1)

  • webpacker (1.1)


問題:webpackerでビルドしたjsが取ってこれない

vagrantは今までも使っていたので、鼻歌混じりに http://localhost:3031/ を叩くも、画面には何も表示されない。

(ポートフォワーディングでホストOS側を 3031 に設定済み)

Chromeのコンソールを見ると

Failed to load resource: net::ERR_EMPTY_RESPONSE    hello_vue.js

と出ていて、hello_vue.jsが取れていなかった。


対応


webpack-dev-serverを起動する

javascript_pack_tag を使うとwebpackでビルドしたjsファイルへの参照に置換してくれるが、参照先のポートは設定した覚えのない 8080 になっていた。

rails s では 3000 を使うようにしていたし、ホストOS側からは 3031 で繋がるようにしていたので、当然のことながら繋がらない。

そこで 8080 はどこで設定されたものなのかを調べると、rails webpack:install で作られた config/webpack/development.server.yml というファイルで見つかった。

ここに記載されているポート番号は、そのまま javascript_pack_tag で利用されるようなので、ポートフォワーディングでホストOS側に設定しても良いポート番号と同じにしておく。

また、hostが localhost だと、ホストOS側から見ることができないので、 0.0.0.0 に設定しておく。


config/webpack/development.server.yml

# Restart webpack-dev-server if you make changes here

enabled: true
host: '0.0.0.0'
port: 8881


ポートフォワーディングを設定する

rails s 用の設定とは別に、 webpack-dev-server 用の設定を追加する。

この時、ゲストOSとホストOSのポート番号を同じにしておく。

  config.vm.network "forwarded_port", guest: 3000, host: 3031 # rails s

config.vm.network "forwarded_port", guest: 8881, host: 8881 # webpack-dev-server

最後に vagrant reload で設定をリロードし、 webpack-dev-server を起動する。

bin/webpack-dev-server

これで改めてホストOS側から http://localhost:3031/ を読み込めば正しく表示される。


最後に

webpack-dev-server で設定したポート番号をホストOS側で使えるようにしなければいけないのが気持ち悪い...。

javascript_pack_tag で任意のポート番号(=ホストOS側で設定したいポート番号)が使えれば解決しそうな気がするので、要調査。


参考

rails/webpacker

【動画付き】Rails 5.1で作るVue.jsアプリケーション ~Herokuデプロイからシステムテストまで~

Vagrant+webpack-dev-serverでプライベートIPに接続できない時の対処