'How to configure Vite dev server for running through a port proxy path?

I'm trying to use Vite dev server in a cloud-based development environment where I can serve on and connect to ports, but need to access them through a proxy path.

Instead of http://localhost:3000/index.html I would visit e.g. https://my.cool.example.com/proxy/3000/index.html. Under the hood, the cloud service translates the URL and proxies the connection through: So to Vite it looks like I'm just requesting /index.html.

...But the various configs I've tried in vite.config.js haven't got this working properly yet:

  • Setting base as suggested in this answer complains "The server is configured with a public base URL of /proxy/3000/"
  • Several other unsuccessful experiments with server.base, proxy, publicPath and similar

How can I tell Vite that the client and assets should set a path prefix on requests, but the server can serve from root?

vue.jsvite


Solution 1:[1]

I had the exactly same problem the documentation say that there are more options of proxy on https://github.com/http-party/node-http-proxy#options

https://vitejs.dev/config/#server-proxy

Solution 2:[2]

My solution to fix this problem was to make many stuff on reverse proxy inside nginx on filename.conf file inside your domain conf you need to set something like that

 location /admin {
        include /etc/nginx/includes/proxy.conf;
        proxy_pass        https://your-service:8081;
    }

    location ^~ /@vite {
        include /etc/nginx/includes/proxy.conf;
        proxy_pass            https://your-service:8081;
    }
    location /__vite_ping {
        include /etc/nginx/includes/proxy.conf;
        proxy_pass        https://your-service:8081;
    }
    location /src {
        include /etc/nginx/includes/proxy.conf;
        proxy_pass        https://your-service:8081;
    }
    location /node_modules {
        include /etc/nginx/includes/proxy.conf;
        proxy_pass        https://your-service:8081;
    }

proxy.conf file look in this way

xy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_buffering off;
proxy_request_buffering off;
proxy_http_version 1.1;
proxy_intercept_errors on;

Inside of your vite.config you must do something like that

server: {
    https: true, 
    host: "0.0.0.0",
    port: 8081,
    secure: false,
    strictPort: true,
    hmr: {
      port: 8081,
      host: "localhost",
    }, 
  },

the important think was to the hrm value to overwrite host and the port need to be the same that you are exposing on docker

service vaues of docker-compose.yml

ports:
      - '8081:8081'

on the index.html you must update the script src path

From < script type="module" src="/src/main.js" >

To < script type="module" src="https://localhost:8081/src/main.js" >

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jesus Cortes Rodriguez
Solution 2 Jesus Francisco Rodriguez

Related Questions