404 when the application put under nginx subdirectory with proxy_pass

[chaoqing]

I tried to put the application under nginx subdirectory with proxy_pass like following:

location ~/yt-dlp/(.*)$ {
        proxy_pass http://127.0.0.1:3033/$1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        client_max_body_size 20000m;
        proxy_connect_timeout       3000;
        proxy_send_timeout          3000;
        proxy_read_timeout          3000;
        send_timeout                 @3000;
    }

It will not work because the whole front end use absolute assets address, even after following fix there will still be application internal error.

Patch

Could you help fix this issue?

[chaoqing]

To make sure at least the front end use relative path, one simple test would be run python3 -m http.server under the frontend folder and try open http://127.0.0.1:8000/dist/.

[NicksQ69]

+1 I'd also like the reverse proxy to work, so I can have several of my applications on the same machine. Ideally, I'd like to have an environment variable in docker to be able to define the custom base.

[marcopeocchi]

Apologies for the late response. I'm gonna fix this by tomorrow. 😎 @chaoqing could you post a screenshot with the error?

[chaoqing]

To reproduce the error, try clone the codebase and build the frontend, then try only serve dist with python -m http.server.

Notice I made one line change to vite.config.ts and serve under frontend folder,

➜ /tmp/yt-dlp-web-ui/frontend (13dd952) $ git status
HEAD detached at v3.0.0
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   vite.config.ts

no changes added to commit (use "git add" and/or "git commit -a")
 ➜ /tmp/yt-dlp-web-ui/frontend (13dd952) $ git diff
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index fb6b74a..dfca237 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -5,6 +5,7 @@ import { resolve } from 'path';

 export default defineConfig(() => {
     return {
+           base: './',
         plugins: [
             react(),
             ViteYaml(),
➜ /tmp/yt-dlp-web-ui/frontend (13dd952) $ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
127.0.0.1 - - [21/Aug/2023 05:01:56] "GET /dist/ HTTP/1.1" 304 -
127.0.0.1 - - [21/Aug/2023 05:01:56] "GET /dist/assets/index-aaff9234.js HTTP/1.1" 304 -

Following is the screenshot of error,

I am not sure why 404 happened while no such network error found in the Chrome debugger panel.

[marcopeocchi]

Using this nginx.conf which is identical to @chaoqing one and an hash router it works.

worker_processes  8;

events {
    worker_connections  1024;
}

http {
    include       mime.types;

    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    gzip  on;

    server {
        listen       80;
        server_name  localhost;

        location ~/yt-dlp/(.*)$ {
            proxy_pass http://127.0.0.1:3033/$1;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";

            client_max_body_size    20000m;
            proxy_connect_timeout   3000;
            proxy_send_timeout      3000;
            proxy_read_timeout      3000;
            send_timeout            3000;
        }
    }
 }

The problem as mentioned is that vite bundle everything with absolute paths, setting base: '' bundles with paths relative to ./. An hash router is better suited for a SPA like this.

Regarding the base path variable

It's not really necessary, I've added a setting which enables the use of the RPC in conjunction with a reverse proxy.

At the first boot behind the reverse proxy

Then set the address accordingly to the reverse proxy subfolder

Everything works just fine :sunglasses: