利用腾讯云 COS+CDN 搭建私有图床

lamirs2022年4月12日大约 9 分钟

本文由简悦 SimpRead 转码，原文地址 nodeedge.com

相信写博客或者做网站相关的，多少都会涉及到图片上传保存下载，自从自己搭建网站开始，我经历过 WordPress 自带文件管理、COS/OSS 直传、Chevereto 自建图床，发现用得都不是很顺手，要么是使用起来太麻烦，要么就是小水管带宽服务器扛不住，直到最近注意到腾讯云 COS+CDN 的搭配既能不占用服务器的宽带，又能快速上传下载文件，而且以我目前的使用量来说基本上不花钱，这里分享下我的折腾过程。

相信写博客或者做网站相关的，多少都会涉及到图片上传保存下载，自从自己搭建网站开始，我经历过 WordPress 自带文件管理、COS/OSS 直传、Chevereto 自建图床，发现用得都不是很顺手，要么是使用起来太麻烦，要么就是小水管带宽服务器扛不住，直到最近注意到腾讯云 COS+CDN 的搭配既能不占用服务器的宽带，又能快速上传下载文件，而且以我目前的使用量来说基本上不花钱，这里分享下我的折腾过程。

我需求也不算太多，简单来说就是下列几条：

在需要分享图片的时候能快速分享出去并且获取到文件的下载地址并插入到编辑器中
步骤简单，尽量不要几个窗口切来切去
尽量不占用我这台小水管服务器的带宽
在合理范围内可以付费，免费的不靠谱，太贵的不值得
文件安全性有保障
如果遇到恶意攻击，能尽量减少损失

经过各方面的了解，借助腾讯云的 COS 及 CDN 再加上开源的 uPic，我最终用很低的成本完成了下面我想实现的目的：

成本低，目前我的图片及需要分发的文件加起来不到 300MB，腾讯云每个月赠送的 10G 免费流量够用，主要成本就是 COS 的存储及回源请求
文件安全，腾讯云 COS 的多重备份值得信赖，自行备份也很简单，用官方工具登录之后直接复制对应的存储桶即可
文件直接上传到腾讯云，不占用服务器的宽带
文件上传简单，利用 uPic，鼠标点击两下即可
设置好策略，如果遇到恶意请求，关闭腾讯云 CDN 能尽量减少损失

我现在主用腾讯云，并且域名备案也在腾讯云，所以可以用自己的域名绑定腾讯云 CDN，并且享受腾讯云的免费 10G CDN 流量，如果没有备案域名，可以使用腾讯云提供的子域名，效果也一样。我这里使用子域名 cos.nodeedge.com 作为演示。

文件上传工具使用的是 uPic，项目主页：https://github.com/gee1k/uPic ，对项目作者的付出表示感谢。

腾讯云 COS

进入腾讯云 COS，地址如下：

https://console.cloud.tencent.com/cos5/bucket

然后点击创建存储桶，如图：

名字可以随便起，我为了和域名统一就选择了 COS，因为服务器在广州地域，所以 COS 的地域也选择的是广州，这个可以随便选。

需要注意的是访问权限，这里选择私有读写，不允许公共访问里面的文件，为的是恶意访问的时候能减少损失。

配置cdn静态文件加速

其实 COS 也支持公网直接访问，但是流量费太贵，直接访问不划算，况且腾讯云还每个月会赠送 10G 的免费 CDN 流量，完全可以利用起来。

存储桶创建完之后，进入存储桶，然后点击左侧的域名与传输管理，如图：

如果没有已备案域名，可以开启默认 CDN 加速域名，

对象存储服务自2022-05-09起将不再支持新增默认 CDN 域名。2022-05-09后，从未过开启过默认 CDN 加速域名的存储桶，控制台将逐步下线该功能；已开启、或曾经开启默认 CDN 加速域名的存储桶不受影响，通知详情见：对象存储关于 COS 不再支持新增默认 CDN 加速域名的通知 - 动态与公告 - 文档中心 - 腾讯云 (tencent.com)

如果还没有购买和绑定自己的域名，可以见hexo博客绑定个人域名

我有已备案域名，就不用腾讯云自带的了，直接在下面选择绑定自定义域名，

输入待绑定的自定义域名（例如www.example.com）。请确保输入的域名已备案，并已在 DNS 服务商处设置好对应的 CNAME，详情请参见 CNAME 配置。

文档里写的不太准确，实际上是在 DNS 解析服务商处设置好对应的 CNAME。

不是你的域名注册商，因为很多人域名注册和DNS解析选择的是不同的服务商

绑定之后，会分配给你一个 CNAME，再到DNS 服务商处设置好这个分配的 CNAME，详情请参见 CNAME 配置。

