1

I'm trying to use a basic nginx reverse proxy to access three different apps, each running inside a docker container. The nginx reverse proxy is served on http://127.0.0.1:8080 and i want to have the following behavior:

  • http://127.0.0.1:8080/api route to Django backend api http://127.0.0.1:8000/api
  • http://127.0.0.1:8080/ route to the the main react app running on http://127.0.0.1:5200
  • http://127.0.0.1:8080/app2 route to a second app running on http://127.0.0.1:5300

This is the nginx.conf

events {}
http { 
    server {
        listen 8080;
        server_name 127.0.0.1;
        rewrite_log on;
        error_log  /var/log/nginx/error.log notice;
        # debug with cache off
        add_header Cache-Control no-cache;

    location / {
        proxy_pass http://127.0.0.1:5200;
        proxy_set_header  Host 127.0.0.1:5200;
    }
    location /api {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header  Host 127.0.0.1:8000;
    }
    location = /app2 {
        return 302 /app2/;
    }
    location /app2/ {
        proxy_pass http://127.0.0.1:5300/;
        proxy_set_header  Host 127.0.0.1:5300;
    }
    if ($http_referer ~ https?://[^/]+/app2/(.*))
    {
        # rewrite request URI only if it isn't already started with '/app2' prefix
        rewrite ^((?!/app2).*) /app2$1;
    }

}



}

If I use these routes in the second app, the http://127.0.0.1:8080/app2 does not load the page and I get the below logs from nginx reverse proxy

        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Comp />} />
                <Route path="/test" element={<Comp2 />} />
            </Routes>             
        </BrowserRouter>

127.0.0.1 - - [16/Sep/2023:22:47:25 +0000] "GET /app2 HTTP/1.1" 302 145 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
127.0.0.1 - - [16/Sep/2023:22:47:25 +0000] "GET /app2/ HTTP/1.1" 200 1052 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
2023/09/16 22:47:25 [warn] 29#29: *1 an upstream response is buffered to a temporary file /var/cache/nginx/proxy_temp/1/00/0000000001 while reading upstream, client: 127.0.0.1, server: 127.0.0.1, request: "GET /app2/main.js HTTP/1.1", upstream: "http://127.0.0.1:5300/main.js", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
127.0.0.1 - - [16/Sep/2023:22:47:25 +0000] "GET /app2/main.js HTTP/1.1" 200 9778028 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"

I added a catch all route to the second app for test

        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Comp2 />} />
                <Route path="/aaa" element={<Comp2 />} />
                <Route path="/bbb" element={<Comp />} />
                <Route path="*" element={<Comp />} />
            </Routes>             
        </BrowserRouter>

This time, the page loads but all paths of app2 are showing Comp, the catch all rule is taking precedence. This is when I try to access through the reverse proxyhttp://127.0.0.1:8080/app2, but when accessing the second app directly on it's server http://127.0.0.1:5300, the paths loads the correct component

This is logs from 1/ reverse proxy and 2/ app2 nginx server, when hitting http://127.0.0.1:8080/app2 1/ nginx reverse proxy

