CODEWITHSUNDEEP
nginxvue.jswebpackwebpack-dev-server
1I1III1
1I1III1

Reputation: 167

Vue host development server web socket in subdirectory

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?

Upvotes: 2

Views: 1256

Answers (1)

Rodolfo Ortega
Rodolfo Ortega

Reputation: 517

It is possible to set the socket path using:

module.exports = {
    //...
        devServer: {
        sockPath: 'path/to/socket',
    }
};

In this case:

sockPath: '/test/sockjs-node',

Upvotes: 1

Related Questions