背景
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 に設定しておく。
# 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に接続できない時の対処