Vercel+WebpServer实现对Halo博客图片压缩

前言

  在使用Halo博客上传附件后，有时候因为图片太大导致页面加载很慢，我们可以使用webp server进行对上传图片的压缩。

安装webp server

因为我依然用的是群晖上面的docker，因此这里讲在群晖docker上安装webp server，当然其他平台安装也都是大同小异的。

• 在Docker注册表搜索webpsh/webp-server-go进行下载
• 配置文件映射路径，/opt/pics映射到本地的图片地址，这里我用的web_packages就是halo文件所在的目录
• 这个目录下面有一个upload文件夹就是专门存图片相关的附件的，这里我们不要设置到upload目录，设置到它halo根目录就好了，因为后面会在vercel中配置/upload的代理地址
  
• 配置端口，根据自己的情况映射端口即可
  
• 设置环境变量，环境变量中有个ALLOWED_TYPES，设置为["jpg","png","jpeg","svg","gif"]，就是你要转的图片类型，设置完成后启动即可。

对webp server进行代理

  在群晖中设置反向代理，将内网服务代理到公网，当然这里是需要你的宽带是公网IP的。

配置vercel代理

  同上一篇文章中说的的方式一样，需要在json文件中增加一条代理，这里我的webp server的服务地址是https://nas.wangboweb.site:3334，所以将访问/upload时的全部代理到这个地址就好了，然后再执行一次verceL -A web.json --prod重新部署一下即可。

{
    "version": 2,
    "routes": [
      {
        "src": "/favicon.ico",
        "headers": { "Cache-Control": "public, max-age=3600" },
        "continue": true
      },
      {"src": "/upload/(.*.(jpg|jpeg|gif|png|svg))", "dest": "https://nas.wangboweb.site:3334"},
      {"src": "/(.*)","dest": "https://nas.wangboweb.site:9201"}
    ]
}

结语

  通过以上方式，我们就实现了将网站访问图片进行了压缩，加快了网站打开的速度。