React app “frontend” not working properly when double proxing in NGINX

Issue

This Content is from Stack Overflow. Question asked by Guillergood

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;
        }
...



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?