记一次博客图床迁移


背景

之前博客的图片是使用的又拍云作为主图床,但是经常性看到有人CDN被刷,损失惨重,所以转念想使用GitHub托管图床+jsDelivr作为免费CDN加速访问。

需求分析

最开始的图床是在服务器上部署了OLAINDEX索引OneDrive,使用非常方便,所有图片均在本地有备份,数据在自己手里的感觉还是很安全的,当时的版本号是4.0,上传图片后,链接格式为https://img.example.com/view/xxxx/head.jpg,这种格式也非常整齐,所有博客图片也采用这种格式书写,同时使用OLAINDEX的话,图床的速度很不理想,所以将OLAINDEX作为备份图床,采用又拍云作为图床首选方案,所以在又拍云上传时,为了避免大批量的修改博客中的图床链接,沿用了这种格式。

当时采取的方案是先上传到OLAINDEX,然后使用又拍云的CLI工具upx.exe,使用如下脚本批量上传到又拍云。

.\upx.exe img-zhuomu user password
.\upx.exe sync E:/OneDrive/OLAINDEX/img /view/img/

后来升级5.0后,OLAINDEX开始支持多账号登录,于是图片链接格式变为了https://img.example.com/hashid/view/xxxx/head.jpg,多加了一级用以区别账号,给我造成了很大的困扰,每次写插入图片链接时都需要删除一级目录。遂逐渐弃用。

首先需要明白jsDelivr是如何给GitHub做CDN的。

比如一个repository:https://github.com/test/img,只需要按照如下规则修改前缀即可。

// load any GitHub release, commit, or branch
// note: we recommend using npm for projects that support it
https://cdn.jsdelivr.net/gh/user/repo@version/file

// load jQuery v3.2.1
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js

// use a version range instead of a specific version
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js
https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js

// omit the version completely to get the latest one
// you should NOT use this in production
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js

// add ".min" to any JS/CSS file to get a minified version
// if one doesn't exist, we'll generate it for you
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js

// add / at the end to get a directory listing
https://cdn.jsdelivr.net/gh/jquery/jquery/

访问这个https://cdn.jsdelivr.net/gh/test/img/路径,可以直接获得目录的列表。

所以我的url中,/view部分是多余的,我最终要实现的效果是https://img.example.com/hashid/view/xxxx/head.jpg->https://cdn.jsdelivr.net/gh/test/img/xxxx/head.jpg,通过查阅资料,发现使用显性URL跳转就可以实现这样的操作。

何为显性转发,何为隐性转发

隐性转发:用的是 iframe 框架技术、非重定向技术,效果为浏览器地址栏输入 http://a.com 回车,打开网站内容是目标地址 http://cloud.tencent.com/ 的网站内容,但地址栏显示当前地址 http://a.com

显性转发:用的是301重定向技术,效果为浏览器地址栏输入 http://a.com 回车,打开网站内容是目标地址 http://cloud.tencent.com/ 的网站内容,且地址栏显示目标地址 http://cloud.tencent.com/

转发可以使用DNS进行解析,但是需要域名备案,也可以使用nginx做重定向,本文使用nginx作重定向。

迁移

由于需要对nginx操作,使用宝塔面板较为简单方便。

宝塔准备

网站->添加站点->输入域名img.example.com:8899

由于我在服务器上部署了多个web页面,就不使用80端口,采用非80端口 Nginx URL重定向。

下边保持默认,PHP版本选择纯静态

站点添加成功后,选择配置文件

写入下列配置文件

 server {
        listen       80;
        server_name  img.example.com;
        location / {
            fastcgi_pass 127.0.0.1:8899; #此处为端口转发
            # 下边两行为两种正则匹配策略
            rewrite /view/(.*)$ https://cdn.jsdelivr.net/gh/test/$1 break;
            rewrite /(.*)$ https://cdn.jsdelivr.net/gh/test/$1 permanent;
        }
}

这里的正则匹配我写了两个,因为历史原因,需要规避/view这样的目录链接,所以写了两种。

rewrite有三个参数:

  • <regex>,用于匹配URI的正则表达式
  • <replacement>,将regex正则匹配到的内容替换成 replacement
  • [flag],flag标记

flag标记说明:

  • last //本条规则匹配完成后,继续向下匹配新的location URI规则
  • break //本条规则匹配完成即终止,不再匹配后面的任何规则
  • redirect //返回302临时重定向,浏览器地址会显示跳转后的URL地址
  • permanent //返回301永久重定向,浏览器地址栏会显示跳转后的URL地址

其中redirect和permanent的区别好像是会影响SEO,具体可以自行查阅相关资料。

另外,SSL可以不配置,这里仅仅做跳转,真正访问数据还是要请求到jsDelivr的CDN上去。

DNS解析

DNS解析到服务器,届时,访问自己的域名即可。

未来

以后可以直接使用PicGo来进行上传,更加方便。关于PicGo的配置,可以参考PicGo的官方文档

我为什么要使用自己的域名?

当然是害怕某天jsDelivr不让白嫖啦,到时候自己直接搭一个图床就可以马上图片访问。

参考资料

隐、显性 URL 记录

利用Nginx rewrite规则实现域名显性转发

正则部分参考链接:

Nginx rewrite正则匹配重写

第七章:nginx的rewrite规则详解


文章作者: 卓木
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC 4.0 许可协议。转载请注明来源 卓木 !
  目录