2023/09/22 06:19:32 [notice] 29#29: *12 "https?://[^/]+/app2/(.*)" does not match "", client: 127.0.0.1, server: 127.0.0.1, request: "GET /app2/ HTTP/1.1", host: "127.0.0.1:8080"
127.0.0.1 - - [22/Sep/2023:06:19:32 +0000] "GET /app2/ HTTP/1.1" 200 1051 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
2023/09/22 06:19:32 [notice] 29#29: *12 "https?://[^/]+/app2/(.*)" matches "http://127.0.0.1:8080/app2/", client: 127.0.0.1, server: 127.0.0.1, request: "GET /app2/main.js HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:32 [notice] 29#29: *12 "^((?!/app2).*)" does not match "/app2/main.js", client: 127.0.0.1, server: 127.0.0.1, request: "GET /app2/main.js HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:32 [warn] 29#29: *12 an upstream response is buffered to a temporary file /var/cache/nginx/proxy_temp/2/00/0000000002 while reading upstream, client: 127.0.0.1, server: 127.0.0.1, request: "GET /app2/main.js HTTP/1.1", upstream: "http://127.0.0.1:5300/main.js", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
127.0.0.1 - - [22/Sep/2023:06:19:32 +0000] "GET /app2/main.js HTTP/1.1" 200 9875574 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
2023/09/22 06:19:33 [notice] 29#29: *12 "https?://[^/]+/app2/(.*)" matches "http://127.0.0.1:8080/app2/", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/faces/face_1.jpg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *12 "^((?!/app2).*)" matches "/assets/img/faces/face_1.jpg", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/faces/face_1.jpg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *12 rewritten data: "/app2/assets/img/faces/face_1.jpg", args: "", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/faces/face_1.jpg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *11 "https?://[^/]+/app2/(.*)" matches "http://127.0.0.1:8080/app2/", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/faces/face_4.jpg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *11 "^((?!/app2).*)" matches "/assets/img/faces/face_4.jpg", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/faces/face_4.jpg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *11 rewritten data: "/app2/assets/img/faces/face_4.jpg", args: "", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/faces/face_4.jpg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
127.0.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/img/faces/face_1.jpg HTTP/1.1" 200 64369 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
2023/09/22 06:19:33 [notice] 29#29: *1 "https?://[^/]+/app2/(.*)" matches "http://127.0.0.1:8080/app2/", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/faces/face_3.jpg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *1 "^((?!/app2).*)" matches "/assets/img/faces/face_3.jpg", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/faces/face_3.jpg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *1 rewritten data: "/app2/assets/img/faces/face_3.jpg", args: "", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/faces/face_3.jpg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
127.0.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/img/faces/face_4.jpg HTTP/1.1" 200 56227 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
2023/09/22 06:19:33 [notice] 29#29: *12 "https?://[^/]+/app2/(.*)" matches "http://127.0.0.1:8080/app2/", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/faces/face_5.jpg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *12 "^((?!/app2).*)" matches "/assets/img/faces/face_5.jpg", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/faces/face_5.jpg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *12 rewritten data: "/app2/assets/img/faces/face_5.jpg", args: "", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/faces/face_5.jpg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
127.0.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/img/faces/face_3.jpg HTTP/1.1" 200 59833 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
2023/09/22 06:19:33 [notice] 29#29: *10 "https?://[^/]+/app2/(.*)" matches "http://127.0.0.1:8080/app2/", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/faces/face_6.jpg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *10 "^((?!/app2).*)" matches "/assets/img/faces/face_6.jpg", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/faces/face_6.jpg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *10 rewritten data: "/app2/assets/img/faces/face_6.jpg", args: "", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/faces/face_6.jpg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *1 "https?://[^/]+/app2/(.*)" matches "http://127.0.0.1:8080/app2/", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/faces/face_2.jpg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *1 "^((?!/app2).*)" matches "/assets/img/faces/face_2.jpg", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/faces/face_2.jpg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *1 rewritten data: "/app2/assets/img/faces/face_2.jpg", args: "", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/faces/face_2.jpg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
127.0.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/img/faces/face_5.jpg HTTP/1.1" 200 66106 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
127.0.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/img/faces/face_6.jpg HTTP/1.1" 200 60971 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
127.0.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/img/faces/face_2.jpg HTTP/1.1" 200 80120 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
2023/09/22 06:19:33 [notice] 29#29: *10 "https?://[^/]+/app2/(.*)" matches "http://127.0.0.1:8080/app2/", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/css/fonts/Font-Awesome/fontawesome-webfont.woff2?v=4.7.0 HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *10 "^((?!/app2).*)" matches "/assets/css/fonts/Font-Awesome/fontawesome-webfont.woff2", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/css/fonts/Font-Awesome/fontawesome-webfont.woff2?v=4.7.0 HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *10 rewritten data: "/app2/assets/css/fonts/Font-Awesome/fontawesome-webfont.woff2", args: "v=4.7.0", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/css/fonts/Font-Awesome/fontawesome-webfont.woff2?v=4.7.0 HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
127.0.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/css/fonts/Font-Awesome/fontawesome-webfont.woff2?v=4.7.0 HTTP/1.1" 200 77160 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
2023/09/22 06:19:33 [notice] 29#29: *12 "https?://[^/]+/app2/(.*)" matches "http://127.0.0.1:8080/app2/", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/css/fonts/Pe-Icon-Stroke/Pe-icon-7-stroke.woff?d7yf1v HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *12 "^((?!/app2).*)" matches "/assets/css/fonts/Pe-Icon-Stroke/Pe-icon-7-stroke.woff", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/css/fonts/Pe-Icon-Stroke/Pe-icon-7-stroke.woff?d7yf1v HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *12 rewritten data: "/app2/assets/css/fonts/Pe-Icon-Stroke/Pe-icon-7-stroke.woff", args: "d7yf1v", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/css/fonts/Pe-Icon-Stroke/Pe-icon-7-stroke.woff?d7yf1v HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
127.0.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/css/fonts/Pe-Icon-Stroke/Pe-icon-7-stroke.woff?d7yf1v HTTP/1.1" 200 58556 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
2023/09/22 06:19:33 [notice] 29#29: *1 "https?://[^/]+/app2/(.*)" matches "http://127.0.0.1:8080/app2/", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/header-1.jpeg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *1 "^((?!/app2).*)" matches "/assets/img/header-1.jpeg", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/header-1.jpeg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *1 rewritten data: "/app2/assets/img/header-1.jpeg", args: "", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/header-1.jpeg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
127.0.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/img/header-1.jpeg HTTP/1.1" 200 430070 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
2023/09/22 06:19:33 [notice] 29#29: *11 "https?://[^/]+/app2/(.*)" matches "http://127.0.0.1:8080/app2/", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/header-2.jpeg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *11 "^((?!/app2).*)" matches "/assets/img/header-2.jpeg", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/header-2.jpeg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *11 rewritten data: "/app2/assets/img/header-2.jpeg", args: "", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/header-2.jpeg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
127.0.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/img/header-2.jpeg HTTP/1.1" 200 238167 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
2023/09/22 06:19:33 [notice] 29#29: *10 "https?://[^/]+/app2/(.*)" matches "http://127.0.0.1:8080/app2/", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/office-1.jpeg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *10 "^((?!/app2).*)" matches "/assets/img/office-1.jpeg", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/office-1.jpeg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:33 [notice] 29#29: *10 rewritten data: "/app2/assets/img/office-1.jpeg", args: "", client: 127.0.0.1, server: 127.0.0.1, request: "GET /assets/img/office-1.jpeg HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
127.0.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/img/office-1.jpeg HTTP/1.1" 200 383149 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
2023/09/22 06:19:34 [notice] 29#29: *10 "https?://[^/]+/app2/(.*)" matches "http://127.0.0.1:8080/app2/", client: 127.0.0.1, server: 127.0.0.1, request: "GET /app2/favicon.png HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:34 [notice] 29#29: *10 "^((?!/app2).*)" does not match "/app2/favicon.png", client: 127.0.0.1, server: 127.0.0.1, request: "GET /app2/favicon.png HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
127.0.0.1 - - [22/Sep/2023:06:19:34 +0000] "GET /app2/favicon.png HTTP/1.1" 200 143748 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
2023/09/22 06:19:34 [notice] 29#29: *10 "https?://[^/]+/app2/(.*)" matches "http://127.0.0.1:8080/app2/", client: 127.0.0.1, server: 127.0.0.1, request: "GET /static/assets/img/favicon.png HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:34 [notice] 29#29: *10 "^((?!/app2).*)" matches "/static/assets/img/favicon.png", client: 127.0.0.1, server: 127.0.0.1, request: "GET /static/assets/img/favicon.png HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
2023/09/22 06:19:34 [notice] 29#29: *10 rewritten data: "/app2/static/assets/img/favicon.png", args: "", client: 127.0.0.1, server: 127.0.0.1, request: "GET /static/assets/img/favicon.png HTTP/1.1", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
127.0.0.1 - - [22/Sep/2023:06:19:34 +0000] "GET /static/assets/img/favicon.png HTTP/1.1" 200 1051 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"

