react.js 应用程序显示 404 在 nginx 服务器中找不到

Question

我将 react.js 应用程序上传到服务器。我正在使用 nginx 服务器。应用程序工作正常。但是当我转到另一个页面并刷新时，该站点无法正常工作。它显示 404 Not found 错误。

我该如何解决这个问题？

原文由 Sunil tc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当您的 react.js 应用程序加载时，路由在前端由 react-router 处理。比如说你在 http://a.com 。然后在您导航到的页面上 http://a.com/b 。此路由更改在浏览器本身中处理。现在，当您在新选项卡中刷新或打开 url http://a.com/b 时，请求会转到您的 nginx 特定路由不存在，因此您会得到 404。

为避免这种情况，您需要为所有不匹配的路由加载根文件（通常是 index.html），以便 nginx 发送文件，然后由浏览器上的 react 应用程序处理路由。为此，您必须适当地在 nginx.conf 或 sites-enabled 中进行以下更改

location / {
 try_files $uri /index.html;
}

这告诉 nginx 寻找指定的 $uri ，如果找不到，则将 index.html 发送回浏览器。 （有关详细信息，请参阅 https://serverfault.com/questions/329592/how-does-try-files-work ）

原文由 Panther 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这里给出的答案是正确的。但是，当我试图在 docker 容器中部署我的 React 应用程序时，我一直在努力解决这个问题。问题在于，如何更改 nginx 容器内的配置。

第 1 步：准备您的 Dockerfile

 # Stage 1
FROM node:8 as react-build
WORKDIR /app
COPY . ./
RUN yarn
RUN yarn build

# Stage 2 - the production environment
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=react-build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

请参阅带有命令的行： COPY nginx.conf /etc/nginx/conf.d/default.conf 。在这里，我们告诉 Docker 将 nginx.conf 文件从 docker 主机复制到 docker 容器。

第 2 步：在您的应用程序根文件夹中有一个 nginx.conf 文件

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri /index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

第 3 步：现在构建 docker 镜像并运行它

$ docker build . -t react-docker

这应该会成功构建您的 docker 镜像。要检查这一点，请运行

$ docker images

现在运行

$ docker run -p 8000:80 react-docker

并导航到 http://localhost:8000

这是受此 博客 的启发。

原文由 Keet Sugathadasa 发布，翻译遵循 CC BY-SA 4.0 许可协议