Question 210857 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – When i change my nginx proxy_pass settings my react app not load

I have react app node js backend and nginx. I have already get certificate and install it by Certbot.

My application making get and post request, but for it i need to setup proxy_pass settings.

My server block file:

server {

        root /var/www/nikolsoborsocial/html;
        index index.html index.htm index.nginx-debian.html;

        server_name nikolsoborsocial nikolsoborsocial.org
                                     www.nikolsoborsocial.org;

        location / {
                try_files $uri $uri/ =404;
                               
        }
        
        


    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/nikolsoborsocial.org/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/nikolsoborsocial.org/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}

server {
    if ($host = www.nikolsoborsocial.org) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = nikolsoborsocial.org) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        listen [::]:80;

        server_name nikolsoborsocial nikolsoborsocial.org
                                     www.nikolsoborsocial.org;

        
        return 404; # managed by Certbot


}

Whera i need to add proxy_pass settings?

proxy_pass http://localhost:3000;
include proxy_params;

If i put it into 433 server location, insted of try_files $uri $uri/ =404; my react app not load and i got Cannot GET / error in browser.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I change my config file:

        server {

    root /var/www/nikolsoborsocial/html;
    index index.html index.htm index.nginx-debian.html;

    server_name nikolsoborsocial nikolsoborsocial.org
    www.nikolsoborsocial.org;

    location /api/ {
        proxy_pass http://localhost:3000;
        # include proxy_params;
    }


    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/nikolsoborsocial.org/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/nikolsoborsocial.org/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}


server {
    if ($host = www.nikolsoborsocial.org) {
        return 301 https://$host$request_uri;
        } # managed by Certbot


        if ($host = nikolsoborsocial.org) {
            return 301 https://$host$request_uri;
            } # managed by Certbot


            listen 80;
            listen [::]:80;

            server_name nikolsoborsocial nikolsoborsocial.org
            www.nikolsoborsocial.org;


            return 404; # managed by Certbot

        }

    Thank you for direction @ACS

    location /api/ - resolve my issue!


  2. 0

    You set up nginx configuration file to serve react file in server block which is ‘location /’.

    So if you try to add proxy_pass setting in ‘location /’ block, it overrides the code that serves react files. And Nginx will proxy the request to the backend server running on localhost:3000.

    How to resolve this issue?

    You have to serve files to this request in backend server, or add new location block.

    here is an example to add new location block

    server {
    root /var/www/nikolsoborsocial/html;
    index index.html index.htm index.nginx-debian.html;

    server_name nikolsoborsocial nikolsoborsocial.org www.nikolsoborsocial.org;

    location / {
        try_files $uri $uri/ =404;
    }

    # Proxy Pass settings
    location /app {
        proxy_pass http://localhost:3000;
        include proxy_params;
    }

    # SSL configuration
    listen [::]:443 ssl ipv6only=on;
    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/nikolsoborsocial.org/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/nikolsoborsocial.org/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search