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

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。

• nginx配置：

        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目录就好，问题解决！！！

总结

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

最新评论