Ad

Cannot Use Url To Navigate In React Through Nginx

I am serving my static file using nginx(react frontend). I have used different urls like /login /user /home for each page.

My nginx doesn't redirect these to my index.html file.

I made some changes and now I cannot get my main page either. It returns cannot get /.

This is my nginx.conf file. I am running it on windows. My index.html is inside the build folder. How do I get my nginx to use Router and Link in reactjs, so that I can get the page by referring to the link or through navigation bar?

worker_processes  5;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;


    server {
        listen   80;
        server_name  ip;

        location / {
            root   /Users/username/projectfolder/build;    
            index  index.html index.htm;
            try_files $uri $uri/ index.html;
            proxy_pass http://ipaddress:portnumber;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
         }
     }
 }

UPDATE:

I have tried the following configuration

server {
        listen some_port;
        server_name some_ip;
        root C:\\nginx-1.17.1\\build\\;
        index  index.html index.htm;
        location /test/ {   
            alias C:\\nginx-1.17.1\\build\\;
            index  index.html index.htm;
            try_files $uri \\index.html;
            #internal;

            #return index;
        }
        location = /index.html {
        # no try_files here
        return 502;
    }
        location / {  
            #root   C:\\Users\\DEV-a0a02yc\\insurance_automation\\build;
            try_files $uri $uri\ \index.html?$args;
            #try_files $uri/ index.html;
            proxy_pass http://some_ip:some_port;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    }

In the /test/ url I am getting a blank page and a rewrite/internal redirection error saying :

2019/07/01 09:53:22 [error] 17820#18008: *1 rewrite or internal redirection cycle while internally redirecting to "/favicon.ico\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html\ \index.html"

This is my network tab: enter image description here

How do I serve my index.html file here to handle redirection when entering this url?

Ad

Answer

What are the proxy lines for in your configuration?

Shouldn't you either serve from html files or proxy pass to a different address?

I would suggest trying to remove the proxy lines from the configuration.

Also on an unrelated note the proxy_pass line is invalid. The server address "ipaddress" is a far stretch (though not impossible with dns) and the port "portnumber" is definitely invalid.

So the minimum required configuration is the following:

location / {
    root /folder/subfolder/build;
    try_files $uri /index.html;
}

root defines your react build folder location and try_files defines that nginx should look if the requested file exists, if not it serves the index.html.

Ad
source: stackoverflow.com
Ad