带有 NGINX proxy_pass 的 Webpack 开发服务器 [英] Webpack Dev Server with NGINX proxy_pass
问题描述
我试图让 webpack-dev-server
在 Docker 容器内运行,然后通过 NGINX 主机访问它.初始 index.html
已加载,但无法连接到开发服务器的 Web Sockets 连接.
I'm trying to get webpack-dev-server
running inside a Docker container then accessing it through a NGINX host. The initial index.html
loads but the Web Sockets connection to the dev server cannot connect.
VM47:35 WebSocket 连接到ws://example.com/sockjs-node/834/izehemiu/websocket"失败:WebSocket 握手期间出错:意外响应代码:400
VM47:35 WebSocket connection to 'ws://example.com/sockjs-node/834/izehemiu/websocket' failed: Error during WebSocket handshake: Unexpected response code: 400
我正在使用以下配置.
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
upstream webpack_dev_server {
server node;
}
server {
server_name _;
listen 80;
root /webpack_dev_server;
location / {
proxy_pass http://webpack_dev_server;
}
location /sockjs-node/ {
proxy_pass http://webpack_dev_server/sockjs-node/;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host; # pass the host header - http://wiki.nginx.org/HttpProxyModule#proxy_pass
proxy_http_version 1.1; # recommended with keepalive connections - http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_http_version
# WebSocket proxying - from http://nginx.org/en/docs/http/websocket.html
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}
推荐答案
Proxy pass 应该是你的 webpack-dev-server 容器的 ip 和 port 并且你需要 proxy_redirect off;
Proxy pass should be ip and port of your webpack-dev-server container and you need proxy_redirect off;
location /sockjs-node {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
proxy_pass http://node:8080;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
另外不要忘记将 poll 添加到你的 webpack-dev 中间件
Also don't forget to add poll to your webpack-dev middleware
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
这篇关于带有 NGINX proxy_pass 的 Webpack 开发服务器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!