使用 nginx 作为反向代理部署时在 React 应用程序中获取空白页面

Question

我已经使用 docker-compose 和 nginx 作为反向代理部署了一个 FASTAPI 应用程序作为前端。

当我尝试访问该网站时，我得到一个空白页面，但其他服务（后端）工作正常，导航栏中的网站图标和网站名称也在加载。

我查看了控制台，似乎 React 无法找到其他静态文件。

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;

}

这是我的 ngnix 配置文件。

# 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

这是我的 Dockerfile

Answer 1

在位置块内指定索引解决了我的问题。

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';
        }

还要为后端部分指定单独的正则表达式，否则 NGINX 会将所有请求路由到后端，导致内部服务器错误。

使用 nginx 作为反向代理部署时在 React 应用程序中获取空白页面

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

reverse-proxy

nginx

amazon-web-services

reactjs

docker-compose