Vue with nginx

Hi I am running node+express+vue

Here is my nginx configuration

server {

  listen 443;
  server_name mydomain.com;
  ssl                  on;
  ssl_certificate      /root/mydomain.com.cert;
  ssl_certificate_key  /root/mydomain.com.key;
  ssl_session_timeout  5m;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

  location / {
        proxy_pass http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $http_host;
    }
}

With the above configuration I can access my site using https://mydomain.com but in Chrome’s console there is still localhost:8080 appears.

GET https://localhost:8080/sockjs-node/info?t=1517580112789 net::ERR_CONNECTION_REFUSED
client?d420:175 [WDS] Disconnected!
sockjs.js?3600:1601 GET https://localhost:8080/sockjs-node/info?t=1517580112789 net::ERR_CONNECTION_REFUSED

Would you please help me why localhost:8080 is still appears? and how to fix this

Socket connection only be used for HMR in development.
You should build production and serve built files via express.
http://vuejs-templates.github.io/webpack/backend.html

Hello @umardraz!
I was facing a similar issue and, what happens is that your NGiNX reverse proxy will resolve the domain configured on the server block but, your application will still respond to an IP address on 8080 port. As you may have noticed https://localhost:8080/ is not a valid external URL, right? So your application will never resolve the correct file.

I have created a simple application using vue-cli and the problem that I had was trying to run a reverse proxy to serve vue’s development server with 'npm run serve'. What happened was that the HMR functionality was not working and the browser console was throwing:
[WSD] Disconnected!

What solved for me was to inform which public domain my application would respond under my vue.config.js file.

Here goes my vue.config.js file, located at the root of my application:

// vue.config.js

module.exports = {
  devServer: {
    //disableHostCheck: true, 
    host: '0.0.0.0',
    port: 3000,
    public: 'mywebsite.com'
  },
}

For your expressjs,I think that maybe you can set your domain under your:

app.listen(port, [host], [backlog], [callback]])

If you’re having issues with proxy, try to log in under Mullvad VPN - you can check the article on it on this site. I use it a lot for testing purposes when developing apps - it’s a common practice for users now to log in under proxy.