[英]Webpack development server seperate subdomain proxied by nginx
im currently stuck on a probem with the webpack-dev-server which listen on a wrong domain with a wromng port. 即时通讯目前卡在webpack-dev-server的探针上,后者使用wromng端口监听错误的域。 I've dockerized my Symfony application having 3 container, node, php and nginx.
我已经将3个容器,节点,php和nginx的Symfony应用程序进行了docker化。 On the Node container the webpack-dev-server is running with the following (shortened) configuration
在Node容器上,webpack-dev-server使用以下(缩短的)配置运行
output: {
filename: '[name].[hash].js',
chunkFilename: '[name].[chunkhash].js',
path: Path.resolve(__dirname, 'web/static'),
publicPath: '/static/'
},
devServer: {
contentBase: Path.join(__dirname, 'web'),
host: '0.0.0.0',
port: 8080,
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
},
disableHostCheck: true,
open: false,
overlay: true,
compress: true
},
The nginx is configured to find the php application on www.application.box (docker port mapping 80 => 80) The webpack-dev-server is reachable on static.application.box (proxied port 80 to 8089) and running on port 8080. also port 8080 is mapped to the host. Nginx配置为在www.application.box上找到php应用程序(docker端口映射80 => 80)webpack-dev-server在static.application.box上可访问(代理端口80到8089)并在端口8080上运行也将端口8080映射到主机。
While all assets correctly resolved from static.application.box/static/some-assets.css/js
the socketjs-node/info request as well as the websocket it self are running on www.application.box:8080/socketjs-node/info?t=
(which is working since the port is mapped to the node container) 当所有资产从
static.application.box/static/some-assets.css/js
正确解析后,socketjs-node / info请求及其本身的websocket都在www.application.box:8080/socketjs-node/info?t=
上运行www.application.box:8080/socketjs-node/info?t=
(由于端口已映射到节点容器而正在运行)
I've tried several things, but without success. 我尝试了几件事,但是没有成功。 So how can i modify the webpack-dev-server/nginx configuration to get the js and websocket on
static.application.box/socketjs-node/info?t
? 那么我如何修改webpack-dev-server / nginx配置以在
static.application.box/socketjs-node/info?t
上获取js和websocket?
I ran into the same problem with webpack-dev-server
a week ago, but it should be noted that I modified /etc/hosts
to have seperate project.local
domains and that I used https. 一周前,我遇到了
webpack-dev-server
的相同问题,但应注意,我修改了/etc/hosts
使其具有独立的project.local
域,并且使用了https。
In this case the webpack-dev-server
ran on a docker container client:8080
and was proxied to client.project.local:80
via nginx 在这种情况下,
webpack-dev-server
在webpack-dev-server
容器client:8080
,并通过nginx代理到client.project.local:80
Like you I didnt find a way to configure webpack-dev-server to use my host and port so I created another nginx proxy especially for that :8080/sockjs-node
. 像您一样,我没有找到配置webpack-dev-server来使用主机和端口的方法,因此我专门创建了另一个
:8080/sockjs-node
代理:8080/sockjs-node
。 [1] [1]
But then I had the problem, that the dev-server tried to access https://client.project.local:8080/sockjs-node/info?t=1234567890
Which is a port too much for nginx, since client.project.local
is already a proxy to client:8080
. 但是然后我遇到了一个问题,即开发服务器试图访问
https://client.project.local:8080/sockjs-node/info?t=1234567890
,因为client.project.local
,对于nginx来说这是一个太多的端口client.project.local
已经是client:8080
的代理。 So I added in the webpack.conf.js
config.output.publicPath = '//client.project.local/
and ... voilà: https://client.project.local/sockjs-node/info?t=1234567890
. 所以我在
webpack.conf.js
config.output.publicPath = '//client.project.local/
webpack.conf.js
添加了... ...voilà: https://client.project.local/sockjs-node/info?t=1234567890
。 works like a charm. 奇迹般有效。
const fs = require('fs')
const sslCrt = fs.readFileSync('/path/to/ssl/ca.crt')
const sslKey = fs.readFileSync('/path/to/ssl/ca.key')
// ...
{
// ...
devServer: {
hot: true, // <- responsible for all of this, but still dont wanna miss it ;)
inline: true,
compress: true,
host: process.env.HOST, // set in Dockerfile for client container
port: process.env.PORT, // set in Dockerfile for client container
disableHostCheck: true, // when manipulating /etc/hosts
headers: { 'Access-Control-Allow-Origin': '*' },
https: {
cert: sslCrt,
key: sslKey
},
// ...
}
output: {
publicPath: '//client.project.local/' // host from /etc/hosts (note // at beginning)
},
}
# http
server {
listen 80 default;
listen [::]:80 default ipv6only=on;
server_name www.client.project.local client.project.local www.project.local project.local;
# your other config like root, access_log, charset ..
location / {
proxy_pass https://client:8080/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}
# https
server {
listen 443 ssl default;
listen [::]:443 ssl default ipv6only=on;
ssl_certificate project.local.crt;
ssl_certificate_key project.local.key;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl on;
server_name www.client.project.local client.project.local www.project.local project.local;
# your other config like root, access_log, charset ..
location / {
proxy_pass https://client:8080/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}
# http/s websocket for webpack-dev-server
server {
listen 8080 default;
listen [::]:8080 default ipv6only=on;
ssl_certificate project.local.crt;
ssl_certificate_key project.local.key;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl on;
server_name www.client.project.local client.project.local www.project.local project.local;
# your other config like root, access_log, charset ..
location /sockjs-node/ {
proxy_pass https://client:8080/sockjs-node/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}
Remember to expose port 8080 for nginx container aswell in for example in docker-compose.yml
. 记住还要在
docker-compose.yml
公开nginx容器的端口8080。 I added a shortend version for the sake completion 为了完成我添加了一个简短的版本
version: "3"
networks:
project-net-ext:
project-net:
internal: true
driver: bridge
services:
client:
hostname: client
build: ./container/client
volumes:
- ./path/to/code:/code:ro # read-only
# write needed only for initial package download
ports:
- "8080:8080"
networks:
- project-net
# project-net-ext only needed for initial package download
nginx:
hostname: nginx
build: ./container/nginx
volumes:
- ./path/to/code:/code:ro # read-only
# write needed only for initial package download
ports:
- "80:80" # http
- "443:443" # https
- "8080:8080" # webpack-dev-server :8080/sockjs-node/info
links:
- client
networks:
- project-net # needed for nginx to connect to client container,
# even though you've linked them
- project-net-ext # nginx of course needs to be public
[1] : I dont know if its considered to be dirty. [1] :我不知道它是否被认为是脏的。 At least it feels a bit like it is, but it works and as the name suggests: Its a dev -server and once you
npm build
for productive, its gone - for ever 至少感觉上是这样,但是它确实起作用,并且顾名思义:它是一个开发服务器 ,一旦
npm build
为生产而npm build
,它就永远消失了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.