我使用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答案中看到:
homepage
,其值为“https://companyendpoint.com“或“”。
1.值为{process.env.PUBLIC_URL}
、“/"、“/React”的React路由器基名称
1.使用哈希路由器与浏览器路由器的比较- nginx.conf的不同配置
1条答案
按热度按时间dddzy1tm1#
几乎任何事情都可能导致这种情况,例如,JavaScript中的一个严重错误,
打开浏览器的控制台并查找错误消息以找出问题所在Loading failed for the with source...这始终是一个好主意。
在“白屏情况”下,常见的情况是您的应用无法加载JavaScript包。
如果检查index.html的DOM,您可以看到JavaScript包中的链接是绝对URL,从应用程序的根目录开始。
这就是问题的根源,你的应用程序不知道在哪里可以创建绝对URL。
noscript〉标记用于在禁用JavaScript的浏览器用户访问页面时向其显示消息。否则,该标记将保持隐藏状态。通常,该标记用于告诉用户页面需要JavaScript才能运行。默认情况下,该标记在Create React App的public/index.html文件中实现
请参阅此document以解决您的问题