React app "frontend" not working properly when double proxing in NGINX

Viewed 15

I have one app I want to upload to my college project server. It is an NGINX-based server that contains a reverse proxy pointing to a "backend" and a "frontend".

Reverse proxy nginx.conf of my project:

worker_processes 1;

events { worker_connections 1024; }

http {

    sendfile on;

    upstream backend {
        server backend:8080;
    }

    upstream frontend {
        server frontend:80;
    }

    server {
        listen 9005;
        access_log  /var/log/nginx/access.log;
        error_log  /var/log/nginx/error.log notice;
        rewrite_log on;
        location /backend {
            add_header Requested-URI $request_uri always;
            add_header Final-URI $uri always;
            rewrite /backend/(.*) /$1  break;
            proxy_pass         http://backend;
            proxy_redirect     off;
            proxy_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-Host $server_name;
        }

        location / {
                proxy_pass         http://frontend;
                proxy_redirect off;
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }

}

React app nginx.conf:

worker_processes 4;

events { worker_connections 1024; }

http {
    server {
        listen 80;
        root  /usr/share/nginx/html;
        include /etc/nginx/mime.types;

        location / {
            try_files $uri /index.html;
        }
    }
}

With this current configuration above, the project runs great locally. However, when I upload it to the college, a blank page is displayed. My guts are telling me that a bad URL redirection is going on, but I am not able to get it right. However the backend routes are working in both enviroments.

College server default.conf:

server {
        ...
        root /projects;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html index.php;

        server_name _;
        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                alias /projects/college_projects/;
                autoindex off;
                try_files $uri $uri/ =404;
        }
        location /my_project { #LOCATION OF THE PROJECT ABOVE
                proxy_pass  http://localhost:9005;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
...

I would be deeply grateful if anyone could advise/spot something wrong.

0 Answers
Related