使用 nginx 直接请求服务器上某个目录下的图片

1,709 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第1天,点击查看活动详情

直接访问本机上的图片资源

  • 问题场景:前端通过流的形式将图片传给后端,后端在放到服务器上,将图片在服务器上的绝对路径返回给前端,再由前端去自己展示图片。
  • 由于前端无法直接打开服务器,需要 nginx 转发前端的请求去访问图片资源,具体如下:
server {
    listen       80;
    server_name  zhoukingzz.com;
    location / {
        root  /front_end/dist/;
        index index.html;
    }
    location ~* /images/ {
        alias /images/uploadFiles/;
    }
}
  • 其中关键在于使用 alias 在服务器上查找指定路径下的资源
  • 需要注意 alias 后面必须要用 '/' 结束,否则会找不到文件
  • 顺带了解下aliasroot的区别: alias 只能作用在location中,而root可以存在serverhttplocation中。

访问别的服务器下的图片

  • 问题场景:上面我们虽然解决了前端 nginx 和图片资源在同一服务器下的资源访问,但是实际上很多时候我们前端的服务器和后端存放的图片资源其实不在一个服务器上,这个时候我们又如何去解决呢?
  • 我的解决方法是:在前面的基础上,在前端 nginx 再做一层转发请求到图片资源所在服务器的 nginx
  • 前端 nginx 如下:
server {
    listen       80;
    server_name  zhoukingzz.com;
    location / {
        root  /front_end/dist/;
        index index.html;
    }
    location ~* /images/ {
        proxy_pass http://image.zhoukingzz.com;
    }
}
  • 图片资源所在服务器 nginx 配置:
server {
    listen       80;
    server_name  image.zhoukingzz.com;
    location ~* /images/ {
        alias /images/uploadFiles/;
    }
}
  • 这样就通过 nginx 转发把请求前端服务器的图片资源的请求转发到图片资源所在服务器,并通过图片资源所在服务器的 nginx 把图片资源的请求指定到存放图片资源的目录下

需要注意,本实验需要图片资源所在服务器打开对应端口的防火墙

以上,感谢各位看官老爷!