LoginSignup
5

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-04-14

背景

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に接続できない時の対処

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5