Vite: WebSocket connection can not work inside Docker container

[angela-1]

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

Describe the bug

I use Docker container to develop a Vite app.

I use the default port 3000 for app, and expose 8080 from Docker container.
Normally I can open the app inside Docker container from host machine's browser with 127.0.0.1:8080.
The index.html page shown correctly, but the console of browser throw an error of WebSocket connection and infinitely refresh page:

[vite] connecting...
VM1722 vue.js:8446 You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production.
VM1719 client:25 WebSocket connection to 'ws://127.0.0.1:3000/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
(匿名) @ VM1719 client:25
VM1719 client:125 [vite] server connection lost. polling for restart...

The WebSocket connection port is the same as default port(or port set in vite.config.ts), and didn't use the port 8080.

Reproduction

Create a app inside a Docker container, expose a different port from Vite config, run.

After search in Vite's code, I find the WebSocket port is set in https://github.com/vitejs/vite/blob/master/src/client/client.ts#L35 and comes from the config file vite.config.ts.

To make it work, I modified the node_modules/vite/dist/client/client.js#L23, manually set the expose port 8080 and it works. The error gone.

I think the problem is caused by the script run in client, it get port from config in app, and can't get the port in browser.
If we could add a config item socketPort or is there a method to automatically get the right port in browser?

Many Thanks!

System Info

• required vite version: 1.0.0-rc.4
• required Operating System: debian 10 with Docker image node:12.18.3-alpine
• required Node version: 12.18.3
• Optional:
  
  
  
  • npm/yarn version: 1.22.0
  
  
  • Installed vue version (from yarn.lock or package-lock.json): vue@^3.0.0-rc.5
  
  
  • Installed @vue/compiler-sfc version: vue@^3.0.0-rc.5
  
  

Logs (Optional if provided reproduction)

1. Run vite or vite build with the --debug flag.
2. Provide the error log here.

[shortpoet]

Hi @angela-1 and @underfin ,

I am having issues setting up a basic vite project in docker. I documented the steps in this repo and readme.

This was the only docker-related issue I found in Vite gh and it seems like you got further than me. I tried looking in your latest vue project but didn't see any docker files. Do either of you have a basic config that works that you can share?

Thanks,
Carlos

[angela-1]

@shortpoet

The issues from a privite project, and I have uploaded a new public project to show the structure.
You can see https://github.com/angela-1/azalea

You should read the README.md to make it work.

[shortpoet]

Wow, that is awesome! Thank you very much Angela!! 😊 千万谢谢你!!

[wozien]

@shortpoet

The issues from a privite project, and I have uploaded a new public project to show the structure.
You can see https://github.com/angela-1/azalea

You should read the README.md to make it work.

thanks, guy

[cpietsch]

Hey any news on merging this issue ? Would love to use vite on github codespace.