500 internal server error Nginx running react app

Question

Following this answer, I have my nginx server set up like so:

server {
    server_name portal.productive.city www.portal.productive.city;
    root /www/Productive-Website/my-app/build;
    index index.html index.htm;
    rewrite ^/(.*)/$ $1 permanent;
    location / {
       try_files $uri?$args $uri/ $uri.html?$args /index.html?$args;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/portal.productive.city/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/portal.productive.city/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


}

My other server (in the same file) (created by lets-encrypt) is:

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


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


    listen 80;
    server_name portal.productive.city www.portal.productive.city;
    return 404; # managed by Certbot
}

When I try to go to: www.portal.productive.city or www.portal.productive.city/signin I get a 500 Internal Server Error

My error-log file looks like:

2018/08/31 14:43:08 [error] 29581#29581: *25 rewrite or internal redirection cycle while internally redirecting to "/index.html", client: 74.105.149.67, server: portal.productive.city, request: "GET / HTTP/1.1", host: "www.portal.productive.city"

2018/08/31 14:43:08 [error] 29581#29581: *26 rewrite or internal redirection cycle while internally redirecting to "/index.html", client: 74.105.149.67, server: portal.productive.city, request: "GET /favicon.ico HTTP/1.1", host: "www.portal.productive.city", referrer: "https://www.portal.productive.city/"

The favicon.ico exists under path/to/repo/build

Edit: I cleared cache and restructured the server as follows:

server {
    server_name portal.productive.city www.portal.productive.city;
    root /www/Productive-Website/my-app/build;
    index index.html index.htm;
    location / {
        try_files $uri?$args $uri/ $uri.html?$args /index.html?$args;
    }

    listen 80;
    if ($scheme != "https") {
        return 301 https://$host$request_uri?$args;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/portal.productive.city/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/portal.productive.city/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
}

The error-file is now:

2018/08/31 15:17:54 [error] 29789#29789: *17 rewrite or internal redirection cycle while internally redirecting to "/index.html", client: 74.105.149.67, server: portal.productive.city, request: "GET /? HTTP/1.1", host: "www.portal.productive.city"

2018/08/31 15:17:54 [error] 29789#29789: *18 rewrite or internal redirection cycle while internally redirecting to "/index.html", client: 74.105.149.67, server: portal.productive.city, request: "GET /favicon.ico HTTP/1.1", host: "www.portal.productive.city", referrer: "https://www.portal.productive.city/?"

Answer 1

You shouldn't have 2 server files with the same server_name, this makes your configuration harder to find. And, if by chance you configure both of them to listen to the same ports, it will confuse NGINX on which one to render. First, move them into the same one and redirect based on $scheme instead of $host. But that is not the real issue. You've got an redirect that is looping because it matches every request ending with '/'

server {
    server_name portal.productive.city www.portal.productive.city;
    root /www/Productive-Website/my-app/build;
    index index.html index.htm;
    # rewrite ^/(.*)/$ $1 permanent; Your REAL problem is here. You've got an redirect that is looping because it matches every request ending with '/'
    location / {
        try_files $uri?$args $uri/ $uri.html?$args /index.html?$args;
    }
    listen 80;
    if ($scheme != "https") {
        return 301 https://$host$request_uri?$args
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/portal.productive.city/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/portal.productive.city/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
}

The https redirect like this means: "If the $scheme is not 'https', redirect to https://$host$request_uri?$args". Which translates to: "https:// address on the same host, on the same path and whith the same URL arguments used on the access".