为什么docker nginx容器不渲染react Route？答案

【问题标题】：Why does docker nginx container not render react Route?为什么docker nginx容器不渲染react Route？
【发布时间】：2021-11-04 10:04:06
【问题描述】：

我一直在网上搜索这个问题的答案，但我没有找到我的问题的确切答案。我有一个反应应用程序。它可以在容器之外构建和运行。我现在想对 react 应用程序进行 dockerize 处理。我觉得我以前做过这个没有问题，但现在它给我带来了问题。我构建图像并在本地运行它。该应用程序在某种程度上可以正确提供服务，因为页眉组件和页脚一样出现并且工作正常。未显示的部分都在 react Route 组件中，但是 html 甚至出现在 dom 上。正如我在控制台中看到的那样。即使我在浏览器窗口中除了页眉和页脚之外什么都看不到。如果我在浏览器窗口的正确位置单击，我什至可以将图像拖到桌面上。然后我可以很好地查看图像。这对我来说似乎非常奇怪。我觉得这一定是某种 nginx/docker react-router 配置问题。

Dockerfile

FROM nginx
COPY build /usr/share/nginx/html
COPY docker/default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]

docker 文件夹中的 default.conf 文件

server {
 listen 80;
 server_name frontend;

 location / {
   # This would be the directory where your React app's static files are stored at
   root /usr/share/nginx/html;
   try_files $uri /index.html;
 }
}

任何想法是什么导致了这个问题以及如何解决它，我们将不胜感激。谢谢。

【问题讨论】：

您访问页面的网址是什么？如果您在 www.example.com/subpath 中托管它，则需要为路由器设置 basename="/subpath/"。 stackoverflow.com/questions/51639352/…
嗨@AntonioPantano 我认为这不适用，因为我正在使用react-router-dom。当我尝试这样做时，我得到 react-router-dom 不支持 browserHistory
如果您的页面加载了一些 html 并且在提供文件时没有 404，那么几乎可以肯定是 React 配置错误，而不是 Nginx。如果是 Nginx，则不会提供来自 Build 目录的文件。
不关心历史。相关部分是您应该添加到路由器或 BrowserRouter 组件的 basename 属性。但这仅适用于从域的子路径访问网站的情况。
@Dan 我不知道答案，但是您的 nginx 配置中有一个奇怪的 location 块，您在其中进行了一些反向代理设置，但根本没有使用任何 proxy_pass 指令！ /services/m 路线是什么？应该如何提供服务？

标签： reactjs docker nginx react-router-dom

【解决方案1】：

我认为这可能是 react 的错误，也可能是 nginx 或我不确定的问题。但是我的 App.css 文件中有一个动画。该动画出现在所有主要页面组件上。当我删除该css时，它就起作用了。这就是动画的样子。奇怪的是它在本地开发服务器上运行时工作。我无法直接获取命令，并且从未在本地开发服务器上运行构建工件。所以这将是一些尝试。但无论如何。谨慎使用此动画与 react 和 nginx。

@keyframes appear {
  from{opacity: 0%}
  to{opacity: 100%}
}

【讨论】：

这些天我更像是一个后端/云家伙。我觉得我记得从那天起，不透明使用起来很危险。也许这是我刚刚忘记的常识。