nginx静态资源服务器配置

2017-03-30

问题起源

在配置静态资源服务器的时候发现了一个问题,比如我想访问 www.xxx.com/hello.png 图片,配置如下

server {
  listen 9090;
  server_name 192.168.2.165;
  charset utf - 8;
  location / {
    root / assets / img / ;
    autoindex on;
  }
}

这样访问 192.168.2.168/hello.png 就可以访问到目录 /assets/img/ 下的图片

但是如果访问的js或者css,要把路径分开来容易识别,所以实际应该通过路径 192.168.2.168/img/hello.png访问所需的图片

root和alias指令

root和alias指令提供了nginx访问路径的方式,root指令会把root的值和当前访问的路径连接起来,举个栗子,如果想通过 192.168.2.165/static/ 来访问static目录下的资源

location /static/ {
  root /var/www/app/static/ ;
  autoindex off;
}

当访问路径 /static/ 的时候,nginx得到的路径为 /var/www/app/static/static/

所以需要这样配置

location /static/ {
    root /var/www/app/;
    autoindex off;
}

而aliax则不会把当前访问的路径给拼接起来,实现上面的功能代码如下

location /static/ {
  alias /var/www/app/static/ ;
  autoindex off;
}

前端项目部署

前后端分离的项目,在使用history模式的路由时,会经常出现的问题是刷新页面导致404,这时候可以通过 try_files 指令来解决,当查不到文件的时候,返回 index.html 即可

location / {
  root   html/dist;
  index  index.html index.htm;
  try_files $uri $uri/ /index.html;
}
本文为原创,未经授权,禁止任何媒体或个人自媒体转载
商业侵权必究,如需授权请联系340443366@qq.com
标签: nginx

评论

Loading...

最新评论

相关推荐

nginx开启http2
HTTP/2 (原名HTTP/2.0)即超文本传输协议 2.0,是下一代HTTP协议。在开放互联网上HTTP 2.0将只...
搭建静态资源服务器的多种姿势
现在流行很多mvvm框架,例如reactjs,angularjs,vuejs,还有mvc框架,extjs等,这些项目都可...
全站https
 https其实就是在http应用层的基础上加上一层tls/ssl协议(安全传输层协议)。保证网站数据的安全可...
scroll-top-icon