Skip to content

WebSocket connection can not work inside Docker container #652

@angela-1

Description

@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.

docker-expose-port-issue

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions