Cannot show customer 50x html in Create React App with NGINX build

Question

I am build nginx with CRA as frontend and also have own backend api I have problem in redirecting to 50x.html when the backend return 50x

I have follow the solution in nginx is not showing custom 50x error page with php-fpm and

nginx custom error page 502 with css and image files

My Dockerfile was as below:

FROM node:18-bullseye-slim as react_build 
#also say 
WORKDIR /app
#copy the react app to the container
#
COPY package*.json ./ 
#COPY . /app/ 
COPY . .

# #prepare the contiainer for building react 
RUN npm install --silent
RUN npm install react-scripts@5.0.1 -g --silent 
RUN npm run build 

#prepare nginx
FROM nginx:1.16.0-alpine

COPY --from=react_build /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
COPY nginx/50x.html /usr/share/nginx/html

#fire up nginx
EXPOSE 80 
CMD ["nginx","-g","daemon off;"]

and my nginx.conf was located in nginx folder in the root of the CRA, it was as shown in below:

    server {

  listen 80;
  


  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root    /usr/share/nginx/html;
    try_files $uri $uri/ /50x.html = 500 502 503; 
  }
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html; 
  }

}

my frontend return this:

{
"message": "Request failed with status code 500",
"name": "AxiosError",
"stack": "AxiosError: Request failed with status code 500\n    at http://localhost:3001/static/js/main.ae2e2cbe.js:2:430462\n    at XMLHttpRequest.d (http://localhost:3001/static/js/main.ae2e2cbe.js:2:430610)",
"config": {
    "transitional": {
        "silentJSONParsing": true,
        "forcedJSONParsing": true,
        "clarifyTimeoutError": false
    },
    "transformRequest": [
        null
    ],
    "transformResponse": [
        null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1,
    "env": {},
    "headers": {
        "Accept": "application/json, text/plain, */*",
        "Authorization": "ApiKey V**********************==",
        "apikey": "V************************==",
        "apikey_id": "Tx5dBYUBFwx4oQ2b15KP"
    },
    "params": {
        "path": "/test/test",
        "size": 10,
        "order": "desc"
    },
    "method": "get",
    "url": "http://192.168.13.251:8000/device/"
},
"code": "ERR_BAD_RESPONSE",
"status": 500

}

and i have try:

    server {
  listen 80;

  location / {
    rewrite ^/viewer(/.*)$ $1 break;
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

without success, i would appreciate if someone can help,thanks Jeff

Cannot show customer 50x html in Create React App with NGINX build

0 Answers0