Webpack development server seperate subdomain proxied by nginx

Question

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 ?

Answer 1

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