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

user_13352657 0
Viewed 4874

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?

vite vue.js
2 Answers
user_188713150

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" >

user_190798640
Related