Getting a blank page in react app while deploying using ngnix as reverse proxy-CodePudding

I have deployed a FASTAPI application with react as a frontend using docker-compose and nginx as reverse proxy.

When I try to visit the website I'm getting a blank page, but other services(backend) are working properly, also favicon and website name in navbar are loading.

I looked into the console, and seems like react is unable to locate the other static files.

server {
    listen 443 ssl http2 default_server;
    listen [::]:443 ssl http2;
    server_name pbl.asia www.pbl.asia;
    server_tokens off;

    location = /favicon.ico {root /usr/share/nginx/html;}
     root /usr/share/nginx/html;
     index index.html index.htm;
    location = / {
        try_files $uri /index.html;
    }
    location / {
        proxy_set_header    Host                $http_host;
        proxy_set_header    X-Real-IP           $remote_addr;
        proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
        proxy_pass "http://backend:8000";
        }

    ssl_certificate /etc/letsencrypt/live/pbl.asia/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/pbl.asia/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

}

This is my ngnix config file.

# Frontend
  frontend:
    build:
      context: frontend
    container_name: frontend
    depends_on:
      - backend
    volumes:
    - react_build:/frontend/build

  # Nginx service
  nginx:
    image: nginx:1.21-alpine
    ports:
    - 80:80
    - 443:443
    volumes:
    - ./nginx:/etc/nginx/conf.d
    - ./data/certbot/conf:/etc/letsencrypt
    - ./data/certbot/www:/var/www/certbot
    - react_build:/usr/share/nginx/html
    command: "/bin/sh -c 'while :; do sleep 6h & wait $${!}; nginx -s reload; done & nginx -g \"daemon off;\"'"
    depends_on:
      - backend
      - frontend
    restart: always

docker-compose.yaml

FROM node:16.8.0-slim

WORKDIR /frontend

COPY package.json ./

RUN npm install

COPY . ./

RUN npm run build

This is my Dockerfile

CodePudding user response：

Specifying the index inside the location block solved the issue for me.

root /usr/share/nginx/html;

    location = /home {
        index index.html index.htm;
        try_files $uri /index.html;
        }
    location ~ "^\/([0-9a-zA-Z =-\?\/-_]{7,})$" {
            proxy_set_header    Host                $http_host;
            proxy_set_header    X-Real-IP           $remote_addr;
            proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
            proxy_pass 'http://backend:8000';
        }

Also specified the separate regex for the backend part, otherwise NGINX would route all the requests to the backend resulting in internal server error.