Post History

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](https://github.com/MHSanaei/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.

![cloudflare_view](https://software.codidact.com/uploads/i5mkfc3ywmlz7h9kyio4g6doexsp)

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.

![blank_screen](https://software.codidact.com/uploads/vu8osjngt3wtuhwj3hszwsm25jp0)

instead of

![expected_screen](https://software.codidact.com/uploads/rg8d24873dvso9djr7550qmb5tu5)

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)

![errors](https://software.codidact.com/uploads/qj6d1l22xikkq064bax72ifp28vu)

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.

![reserve_tab](https://software.codidact.com/uploads/i9le6lne6am7mi77n8bocjb0jcbd)