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 指令官方文档

location
try_files
rewrite

相关Nginx 指令参考博客

nginx Rewrite(重写地址)
nginx路径匹配规则及配置nginx静态文件或者视频文件的本地播放等
nginx正则及location匹配

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