sockjs-node path is overwritten with webpack-dev-server baseUrl - docker

Question

nginx.conf (exposed on port 8900 in docker-compose)
upstream app_api {
server api:8888;
}
upstream app_dashboard {
server dashboard:8080;
}
server {
listen 80;
server_name api_server;
index index.html;
# Needed for Django API testing
location /static {
alias /var/www/static;
try_files $uri /$uri /index.html;
}
#Django API
location /api/ {
proxy_pass http://app_api/;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_redirect off;
}
# Dashboard static served from nginx
location / {
root /var/www/dist/;
try_files $uri /$uri /index.html;
}
# Dashboard served from webpack-dev-server in container
location /serve {
proxy_pass http://app_dashboard;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_redirect off;
}
# still testing - this will fix the HMR for webpack
location /serve/sockjs-node {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_pass http://app_dashboard;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
vue.config.js
module.exports = {
baseUrl: process.env.NODE_ENV === 'docker' ? '/serve' : '/'
}
In a browser go to:
localhost:8900/serve
Pages get served fine, however,webpack-dev-server HMR is not working since the calls to sockjs are now /serve instead of /serve/sockjs-node :
POST http://localhost:8900/serve/908/3so2cyjm/xhr_streaming?t=1548885104223 404 (Not Found)
I am assuming this can be fixed with setting devServer.proxy instead of baseUrl, however I could not find the correct configuration.
What I need is:
/ -> should go to http://localhost:8900/serve
/api -> should go to http://localhost:8900/api
/sockjs-node -> should go to http://localhost:8900/serve/sockjs-node

Answer 1

We can change the default socket path using sockPath option:
module.exports = {
//...
devServer: {
sockPath: 'path/to/socket',
}
};
Here will be:
sockPath: '/serve/sockjs-node',

Answer 2

Managed to fix that issue with something like:
devServer: {
proxy: {
"/serve": {
target: "http://localhost:8900",
pathRewrite: { "^/serve": "/sockjs-node" },
},
}
}