若您在接入的自定义 CDN 加速域名为以下情况，则需要进行域名归属权验证，详情请查看域名归属验证文档。

首次接入该域名
该域名已被其他用户接入
接入域名为泛域名

你所绑定的域名，最好是已经配置了 HTTPS，腾讯云有免费的 TrustAsia 证书可以申请，可以全程鼠标点击，不需要输入命令。绑定HTTPS见hexo-使用-github-pages-托管博客

这样就为 COS 配置了 CDN 加速，但是这样还不够，如果直接访问 COS 里面的文件，会显示无权限，提示如下：

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied.</Message>
<Resource>cos-xxxx.cos.ap-guangzhou.myqcloud.com/test.png</Resource>
<RequestId>NjAwMThmYWJfZjJjMjgwOV9mYjIzXzMxZDBkMDc=</RequestId>
<TraceId>OGVmYzZiMmQzYjA2OWNhODk0NTRkMTBiOWVmMDAxODc0OWRkZjk0ZDM1NmI1M2E2MTRlY2MzZDhmNmI5MWI1OWI2NmQ0YjJkZWE3NjcxYTUzN2Q1NDQzNjY0ZmI3ZTMyNmUwYzZjZDkyYzI4N2NlYjliOGQwZDhhYWZkYzdlYzg=</TraceId>
</Error>

这是因为创建 COS 存储桶的时候选择的是私有读写，所以直接访问会提示无权限，解决方案如下。

到 CDN 控制面板，找到对应的域名，比如我上面设置的 cos.nodeedge.com，点击域名进入设置，如图：

然后修改源站设置，如图：

点击添加授权服务，可以选择整个存储桶或者指定路径，建议选择指定路径

勾选同意再确定，回到上一个界面，允许私有存储桶访问就行了，如图：

等待腾讯云 CDN 部署完毕，应该是可以正常访问 COS 里面的图片了，如图：

现在是通过腾讯云 CDN 访问的了，测试图片大小是 100.7KB。

但是这还不够，如果上传了分辨率大点的图，直接访问有点太费流量，腾讯云提供了图片优化功能可供我们选择。

这是腾讯云数据万象官网的介绍：

数据万象（Cloud Infinite，CI）是基于腾讯云对象存储的数据处理平台，能够实现对云上的图片、视频、音频、文档等数据进行处理，为客户提供专业一体化的数据处理解决方案，涵盖图片处理、内容识别、媒体处理、文档服务等功能，满足您多种业务场景的需求。

功能貌似很强大，我目前只是用到它的图片优化功能。

同样的，在腾讯云 CDN 控制面板点击域名，进去之后选择图片优化，首次进入之后需要开通此项服务，开通之后，有三项服务可选，如图：

分别是 Webp 自适应、Guetzli 自适应及 TPG 自适应，我目前能用上的就是前面两项，也就是 Webp 自适应、Guetzli 自适应。

根据腾讯云文档，符合要求的情况下可以对图片进行压缩优化，最直接的表现就是，能为图片瘦身节省我们的 CDN 流量。

需要说明的是，这两项服务都是收费的，费用也不贵，小博客的话基本上接近免费。

下面是图片优化前后的截图：

压缩之前是 962KB，处理完之后大概 120KB，节省的流量还是很可观的，图片的变化却基本上肉眼看不出变化。

HTTP响应头配置

访问网站，在F12控制台中出现下列报错：

Access to manifest at 'https://webdav-1309345210.file.myqcloud.com/images/hexo-cdn/favicon_package_v0.16/site.webmanifest' from origin 'https://lamirs.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

提示我们需要手动添加Access-Control-Allow-Origin header

值得注意的是，我们访问的是腾讯云的cdn服务器，从cdn服务器上Get资源，所以应当配置cdn服务器上的reponse headers 响应头，

同理，如果只配置了对象储存cos，同样需要配置cos服务器上的reponse headers 响应头

我使用了腾讯云的cos和cdn服务，所以需要自己手动添加CORS跨域设置，以便正常完成跨域请求和响应

具体过程如下：

前往腾讯云-控制台-cos对象存储-储存桶列表-进入储存桶-安全管理-跨域访问CORS设置设置如下：域名改成自己的前往腾讯云-控制台-cdn-域名管理-高级配置-HTTP响应头配置

域名管理 - 内容分发网络 - 控制台 (tencent.com)

# 更改为你自己的域名
Access-Control-Allow-Origin
https://lamirs.vercel.app,http://lamirs.vercel.app

Access-Control-Allow-Methods
GET,OPTIONS,DELETE,POST,PUT

Access-Control-Expose-Headers
*