How to remove the :port from the dev server socket URL to work with reverse proxied connections?

Describe the bug

I raised an issue with connection restarting, but it was closed shortly after it was raised with a related link which doesnt resolve what I think are two separate issues relating to the use of proxied connections.

1. The page doesnt need to reload if the socket connection fails as it can always be manually reloaded if for any reason the dev socket cant be reached.
2. the inclusion of the port in the socket URL appears mandatory and isnt useful for reverse proxied applications. Its not entirely clear from the documentation now to remove the port spec to allow a reverse proxy to do the routing from the route url. I have tried changing the port, the host and the path, but how do I just remove the port?

There may be a solution in there: to add config to remove the port, or overrwite the dev server socket URL entire (not just the path spec) to achieve the same.

my nginx configuration takes care of the routing so the client doesnt need to force specification of a port:

server {
    listen 80;
    server_name myviteserver.com;
    location / {
        proxy_pass http://0.0.0.0:3400;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Thanks

Reproduction

https://reactvite.syntapse.co.uk/

System Info

System:
    OS: Linux 4.19 Alpine Linux
    CPU: (1) x64 Intel Core Processor (Haswell, no TSX)
    Memory: 105.07 MB / 3.76 GB
    Container: Yes
    Shell: 1.33.1 - /bin/ash
  Binaries:
    Node: 16.13.1 - /usr/local/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 8.1.2 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-react: ^1.3.0 => 1.3.1
    vite: ^2.9.5 => 2.9.5

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[laurencefass]

Thanks again for your feedback. It looks a bit strange because Ive got two layers of proxying the outer one managing docker containers (and certificates) and the inner one managing node applications which are effectively running as http/ws. I have only specified the inner reverse proxy in these examples.

I manage my containers with https://hub.docker.com/r/jwilder/nginx-proxy which simplifies my inner nginx proxy management.

[sapphi-red]

Glad to hear you were able to solve this.

BTW I feel it strange with your nginx config. IIUC you are using vite like below.

browser (https://reactvite.syntapse.co.uk) -> nginx (:443) -> vite (:3400)
browser (wss://reactvite.syntapse.co.uk/socket) -> nginx (:443) -> vite (:3401)

But your nginx config does not have any listen 443 ssl. I do not think it will be able to access with https without it. Was it jusst omitted from the comment?