Vue host development server web socket in subdirectory - nginx

Question

I'm trying to host a Vue development server (including the web socket) in a subdirectory of my domain using nginx, but with my current setup it looks like the vue server is responding to requests instead of the webpack development server.
To be clear, I want my app to be hosted on https://xxx.yyy/zzz/, I want assets, etc hosted in https://xxx.yyy/zzz/path/to/asset, and I want the webpack dev server hosted in https://xxx.yyy/zzz/sockjs-node/info?t=.... I'm pretty sure this should be possible without special casing the nginx setup because it works without the subdirectory.
Here's my setup so far:
nginx
server {
# server name, ssl, etc
location /test/ {
proxy_pass http://localhost:8080;
}
}
Create the project
$ vue create -d hello-world
vue.config.js
module.exports = {
publicPath: '/test/',
devServer: {
public: "0.0.0.0/test",
disableHostCheck: true,
}
}
Then running
$ npm run serve
The client makes requests to all the right places, but
$ curl https://xxx.yyy/test/sockjs-node/info
gives back index.html, whereas
$ curl localhost:8080/sockjs-node/info
gives back the expected websocket info. I have also tried changing the nginx setup to proxy_pass http://localhost:8080/;, but that causes index.html to not render when I go to https://xxx.yyy/test/ because it's expecting a path and isn't being forwarded one. When I also change publicPath to /, I can't get the client to look in the right subdirectory for assets.
Is there a correct way to do this?

Answer 1

It is possible to set the socket path using:
module.exports = {
//...
devServer: {
sockPath: 'path/to/socket',
}
};
In this case:
sockPath: '/test/sockjs-node',