React静态部署至K8s后显示空白页问题（Docker+NGINX）

使用create-react-app创建React项目，通过Docker构建镜像（执行npm run build并将构建产物复制到NGINX中），部署到公司Kubernetes集群后，Ingress端点渲染空白页面，无404错误，具体表现如下：

浏览器审查元素可见，<head>标签包含脚本标签<script defer="defer" src="/static/js/main.581a2f56.js"></script>和样式标签<link href="/static/css/main.9b9c3870.css" rel="stylesheet">，但<body>仅包含空根节点<div id="root"></div>。所有HTTP请求返回200状态码，所有路由均指向空白页。

NGINX配置 #

server {
    listen 80;
    root  /usr/share/nginx/html;
    include /etc/nginx/mime.types;
    
    location / {
        index index.html index.htm
        try_files $uri $uri/ /index.html;
    } 
}

Dockerfile #

# Name the node stage "builder"
FROM node:14 AS builder

# Set working directory
WORKDIR /app

COPY package*.json /app/

RUN npm install

COPY ./ /app/

RUN npm run build

# nginx stage for serving content
FROM nginx:1.15

# Set working directory to nginx asset directory
WORKDIR /usr/share/nginx/html

# Copy static assets from builder stage
COPY --from=builder /app/build .
COPY --from=builder /app/nginx/nginx.conf /etc/nginx/conf.d/

EXPOSE 80

# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]

已尝试的解决方案：

• 在package.json中设置homepage为"https://companyendpoint.com"或"."
• 为react-router设置basename，值包括{process.env.PUBLIC_URL}、"/"、"/React"
• 改用HashRouter替代BrowserRouter
• 调整NGINX配置

内容的提问来源于stack exchange，提问作者prgx