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, p

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