2/ nginx server of app2

172.17.0.1 - - [22/Sep/2023:06:19:32 +0000] "GET / HTTP/1.0" 200 1051 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" "-"
172.17.0.1 - - [22/Sep/2023:06:19:32 +0000] "GET /main.js HTTP/1.0" 200 9875574 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" "-"
172.17.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/img/faces/face_1.jpg HTTP/1.0" 200 64369 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" "-"
172.17.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/img/faces/face_4.jpg HTTP/1.0" 200 56227 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" "-"
172.17.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/img/faces/face_3.jpg HTTP/1.0" 200 59833 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" "-"
172.17.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/img/faces/face_5.jpg HTTP/1.0" 200 66106 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" "-"
172.17.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/img/faces/face_6.jpg HTTP/1.0" 200 60971 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" "-"
172.17.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/img/faces/face_2.jpg HTTP/1.0" 200 80120 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" "-"
172.17.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/css/fonts/Font-Awesome/fontawesome-webfont.woff2?v=4.7.0 HTTP/1.0" 200 77160 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" "-"
172.17.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/css/fonts/Pe-Icon-Stroke/Pe-icon-7-stroke.woff?d7yf1v HTTP/1.0" 200 58556 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" "-"
172.17.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/img/header-1.jpeg HTTP/1.0" 200 430070 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" "-"
172.17.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/img/header-2.jpeg HTTP/1.0" 200 238167 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" "-"
172.17.0.1 - - [22/Sep/2023:06:19:33 +0000] "GET /assets/img/office-1.jpeg HTTP/1.0" 200 383149 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" "-"
172.17.0.1 - - [22/Sep/2023:06:19:34 +0000] "GET /favicon.png HTTP/1.0" 200 143748 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" "-"
172.17.0.1 - - [22/Sep/2023:06:19:34 +0000] "GET /static/assets/img/favicon.png HTTP/1.0" 200 1051 "http://127.0.0.1:8080/app2/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" "-"

