Nginx 无法正确加载静态文件,静态文件加载404或者为html;Nginx 配置访问指定url路径项目部署;
问题
1.在nginx location 定义指定url段时,加载不到页面,例如:访问一级目录为 /mypage 并且 二级目录可以是任意非空值时/mypage/xxxxx,由于部署目录实际不存在 /mypage/xxxx,因此访问返回 404问题;
2.页面中使用相对路径引用静态文件时,使用指定url段访问页面,不能正确加载到静态文件,例如:访问一二级目录构成的url/mypage/special时,假如html中有一个静态文件引入路径为./style.css,那么在实际访问页面时加载的静态路径为http://localhost:9995/mypage/style.css,由于部署目录不存在mypage,因此导致静态文件加载失败。
调整Nginx配置文件进行解决
server {
listen 9995;
server_name localhost;
root /html;
# 解决问题1:通过正则正确匹配指定url段,使用 try_files 指令索引 html
location ~ /mypage/[^/]+$ {
# 注意:第三部分 /index.html 可以理解为,客户端对 http://localhost:9995/index.html 的直接访问,
# 详情参考nginx的try_files指令解释
try_files $uri $uri/ /index.html;
}
# 解决问题2:对静态文件的访问进行url rewrite
location ~* \.(gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ {
# 例如访问 /mypage/style.css rewrite 会重写 url 为 /style.css,此时需要确保项目根目录下存在 style.css 文件
# 例如访问 /mypage/imgs/bg.png rewrite 会重写 url 为 /imgs/bg.png,
# 此时需要确保项目存在二级目录 imgs 并且 imgs 目录下存在 bg.png 文件
# 注意:rewrite 第三个参数不同值的效果,此处使用 break,解释为 rewrite 之后不在重新进行 location 匹配,
# 以防止rewrite 之后 url 依然存在当前location匹配的后缀,导致当前location进入死循环
rewrite ^/(.*?)(imgs.*|[^/]*)$ /$2 break;
}
}
Nginx 指令官方文档