我将 react.js 应用程序上传到服务器。我正在使用 nginx 服务器。应用程序运行良好。但是当我转到其他页面并刷新时，网站无法正常工作。它显示 404 Not found 错误。
我该如何解决这个问题。
谢谢。
react.js 应用程序显示 404 在 nginx 服务器中找不到
IT技术
reactjs
nginx
2021-04-19 04:56:06
6个回答
当您的react.js应用程序加载时，路由在前端由react-router. 比如说你在http://a.com。然后在您导航到的页面上http://a.com/b。此路由更改在浏览器本身中处理。现在，当您http://a.com/b在新选项卡中刷新或打开 url时，请求会发送到您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）
这里给出的答案是正确的。但是，当我尝试React在 docker 容器中部署我的应用程序时，我遇到了这个问题。问题是，如何更改nginxdocker 容器内的配置。
第 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
这是受到这个博客的启发。
对我来说，解决方案是：
location / {
root /var/www/myapp/build;
index index.html;
try_files $uri /index.html$is_args$args =404;
}
几个小时后，我终于得到了这个工作：
try_files $uri /index.html$is_args$args =404;
最后一个 arg (=404) 是使这项工作的原因。
当您处于例如 http:///some/path 的路径中时，问题就出现了，并且您点击刷新，您会得到一个 404 错误页面。ngnix 配置中的这一行可以解决这个问题。
location /{
try_files $uri $uri/ /index.html?/$request_uri;
}
添加后做一个nginx服务重启。