I tried also to use rewrite for nginx (and with many diff regex) but got similar errors

        location /app2/ {
            proxy_pass http://127.0.0.1:5300/;
            proxy_set_header  Host 127.0.0.1:5300; 
            rewrite ^/app2/(.*)$ /$1 break;
        }

How to configure nginx reverse proxy to remove /app2 from the path and return the right page from the target app.

Asmaa
  • 31
  • 5
  • The general problem with a reverse proxy is that proxy_pass does not change HTML and other content. If for example a client requests /app2/index.html and the HTML code your app2 generates has an <img src="/assets/face_2.jpg" that won't be changed to <img src="/app2/assets/face_2.jpg" by proxy_pass . And when the site visitor then requests /assets/face_2.jpg that goes to your main site (and probably is not found there resulting in a 404 error). I'll link to longer older answer thatis more generic than Geralds React specific answer – HBruijn Sep 22 '23 at 08:03
  • 2
    Does this answer your question? How to handle relative urls correctly with a nginx reverse proxy – HBruijn Sep 22 '23 at 08:03
  • 1
    Nevertheless, rewriting the HTML at the proxy should always be a last resort. Every framework provides a way to configure the base URL. – Gerald Schneider Sep 22 '23 at 08:59
  • Thank you for your answers. I actually don't have issues with assets. The assets of app2 are loading correctly. More details in https://serverfault.com/questions/1143929/target-app-assets-not-loaded-with-nginx-proxy-pass. The only issue with the nginx.conf I shared is that routing inside the apps is not working. Every path is loading the catch all route, and when I it remove, the page does not load at all. – Asmaa Sep 23 '23 at 19:20
  • Well, then it is completely unclear to me what your actual problem is. – Gerald Schneider Sep 23 '23 at 20:06
  • Sorry if I'm not clear. With the nginx.conf I shared, I don't see an issue loading images & fonts (this has been fixed by https://serverfault.com/questions/1143929/target-app-assets-not-loaded-with-nginx-proxy-pass). The issue is that all paths /app2, /app2/aaa, and /app2/bbb, are showing the same react component Comp, as if all paths are handled by the catch all route. If I remove the catch all route, noting loads in browser. – Asmaa Sep 26 '23 at 00:46

1 Answers1

1

I think I figured out what you are trying to solve.

When you request a page from /app2/ it tries to load additional resources like /main.js, which results in a 404 error because it should be /app2/main.js instead.

If this is your problem you are trying an extremely complicated and unnecessary approach to fix it.

I'm further assuming the second app is also a React app, like the first. If this is the case you only need to configure the base url of your app correctly.

In your package.json file change the homepage entry to a relative path, excluding any sub-domain/nested directory.

In your case that would be:

{
  ...,
  "homepage": "/app2/",
  ...
}

Then, the only thing you need in your nginx config would be:

        location /app2/ {
            proxy_pass http://127.0.0.1:5300/;
            ### I don't think the Host header is even necessary
            # proxy_set_header  Host 127.0.0.1:5300;
        }

Your React app should now generate the correct URL for the reverse proxy automatically.

Gerald Schneider
  • 25,025
  • 8
  • 61
  • 90
  • I added "homepage": "/app2/" to package.json, but it didn't work. I'm not sure if I'm missing something What I noticed: when adding catch all route <Route path="*" .. /> to app2, I see main.js in browser sources. Removing this route, main.js is missing from browser. – Asmaa Sep 23 '23 at 19:43
  • and reverse proxy log when not using the catch all route has this WARN just before the GET /app2/main.js call 
    2023/09/23 19:02:55 [warn] 29#29: *291 an upstream response is buffered to a temporary file /var/cache/nginx/proxy_temp/2/01/0000000012 while reading upstream, client: 127.0.0.1, server: 127.0.0.1, request: "GET /app2/main.js HTTP/1.1", upstream: "http://127.0.0.1:5300/main.js", host: "127.0.0.1:8080", referrer: "http://127.0.0.1:8080/app2/"
    – Asmaa Sep 23 '23 at 19:44