開発 - Vagrant
より高度なプロジェクトでVagrantを使用して仮想マシンで開発環境を実行する場合、多くの場合、VMでもwebpackを実行することをお勧めします。
プロジェクトの設定
まず、Vagrantfileに静的IPアドレスを設定してください。
Vagrant.configure("2") do |config|
config.vm.network :private_network, ip: "10.10.10.61"
end次に、プロジェクトにwebpack、webpack-cli、@webpack-cli/serve、およびwebpack-dev-serverをインストールします。
npm install --save-dev webpack webpack-cli @webpack-cli/serve webpack-dev-serverwebpack.config.jsファイルがあることを確認してください。まだない場合は、これを最小限の例として使用して開始してください。
module.exports = {
context: __dirname,
entry: './app.js',
};そして、index.htmlファイルを作成します。スクリプトタグはバンドルを指している必要があります。設定でoutput.filenameが指定されていない場合、これはbundle.jsになります。
<!DOCTYPE html>
<html>
<head>
<script src="/bundle.js" charset="utf-8"></script>
</head>
<body>
<h2>Hey!</h2>
</body>
</html>app.jsファイルも作成する必要があることに注意してください。
サーバーの実行
では、サーバーを実行しましょう。
webpack serve --host 0.0.0.0 --client-web-socket-url ws://10.10.10.61:8080/ws --watch-options-pollデフォルトでは、サーバーはlocalhostからのみアクセスできます。ホストPCからアクセスするため、これを許可するように--hostを変更する必要があります。
webpack-dev-serverは、ファイルの変更が発生したときにリロードするWebSocketに接続するスクリプトをバンドルに含めます。--client-web-socket-urlフラグは、スクリプトがWebSocketをどこに探すべきかを確認します。サーバーはデフォルトでポート8080を使用するため、ここで指定する必要があります。
--watch-options-pollは、webpackがファイルの変更を検出できるようにします。デフォルトでは、webpackはファイルシステムによってトリガーされるイベントをリッスンしますが、VirtualBoxはこの点で多くの問題を抱えています。
サーバーは現在http://10.10.10.61:8080でアクセスできるはずです。app.jsに変更を加えると、ライブリロードされるはずです。
nginxを使用した高度な使用方法
より本番環境に近い環境を模倣するために、nginxでwebpack-dev-serverをプロキシすることもできます。
nginxの設定ファイルに、以下を追加します。
server {
location / {
proxy_pass http://127.0.0.1:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
error_page 502 @start-webpack-dev-server;
}
location @start-webpack-dev-server {
default_type text/plain;
return 502 "Please start the webpack-dev-server first.";
}
}proxy_set_header行は、WebSocketsが正しく動作するために重要です。
webpack-dev-serverを起動するコマンドは、次のように変更できます。
webpack serve --client-web-socket-url ws://10.10.10.61:8080/ws --watch-options-pollこれにより、サーバーは127.0.0.1でのみアクセス可能になります。これはnginxがホストPC上でサーバーをアクセス可能にしているので問題ありません。
結論
Vagrantボックスを静的IPからアクセス可能にし、webpack-dev-serverをパブリックにアクセス可能にしてブラウザから到達できるようにしました。その後、VirtualBoxがファイルシステムイベントを送信しないという一般的な問題に対処し、ファイルの変更時にサーバーが再読み込みされない問題を解決しました。
4 貢献者
