How to Proxy 3x-UI Panel to a Specific Path on Nginx Web Server with Asset Path Rewriting?

I have two vps:

1. First one is used for vpn/proxy. It runs 3x-ui that, simply saying, allows to create and manage vpn/proxy with UI. VPS' ip is connected to https://new-york.vpn.utils.example.com. I used CloudFlare DNS and set up ssl according to instructions on 3x-ui github page (with CloudFlare Global API Key). And the admin panel is on :2053/secret_code/.

2. Second one is planned to be used as a place for all my utilities and tools (one of which is this vpn). Currently, it's just a linux server with Nginx. It's accessible via https://utils.example.com. The same CloudFlare domain, with full (strict) mode. This one is Proxied.

I want the admin panel from the first vps (that is on https://new-york.vpn.utils.example.com:2053/secret_code/) to be accessible via https://utils.example.com/vpn/new-york/admin (that is operated by the second vps).

sensative info such as actual domain name is changed

I tried millions of different configuration for Nginx (vps2) but nothing seems to work properly. I'm not an expert in nginx, 3x-ui and neither in DNS configs, so I will include as many info as possible, hoping that something will be useful.

Here's one of nginx configs that I tried:

GNU nano 6.2      /etc/nginx/sites-available/utils.example.com
server {
    listen 80;
    server_name utils.example.com www.utils.example.com;

    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name utils.example.com www.utils.example.com;

    ssl_certificate /etc/nginx/ssl/cloudflare.crt;
    ssl_certificate_key /etc/nginx/ssl/cloudflare.key;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers '...';
    ssl_prefer_server_ciphers on;

    root /var/www/utils.example.com;
    index index.html;

    location = /404.html {
        internal;
    }

    location /vpn/new-york/admin {
        proxy_pass https://new-york.vpn.utils.example.com:2053/secret_code/;
    }

}

And it seems to work, but not completely. The result is a blank white screen (instead of a login interface); however, while inspecting the page, I found some html elements of original page.

instead of

I also noticed a lot of 404 errors in both nginx access logs and in browser js console. I believe this is the main problem, but I don't know how to fix it. (Basically, assets are not loading because of the wrong path caused by proxying)

On 3x-ui GitHub page there is also section on Nginx configuration. But I don't really understand how and where to use it. And I'm not sure it's applicable in my case.

Also, in 3x-ui config page there is reverse tab, maybe I should add something there.

posted 5 days ago

CC BY-SA 4.0

Botopodobniy‭

6 reputation 1 0 1 0