500 Internal server error nginx react

I'm trying to serve some static content produced by running npm run build with create-react-app. Here's my nginx default.conf file:

server { listen 3000; location / { root usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } }

Here's my Dockerfile:

FROM node:14-slim as builder WORKDIR "/app" COPY ./package.json ./ RUN npm install COPY . . RUN npm run build FROM nginx EXPOSE 3000 COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf COPY --from=builder /app/build /usr/share/nginx/html

If I look inside my Docker container, I can see the files are all where they should be: //i.stack.imgur.com/H4hy7.png

Also for context, I'm also using nginx for routing, with this config:

upstream client { server client:3000; } upstream api { server api:3001; } server { listen 81; location / { proxy_pass //client; } location /api { rewrite /api/(.*) /$1 break; proxy_pass //api; } location /sockjs-node { proxy_pass //client; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; } }

However, if I try to navigate to localhost:81, I get this error:

client_1 | 2021/02/18 15:46:35 [error] 28#28: *10 rewrite or internal redirection cycle while internally redirecting to "/index.html", client: 172.18.0.3, server: , request: "GET / HTTP/1.0", host: "client"

Any ideas what the issue could be? Most other threads I've looked at focus on this bit, but I already have it and I'm sure the file locations are all correct.:

server { listen 3000; location / { root usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; <-- this line here } }

Another thread suggested adding "homepage": "./" to the package.json file, but this didn't seem to make any difference either.

Here's my nginx default.conf file:

server { listen 3000; location / { root usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } }

Here's my Dockerfile:

FROM node:14-slim as builder WORKDIR "/app" COPY ./package.json ./ RUN npm install COPY . . RUN npm run build FROM nginx EXPOSE 3000 COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf COPY --from=builder /app/build /usr/share/nginx/html

If I look inside my Docker container, I can see the files are all where they should be:

Also for context, I'm also using nginx for routing, with this config:

upstream client { server client:3000; } upstream api { server api:3001; } server { listen 81; location / { proxy_pass //client; } location /api { rewrite /api/(.*) /$1 break; proxy_pass //api; } location /sockjs-node { proxy_pass //client; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; } }

However, if I try to navigate to localhost:81, I get this error:

client_1 | 2021/02/18 15:46:35 [error] 28#28: *10 rewrite or internal redirection cycle while internally redirecting to "/index.html", client: 172.18.0.3, server: , request: "GET / HTTP/1.0", host: "client"

Any ideas what the issue could be? Most other threads I've looked at focus on this bit, but I already have it and I'm sure the file locations are all correct.:

server { listen 3000; location / { root usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; <-- this line here } }

Another thread suggested adding "homepage": "./" to the package.json file, but this didn't seem to make any difference either.

Sometimes NGINX server may give 500 Internal Server Error due to various reasons. In this article we will look at what does 500 Internal Server Error mean in NGINX and how to fix 500 Internal Server Error in NGINX.

NGINX gives 500 Internal Server Error when there is a server-side error that prevents NGINX from returning a proper response. It can be due to many different reasons such as faulty script, missing files referenced by code, inadequate file permissions, etc. NGINX is typically used as a reverse proxy server, so the most common reason for 500 Internal server is an error in one of its web servers like Apache that has encountered an issue and returned a 500 error response to NGINX, which is then returned to client browsers. There are various ways to fix internal server error in NGINX.

Bonus Read : How To Fix 504 Gateway Timeout Error in NGINX

How to Fix 500 Internal Server Error in NGINX

Here are the steps to fix 500 Internal Server Error in NGINX on localhost, CPanel, PHP, Ubuntu and other platforms.

1. Hard Refresh

Sometimes you may get 500 internal server error in NGINX because your server is being restarted at that moment, or there are too many requests for web server to handle.

So it doesn’t have enough resources to serve your request.

In such cases, you can simply do a hard refresh of your page to force the browser to get latest web page version and fix 500 internal server error in NGINX. You can do this by pressing

• Windows: Ctrl + F5
• Mac: Apple + R or Cmd + R
• Linux: F5

Bonus Read : How to Fix 502 Bad Gateway Error in NGINX

2. Examine Server Logs

Open your server log in a text editor to analyze the most recent requests. Every server log contains information about requested URLs and response code for each request.

Find out which requests result in 500 internal server error. It may be that only one page, or a few pages give this error while others work fine.

Find out which requests cause 500 internal server error. Once you have identified the problematic URLs, open a browser and request them again to confirm that is indeed the case.

Bonus Read : How to Increase Request Timeout in NGINX

3. Examine Your Script

Next, analyze the script to process the problematic requests. Is it actually present at the right location? Are you referencing it properly, in your URL mapping/routing file?

If your script refers to another file, find out if that file path is correct. If you have referenced any program/function, have you called it correctly?

4. Check File/Folder Permission

This can also be due to improper file/folder permissions. Did you add/modify any file/folder recently?

Typically, files need a 644 permission and folders need a 755 permission. You can use FileZilla (Windows) and Chmod (Linux) to modify file permissions.

You can also look at the permissions of other files & folders in your code and update the same for your files/folders accordingly.

Bonus Read : How to Increase File Upload Size in NGINX

5. Check redirections

If you have incorrectly setup any redirections in web server, it can give 500 internal server error. For example, if you use Apache web server, make sure you have properly configured mod_rewrite module and .htaccess file.

Also use a third-party tool to check the syntax of redirection/URL rewrite rules in your server configuration file.

6. Increase Script Timeout

You may also get 500 internal server error in NGINX if your web server (e.g Apache) is timing out on the request. In such cases, increase your web server (not NGINX) timeout value so that it stays connected to NGINX longer, and returns a proper response.

Hopefully, the above tips will help you fix 500 internal server error in NGINX.

Ubiq makes it easy to visualize data in minutes, and monitor in real-time dashboards. Try it Today!

Related posts:

• About Author

How do I fix NGINX 500 internal error?

How do I resolve 500 Internal server error in react?

How do I fix NGINX error?

What does 500 internal server error mean?