nginx

关注公众号 jb51net

关闭
首页 > 网站技巧 > 服务器 > nginx > nginx部署二级目录无法加载css和js

nginx部署二级目录无法加载css和js的问题及解决过程

投稿:jingxian

文章描述了React+UmiJS项目部署到Nginx二级目录时遇到的404和静态资源加载问题,因Nginx路径配置错误导致,通过调整.umirc.ts文件,修正了资源路径,最终实现正常部署

nginx部署二级目录无法加载css和js

项目前后端分离,前端采用react和umijs框架开发,前端页面部署在nginx上面。

原先的所有项目一直采用二级域名的部署方式,前端打包后上传到nginx目录下就能正常访问,一直没出现什么问题。

本次项目部署在二级目录下,访问地址为:https://www.xxxxxx.com/cms/。

前端页面打包后上传nginx目录,过程中出现了访问不到css和js的问题,问题详情及解决方案如下。

问题一:访问首页index.html报404

前端页面目录:/usr/local/nginx/html/cmspage/dist,目录下面上传三个文件:index.html、umi.css、umi.js。

        location /cms/ {
            root   html/cmspage/dist;
            index  index.html index.htm;
        }

重启nginx后,访问https://www.xxxxxx.com/cms/,结果浏览器出现404。

查看nginx错误error.log日志文件,错误日志:

2022/07/06 15:55:57 [error] 25943#0: *161 "/usr/local/nginx/html/cmspage/dist/cms/index.html" is not found (2: No such file or directory), client: 172.16.252.1, server: www.xxxxxx.com, request: "GET /cms/ HTTP/1.1", host: "www.xxxxxx.com"

很明显,从错误日志信息可以看出,首页index.html所在的目录竟然多了一层cms目录。这应该是跟nginx配置二级目录/cms内部机制有关。

于是创建cms目录,将前端页面文件上传到目录/usr/local/nginx/html/cmspage/dist/cms。

再次访问,没有了404错误,但是页面一片空白。

问题二:访问不到umi.js和umi.css

接着问题一,查看nginx错误error.log日志文件,错误日志:

2022/07/06 16:03:53 [error] 28172#0: *217 open() "/usr/local/nginx/html/build/umi.css" failed (2: No such file or directory), client: 172.16.252.1, server: www.xxxxxx.com, request: "GET /umi.css HTTP/1.1", host: "www.xxxxxx.com", referrer: "https://www.xxxxxx.com/cms/"
2022/07/06 16:03:53 [error] 28172#0: *217 open() "/usr/local/nginx/html/build/umi.js" failed (2: No such file or directory), client: 172.16.252.1, server: www.xxxxxx.com, request: "GET /umi.js HTTP/1.1", host: "www.xxxxxx.com", referrer: "https://www.xxxxxx.com/cms/"

很明显,从错误日志信息可以看出,访问umi.css和umi.js所在的目录竟然是/usr/local/nginx/html/build,而不是/usr/local/nginx/html/cmspage/dist/cms。

尝试把umi.css和umi.js放到/usr/local/nginx/html/build目录下面,页面正常。

但是,总不能每次发布页面的时候单独把umi.css和umi.js放到/usr/local/nginx/html/build目录,而index.html放到/usr/local/nginx/html/cmspage/dist/cms目录,这根本不是问题的解决方案!!!

经过一翻搜索最终解决方法

是修改.umirc.ts

再次访问https://www.xxxxxx.com/cms/,页面正常了。

后续应用发布的话,前端页面上传到/usr/local/nginx/html/cmspage/dist/cms目录就好,问题解决!!!

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文