Nginx路由和刷新导致404

Posted

技术标签:

【中文标题】Nginx路由和刷新导致404【英文标题】:Nginx routes and refresh cause 404 【发布时间】:2021-05-20 19:48:42 【问题描述】:

我已经使用 nginx 和 Elastic Beanstalk 建立了一个 Express 和 React 网站。它在浏览网站时工作正常,但如果我在主路由以外的路线上刷新,或者尝试输入主路由以外的特定路由,则会导致 404。

我找到了很多与更改 nginx.config 相关的不同解决方案,并且认为我只差一步了。这是我目前的nginx.config

server 

      listen 80;
      server_name leaftherapyeb-env.eba-xyc63u32.eu-west-2.elasticbeanstalk.com www.leaftherapyeb-env.eba-xyc63u32.eu-west-2.elasticbeanstalk.com;
 
      root /var/www/leaftherapyeb-env.eba-xyc63u32.eu-west-2.elasticbeanstalk.com;
      index index.html;

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

我已经看到很多建议使用root /usr/share/nginx/html; 的解决方案,但是当我使用它而不是每个页面上方的根链接到 nginx index.html 时。所以我改为尝试将根目录作为域的路径,我认为我错了,但不知道如何计算路径,目前在包括主路由在内的每条路由上都会导致 500 内部错误。

任何帮助将不胜感激,谢谢。

【问题讨论】:

你的 react 源代码在哪里? github.com/dbacall/leaf 嗨,我的意思是,你如何构建你的 React 应用程序,即 yarn build,你将生成的 dist 文件夹放在哪里?您应该将您的 nginx 根目录指向 dist 文件夹 我认为你应该保留根root /var/www/html;,而不是使用服务器名称作为根文件夹 所以我做了npm run build,它在客户端文件夹中创建了一个构建文件夹。我早些时候试图链接到它,但我认为我没有走对路。会不会只是/var/client/build 【参考方案1】:

我认为你的 nginx 配置有错误的语法。在下面的 nginx.conf 中, / 位置指向 /var/www/html 文件夹中的 index.html

server 

      listen 80;
      server_name leaftherapyeb-env.eba-xyc63u32.eu-west-2.elasticbeanstalk.com www.leaftherapyeb-env.eba-xyc63u32.eu-west-2.elasticbeanstalk.com;
 
      location / 
        root /var/www/html;
        index index.html
        try_files $uri $uri/ /index.html;
      
    

您需要手动将 client/build 文件夹的所有内容复制到 /var/www/html - 或者您可以创建一个符号链接(这在 IMO 不是最好的解决方案,但它应该可以工作)

ln -s client/build /var/www/html

如果您想使用符号链接,请确保在创建符号链接之前删除该文件夹,否则会出现错误

【讨论】:

我在客户端找到了一个构建文件夹:github.com/dbacall/leaf/tree/main/client/build - 如果你想让 nginx 为这个文件夹提供服务,那么只需确保所有构建文件夹的内容都在 /var/www/html 文件夹中,所以nginx可以找到index.html 所以我有点困惑/var/www/html 的实际位置?我会在哪里运行ln -s client/build /var/www/html?抱歉我的无知,这是我使用 nginx 和弹性豆茎的第一天。 是的,所以我不明白如何在 /var/www/html 文件夹中获取 build 文件夹或该文件夹在哪里 好的,所以/var 在我的本地系统上?但是里面没有/www... 然后创建它! mkdir /var/www 然后使用 ln 命令软链接构建文件夹

以上是关于Nginx路由和刷新导致404的主要内容,如果未能解决你的问题,请参考以下文章

nginx 部署vue项目,路由模式为history时,页面刷新404问题

nginx解决vue路由history模式刷新404问题

nginx - django 2 -angular 6 / 角度路由在重新加载页面后得到 404

vue路由history模式刷新404问题解决方案

vue路由history模式刷新404问题解决方案

nignx部署Vue单页面刷新路由404问题解决