Help us understand the problem. What is going on with this article?

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

More than 3 years have 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に接続できない時の対処

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした