七牛云图床与免费HTTPS证书

Keywords: #生活 #博客
Table of Contents

前几天备案的域名终于审核通过了，也因此可以来配置一下图床和 CDN 了。

前言

在此之前，我的博客上的图片都是存放在 GitHub 的公开仓库中，并且使用 jsDelivr 的 CDN 服务，但事实上 jsDelivr 的 CDN 在国内近几年基本上算是不可访问，连通情况时好时坏。

image.png

同时，使用 GitHub 和 jsDelivr 作为图床服务，我也觉得不是很好，毕竟 GitHub 是代码仓库，jsDelivr 也是前端静态资源的 CDN 服务。于是，我决定将博客文章的图床迁移到国内的对象存储服务上。

在了解一番后，我也发现实际上国内的服务，无论是 CDN 还是对象存储，都有不少的弊端，其中最重要的一点就是域名需要备案，不过一些大厂的对象存储服务倒是提供了现成的域名，不需要自己准备备案的域名，但是缺点也很明显：收费贵且收费规则十分复杂。比如，阿里云的对象存储 oss 的计费项目就有：

  • 存储费用
  • 流量费用
  • 请求费用
  • 数据处理费用
  • 对象标签费用
  • 传输加速费用
  • 临时存储费用
  • DDoS 防护费用
  • 数据索引费用
  • 跨区域复制 RTC 费用

最后，我选择了七牛云的对象存储服务，因为它提供存储和 CDN 的免费额度，这些免费额度对于我来说完全足够了，也不需要先支付费用，等之后需要升级的时候再付费即可。

七牛云的对象存储免费额度包括：每月 10GB 的标准存储空间、每月 1000千次的 GET 请求、每月 100 千次的PUT/DELETE 请求以及每月 10 GB 的CDN回源流出流量。

七牛云的 CDN 服务免费额度包括：

image.png

配置图床

配置七牛云 + PicGo 图床并不难，网上的教程也很多，这里简单记录一下。

先在七牛云上创建一个空间，访问控制选择 公开，存储区域选择离自己近的地方。

image.png

空间创建成功后还需要配置已经备案的域名，默认提供的测试域名只保留 30 天。

接着配置 PicGo

image.png

AccessKey 和 SecretKey 都在七牛云开发者平台个人中心-密钥管理中获取。

Bucket 为空间名称；访问网址为配置的备案域名（需要自定义源站域名，可以先使用测试域名进行测试）；存储区域为选择区域的代号，华东浙江为 z0；存储路径为空间中的文件夹，没有则为根目录。

image.png

以上便完成了七牛云 + PicGo 图床的配置。

除此之外，最好还是设置一下 Referer 防盗链对图片进行防护，以防别人盗取图片。配置了防盗链，图片只能在你设置的网站上显示。

image.png

如果开启了 CDN 则需要在 CDN 中配置 Referer 防盗链，最好同时也配置一下告警。

image.png

自定义源站域名

虽然没有配置 CDN 服务，但是由于七牛云服务器在国内，实际上在国内区域有没有 CDN 的差别不是特别的大，而且选择的对象存储区域也是自己所在地，所以效果也不差，比 GitHub + jsDelivr 肯定是好了不少。

image.png

配置自定义源站域名也很简单，在七牛云 - 对象存储 - 空间管理选择空间-域名管理-自定义源站域名中添加已备案的域名，根据说明进行 CNAME 解析即可。

image.png

接下来就是配置 HTTPS，这里我使用 ohttps 的免费证书服务，虽然免费的Let’s Encrypt 证书只支持 90 天有效期，但是 ohttps 支持自动更新和自动部署。

注册 ohttps 账户并登录，在证书管理中选择创建证书，选择免费的 Let’s Encrypt 证书，并输入域名。

image.png

接着根据提示进行 CNAME 域名解析，验证解析记录，等待 3~15 分钟即可创建证书。

image.png

随后将证书的私钥文件和证书文件下载下来。

image.png

到七牛云 - 证书管理，分别上传对应的私钥和证书文件。

image.png

最后回到 ohttps 种，选择部署节点-添加结点，选择七牛云-SSL。

image.png

同样输入七牛云开发者平台个人中心-密钥管理中获取的 AccessKey 和 SecretKey

image.png

下一步，选择关联的证书，创建部署结点。

image.png

回到证书管理中选择相应的证书完成自动更新和自动部署的配置。

image.png

配置 CDN

由于七牛云还提供 CDN 的免费额度，于是我便想再给图床配置一个 CDN 服务。

在七牛云 - 添加域名，添加一个域名（需要备案），通信协议可以选择 HTTPS 但是针对 HTTPS 的请求流量没有免费额度，需要单独按量付费或者购买资源包（资源包包含 HTTP 和 HTTPS 的流量）。这里我不想付费，于是选择了 HTTP 协议。源站配置选择七牛云的存储空间，其他选项默认。最后完成 CNAME 解析就算配置成功了。

image.png

但我满心欢喜将博客文章中的图片迁移到 CDN 的域名上时，我发现在电脑的浏览器上文章中的图片都不能显示，而手机上的浏览器则可以打开图片。经过一番研究，发现罪魁祸首就是没有启用 HTTPS 协议而是使用 HTTP 协议。

由于我的博客网站启用了 HTTPS 协议，但是图片却还是 HTTP 协议，请求图片时浏览器会自动将 HTTP 协议的请求转成 HTTPS 协议，控制台报错：

Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID

导致了图片不能显示。相反在手机浏览器上对于 HTTP 不安全请求规则并不严格，所有依旧能够请求到图片。

最后尝试了很多解决方法，都不启作用，我也不想单独给 CDN 的 HTTPS 请求付费，于是无奈只能放弃 CDN，重新使用自定义源站域名。

← prev next →