Homestead: Port proxying issues with sockjs for vue-cli app

[Tarasovych]

Versions

• Vagrant: 2.2.4
• Provider: Virtualbox 6.0.6 r130049
• Homestead: v8.3.2

Host operating system

Ubuntu 18.04

Homestead.yaml

ip: "192.168.2.10"
memory: 6144
cpus: 4
provider: virtualbox

authorize: ~/.ssh/id_rsa.pub

keys:
    - ~/.ssh/id_rsa

folders:
    - map: ~/dev/myvueapp
      to: /home/vagrant/dev/myvueapp

sites:
    - map: myvueapp.local
      to: /home/vagrant/dev/myvueapp.local/public

Vagrant destroy & up output

https://gist.github.com/Tarasovych/7441e25a240bc61b57fd6f94816e05d2

Expected behavior

I'm trying to make vue-cli hot reload work. I run npm run serve in my VM. I can access Vue app from my host machine by myvueapp.local in browser.

Actual behavior

Hot reload does not work. sockjs connection is calling not myvueapp.local but myvueapp.local:8080. So, I'm getting

https://myvueapp.local:8080/sockjs-node/info?t= net::ERR_CONNECTION_REFUSED

Steps to reproduce

1. Create vue-cli app as described here
   and add vue.config.js in the root:

module.exports = {
  devServer: {
    host: 'myvueapp.local',
    https: true
  }
}

1. Run npm run serve inside VM
2. Try to access Vue app from your host machine

Nginx config:

server {
    listen 80;
    listen 443 ssl http2;
    server_name .myvueapp.local;
    root "/home/path/to/myvueapp.local/public";

    index index.html index.htm;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.html =404;
        proxy_pass https://myvueapp.local:8080;
    }

    sendfile off;
}

hosts on host machine:

192.168.10.10  myvueapp.local

hosts in VM:

127.0.0.1       myvueapp.local

[svpernova09]

memory: 6144
cpus: 4

I like how you roll...

[Tarasovych]

@svpernova09 something wrong?)

[svpernova09]

@svpernova09 something wrong?)

No! not at all, it's just uncommon to see someone throw so many CPU and RAM at Homestead like I do :D

btw I'm looking into this, should have something soonish.

[Tarasovych]

@svpernova09 oh, thanks. My Laravel Dusk tests with not the latest PHPUnit were a bit slow on one machine, so I went for more resources for this machine... Didn't tested if they're faster tbh, but overall testing time took 10+ mins, so I expect I win a few seconds at least)

[svpernova09]

Try adding this to Homestead.yaml

ports:
    - send: 8080
      to: 8080

Then run vagrant reload, Once complete run npm run serve again in the homestead vue project folder and then reload. You should get CORS errors instead of connection refused.

[Tarasovych]

Very strange.
I've created a repo with Vue project.

Still have 192.168.2.10 myvueapp.local in hosts on host machine and 127.0.0.1 myvueapp.local in VM hosts.

I set ports as you suggested. And yes, I have CORS errors too.

[svpernova09]

Exit the VM and run vagrant reload and show me the output. We should see port 8080 being mapped.

[Tarasovych]

vagrant reload output:

==> homestead-7: Attempting graceful shutdown of VM...
==> homestead-7: Checking if box 'laravel/homestead' version '7.2.1' is up to date...
==> homestead-7: Clearing any previously set forwarded ports...
==> homestead-7: Clearing any previously set network interfaces...
==> homestead-7: Preparing network interfaces based on configuration...
    homestead-7: Adapter 1: nat
    homestead-7: Adapter 2: hostonly
==> homestead-7: Forwarding ports...
    homestead-7: 80 (guest) => 8000 (host) (adapter 1)
    homestead-7: 443 (guest) => 44300 (host) (adapter 1)
    homestead-7: 3306 (guest) => 33060 (host) (adapter 1)
    homestead-7: 4040 (guest) => 4040 (host) (adapter 1)
    homestead-7: 5432 (guest) => 54320 (host) (adapter 1)
    homestead-7: 8025 (guest) => 8025 (host) (adapter 1)
    homestead-7: 27017 (guest) => 27017 (host) (adapter 1)
    homestead-7: 8080 (guest) => 8080 (host) (adapter 1)
    homestead-7: 22 (guest) => 2222 (host) (adapter 1)
==> homestead-7: Running 'pre-boot' VM customizations...
==> homestead-7: Booting VM...
==> homestead-7: Waiting for machine to boot. This may take a few minutes...
    homestead-7: SSH address: 127.0.0.1:2222
    homestead-7: SSH username: vagrant
    homestead-7: SSH auth method: private key
    homestead-7: Warning: Connection reset. Retrying...
    homestead-7: Warning: Remote connection disconnect. Retrying...
==> homestead-7: Machine booted and ready!
==> homestead-7: Checking for guest additions in VM...
==> homestead-7: Setting hostname...
==> homestead-7: Configuring and enabling network interfaces...
==> homestead-7: Mounting shared folders...
    homestead-7: /vagrant => /home/path/to/Homestead
    homestead-7: /home/vagrant/myvueapp.local => /home/path/to/myvueapp.local
==> homestead-7: Machine already provisioned. Run `vagrant provision` or use the `--provision`
==> homestead-7: flag to force provisioning. Provisioners marked to run always will still run.

[svpernova09]

homestead-7: 8080 (guest) => 8080 (host) (adapter 1)

Looks good.

Should be able to vagrant ssh back in, cd to vue folder, run npm run serve then refresh the browser and see the Vue page with no connection errors to 8080. If you continue to see connection refused something on your system may be causing it (not sure why, because vagrant clearly didn't have an issue mapping the port)

[Tarasovych]

Can it be a problem with 8080 port on host machine?
I have tried https://myvueapp.local:8080/sockjs-node in browser, I got

ERR_CONNECTION_REFUSED

but https://myvueapp.local/sockjs-node/ returns "Welcome to SockJS!"

[Tarasovych]

I went another way and specified path for sockjs:
vue.config.js now:

module.exports = {
  devServer: {
    host: 'myvueapp.local',
    https: true,
    public: 'myvueapp.local'
  }
}

npm run serve output:

App running at:

• Local: https://myvueapp.local:8080/
• Network: https://myvueapp.local/

Now in browser I have only

net::ERR_CERT_AUTHORITY_INVALID

[cbj4074]

In which case, it seems like your problem is solved. The error now is an invalid TLS configuration.

So, either remove the s from https, if your use-case allows for it, or if you must use TLS, configure a proper certificate for the web-server running on 8080. (And "proper certificate", in this specific instance, includes a self-signed certificate whose CA you add to the Trusted Root Store on the VM.)

[Tarasovych]

It doesn't work even through http...

[cbj4074]

@Tarasovych "Doesn't work" is a bit vague, but I assume you mean that you still see ERR_CONNECTION_REFUSED?

That certainly seems to be expected, given that you're specifying https directly in your proxy_pass directive:

    location / {
        try_files $uri $uri/ /index.html =404;
        proxy_pass https://myvueapp.local:8080;
    }

So, you either need to remove the s from https there, or you need to use a trusted certificate, whether that's signed by a CA trusted in Ubuntu, or a self-signed certificate whose CA you add to the Trust Store yourself.

The screenshot you posted in https://github.com/laravel/homestead/issues/1134#issuecomment-491020219 is proof that "it works". Your TLS configuration is simply incorrect, which is unrelated.