im currently stuck on a probem with the webpack-dev-server which listen on a wrong domain with a wromng port. I've dockerized my Symfony application having 3 container, node, php and nginx. On the Node container the webpack-dev-server is running with the following (shortened) configuration
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.
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)
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 ?
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.
Description:
In this case the webpack-dev-server ran on a docker container client:8080 and was proxied to client.project.local:80 via nginx
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. [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. 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. works like a charm.
Configs
webpack.conf.js:
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) }, }
nginx client config:
# 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. I added a shortend version for the sake completion
docker-compose.yml
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. 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
