kubernetes React静态部署呈现空页面- React、Docker、NGINX、k8s部署

6yoyoihd  于 2022-12-29  发布在  Kubernetes
关注(0)|答案(1)|浏览(168)

我使用create-react-app启动了一个react项目,需要将其部署到我们的Kubernetes集群上。我正在使用Docker创建一个运行npm run build的映像,并将构建文件复制到nginx。部署到Kubernetes集群后,入口端点呈现一白色空白页面,没有404错误。以下是一些详细信息:
在inspect元素上,页面显示包含<script defer="defer" src="/static/js/main.581a2f56.js"></script><link href="/static/css/main.9b9c3870.css" rel="stylesheet">资源的标记内的脚本标记,但是,主体包含空根div <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;
    } 
}

停靠文件

# 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;"]

我尝试了以下步骤,在许多其他stackoverflow答案中看到:

  1. homepage,其值为“https://companyendpoint.com“或“”。
    1.值为{process.env.PUBLIC_URL}、“/"、“/React”的React路由器基名称
    1.使用哈希路由器与浏览器路由器的比较
  2. nginx.conf的不同配置
dddzy1tm

dddzy1tm1#

几乎任何事情都可能导致这种情况,例如,JavaScript中的一个严重错误,
打开浏览器的控制台并查找错误消息以找出问题所在Loading failed for the with source...这始终是一个好主意。
在“白屏情况”下,常见的情况是您的应用无法加载JavaScript包。
如果检查index.html的DOM,您可以看到JavaScript包中的链接是绝对URL,从应用程序的根目录开始。

<script src="/static/js/1.3djhfha.chunk.js"></script>
<script src="/static/js/main.detdjhs0.chunk.js"></script>

这就是问题的根源,你的应用程序不知道在哪里可以创建绝对URL。
noscript〉标记用于在禁用JavaScript的浏览器用户访问页面时向其显示消息。否则,该标记将保持隐藏状态。通常,该标记用于告诉用户页面需要JavaScript才能运行。默认情况下,该标记在Create React App的public/index.html文件中实现
请参阅此document以解决您的问题

相关问题