16

With vue-cli 3, I've got a vue app whirring away in development mode. I call npm run serve, and I see...

DONE  Compiled successfully in 431ms                                                                                                                                                                   
16:26:43
App running at:
- Local:   http://localhost:8080/mobileapp/v/
- Network: http://172.18.55.202:8080/mobileapp/v/

(The path /mobileapp/v/ comes from a baseUrl config variable. The domain notilusdev.dimosoftware.com/mobileapp points to a vdir in iis, and requests to /mobileapp/v/ are reverse proxied to webpack-dev-server)

In the browser, the app fires up no problem. Then it starts firing off requests to https://172.18.55.202:8080/sockjs-node/info?t=1529072806971. These requests fail, because there's no ssl on that port. I don't even want the ip as the public address of the site. How does Webpack (or sockjs) construct this url? Why does it think there's ssl on this port when it's just given me a straight http link? If it's basing the protocol on the address-bar protocol, why is it ignoring the address-bar host-name. What can I configure to get these requests to succeed?

enter image description here

bbsimonbb
  • 27,056
  • 15
  • 80
  • 110

2 Answers2

24

This was a struggle, but it's working now...

Add a public property to the devServer object in vue.config.

The property I needed was public, not publicPath, and the clincher was learning that vue will ignore config changes in configureWebpack{ devServer: {. You need to use the top level devServer property.

So my working vue.config.js is...

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '\/mobileapp\/v\/',
    devServer :{
      public : 'notilusdev.dimosoftware.com',
      host : '0.0.0.0',
      disableHostCheck : true
    }  
}

Then I needed to reverse-proxy https and wss:// requests through express, terminating the ssl in express, but that's another story.

bbsimonbb
  • 27,056
  • 15
  • 80
  • 110
  • 4
    For people quickly skimming and working locally with localhost, the key part that helped me as adding this "public" property to the devServer property in vue.config.js: `public: 'http://localhost:8080'` – Elijah Lofgren Mar 26 '19 at 16:13
  • 1
    I'm equally interested in your _another_ story :) can you please elaborate. – Anand Rockzz Sep 04 '19 at 01:39
  • @AnandRockzz to use ssl in development, or to make your spa in development share an origin with your legacy app, the simplest solution I've found is to put express in front of everything, then reverse-proxy to webpack. The three tricks you need to master are [configuring reverse-proxy](https://www.petrelli.biz/2017/07/12/ionic-serve-how-to-connect-over-https-to-use-reserved-html5-methods-such-as-geolocation/), [terminating ssl](https://matoski.com/article/node-express-generate-ssl/), and [handing over websocket connections](https://gist.github.com/hhanh00/ddf3bf62294fc420a0de). – bbsimonbb Sep 05 '19 at 07:31
  • @AnandRockzz ask a question ( and notify me) if you'd like me to post my working express script. – bbsimonbb Sep 05 '19 at 07:32
  • I'm using apache proxy for serving my development server and this configuration works perfectly thanks :) – Christopher Pelayo Dec 04 '20 at 08:14
  • Thanks for this. I'm currently using a reverse proxy through ngrok to serve my server and client on the same ngrok domain so that I can test webhook stuff and websocket interactions. – Drew Aug 05 '22 at 18:49
1

The web socket infers the schema from the URL that is configured.

You will need to expressly provide the key/cert/pem? to the devServer configuration in order to support this. Otherwise, it will attempt to use a self-signed certificate which, of course, won't work in your case.

devSever: {
  ...,
  key: fs.readFileSync('/path/to/server.key'),
  cert: fs.readFileSync('/path/to/server.crt'),
  ca: fs.readFileSync('/path/to/ca.pem'),
}

This will use the correct SSL and solve your problem.

As a side note

You can't just decide to not use https for the websocket connection, either. However you can, instead, not use HTTPS at all and just use localhost:8081 as per usual if you don't want to go through this.

Ohgodwhy
  • 49,779
  • 11
  • 80
  • 110
  • I'm new to this. My spa needs to integrate in an existing asp.net app (presenting the same https origin to browser), so I've configured a reverse proxy on IIS to forward spa requests to webpack dev server. That's why, in the screenshot, you see `https://notilusdev...` in the address bar. So the only way out of this I can see is to get the HMR requests to follow the same pipeline, request sent to `https://notilusdev...`, SSL terminated at IIS, unencrypted request forwarded to webpack dev server. Is this feasable ? – bbsimonbb Jun 16 '18 at 08:58
  • This was feasible, but absolutely not with IIS, whose reverse proxy config was nightmarish. I did the reverse proxy with Express and it was simple and painless. – bbsimonbb Dec 07 '21 at 08:06