记一次博客图床迁移

发表于 分类于 Disqus：

背景

之前博客的图片是使用的又拍云作为主图床，但是经常性看到有人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规则详解