Home
avatar

Nax

分层缓存的实现过程

最近在思考一个问题,同一个域名怎么把不同的内容放在不同的地方缓存呢?接上篇文章,这一篇就给大家来个实际案例的呈现。 使用开源项目 Sanyue-ImgHub 作为前端和后端管理,MinIO 作为自建对象存储 R2也同时当作储存源,并套用腾讯云 EdgeOneCloudFlare 作为分别做CDN进行全球加速。 整个过程虽然最终成功,但也踩遍了几乎所有可能遇到的坑。为了让大家少走弯路,我决定将这次经历复盘总结,希望能成为一份能让大家看懂的、详尽的实战教程。


前言

关于这套部署踩了很多坑,历经千辛万苦才弄出来,其实我过程中绕路挺多的,本身来说不难实现,希望我的这篇贴子可以让大家理解我关于同一个一个域名分别缓存实现过程 对于 R2 没什么好说的,绑定图床的域名在 CloudFlare 上的页面规则开启全部缓存即可,很简单的实现,关键是怎么让图床添加 MinIO 后让MinIO的内容全部缓存到EdgeOne上,而CF上一点MinIO的内容都不缓存

最终架构

在开始之前,我们先明确一下最终的、正确的数据流架构:

  1. 上传流程:
    • 浏览器 -> Sanyue-ImgHub后端 -> Cloudflare Tunnel -> MinIO服务器
  2. 访问流程:
    • 浏览器 -> EdgeOne CDN -> Cloudflare Tunnel -> MinIO服务器

这个架构的核心在于使用 Cloudflare Tunnel 为我们自建的、网络环境复杂的MinIO服务提供了一个稳定、可靠的纯域名入口,从而解决了后续一系列问题。 可以不用Tunnel,我使用完全是因为我的MinIO搭建在的仅ipv6服务器上,直接用ipv6+端口去上传很容易出现网络问题,可能是因为Endpoint不是标准格式,我不确定ipv4会不会这样,没时间去试

准备工作

在开始配置前,你需要准备好:

  • 一台拥有公网IP(最好是IPv4,如果只有IPv6,请务必使用Tunnel)的Linux服务器。
  • 两个域名A和B,并且都DNS解析服务放在Cloudflare上。
  • 在服务器上通过Docker或1panel等工具,安装并运行好MinIO服务。
  • Sanyue-ImgHub的源码,准备部署到Cloudflare Pages或自己的服务器。

详细配置步骤与易错点解析

第一步:DNS规划与配置

这是所有配置的基础,A域名直接绑定在图床上,在页面缓存那里写好规则就行。然后我们需要规划两个子域名:

  1. API域名: 用于程序后端之间通信(上传、回源)。不对外暴露给用户
    • 例如:api.yourdomain.com
  2. 加速域名: 用于最终用户访问图片。
    • 例如:img.yourdomain.com

配置方法

  • API域名 (api.yourdomain.com):
    • 【推荐方案:Cloudflare Tunnel】: 在Cloudflare Zero Trust后台创建一个Tunnel,并添加一条Public Hostname规则,将 api.yourdomain.com 指向您MinIO服务器的API端口(例如 http://localhost:9000)。这是最稳定、最可靠的方案。
    • 【备选方案:直接解析】: 如果您的服务器有稳定的公网IPv4,可以在Cloudflare DNS中添加一条A记录,将 api.yourdomain.com 指向你的服务器IP。
  • 加速域名 (img.yourdomain.com):
    • 在Cloudflare DNS中,添加一条CNAME记录,将 img.yourdomain.com 指向您在EdgeOne中添加站点后,EdgeOne提供给您的CNAME地址(例如 img.yourdomain.com.eo.dnse5.com)。

【易错点】:

  • 混用域名: 切勿将API域名和加速域名混用,它们角色不同,必须分开。
  • 根域名CNAME问题: 如果您想用根域名 (yourdomain.com) 作为加速域名,会遇到Cloudflare的“CNAME展平”问题,可能导致EdgeOne无法正确识别CNAME状态,从而无法申请SSL证书。强烈建议使用子域名作为加速域名

第二步:Sanyue-ImgHub 后台配置

这是将所有服务串联起来的关键一步。

  1. 登录Sanyue-ImgHub管理后台,进入 上传设置 -> S3
  2. 进行如下配置
    • Endpoint: 填入您的API域名,并带上协议头和端口。
      • 【Tunnel方案】: https://api.yourdomain.com (无需端口)
      • 【直接解析方案】: http://api.yourdomain.com:25368 (这里的25368是在1panel中为MinIO API映射出的公网端口)
    • 公共访问域名: 填入你的加速域名,并带上协议头和存储桶名称。(该图床本身没有这个,我自己改过才有如要部署请用(无镜像)
    • 这版
      • 例如:https://img.yourdomain.com/test (这里的test是您在MinIO中创建的Bucket名称)
    • 路径风格: 开启
    • 存储桶名称: test
    • 存储桶区域: 除非您在MinIO启动时自定义过,否则请填写 us-east-1
    • 访问密钥: 填写你MinIO的Access Key和Secret Key。

【易错点】:

  • Endpoint格式错误: 这是导致我排查了最久的问题。Sanyue-ImgHub依赖的S3 SDK在处理带IP和端口的Endpoint时存在Bug,会导致连接超时。使用纯域名的Tunnel方案是避免此问题的最佳实践
  • 公共访问域名缺少路径: 如果这里只填写 https://img.yourdomain.com,会导致最终生成的图片URL缺少存储桶名称,引发后续的404问题。
  • 区域(Region)错误: MinIO默认区域是us-east-1,如果填错会导致签名验证失败。

第三步:EdgeOne CDN 配置

这是实现CDN加速和解决访问问题的最后一步。

  1. 源站配置:

    • 进入 域名管理 -> 源站配置
    • 源站地址: 填入您的API域名 (api.yourdomain.com)。
    • 回源协议/端口: 根据您的API域名配置选择 HTTPS/443 (Tunnel方案) 或 HTTP/25368 (直接解析方案)。
    • 回源HOST头: 必须选择“使用源站域名”,即 api.yourdomain.com
  2. 规则引擎配置:

    • 进入 规则引擎,新建两条规则。

    • 规则一

    • IF (匹配条件): 文件后缀 等于 jpg|jpeg|png|gif|webp (等你需要缓存的图片后缀)。

    • THEN (执行操作):

      • 操作1:节点缓存TTL:
        • 自定义时间2592000 (30天)。 image.png
    • 规则二

    • IF (匹配条件): HOST 等于 加速域名

    • THEN (执行操作):

      • 操作1:修改HTTP回源请求头:
        • 设置 Refererhttps://img.yourdomain.com (加速域名)。 image.png
  3. HTTPS证书配置:

    • 进入 域名管理 -> HTTPS证书配置
    • 为您的加速域名 (img.yourdomain.com) 申请免费证书并等待部署成功。

【易错点】:

  • 回源HOST头错误: 这是导致 InvalidBucketName 错误的核心。如果回源HOST头是加速域名,MinIO会强制使用虚拟主机模式解析,导致存储桶名称识别错误。必须设置为源站域名
  • 忘记修改Referer: 如果不修改回源请求的Referer,CDN的回源请求会被Sanyue-ImgHub的防盗链机制拦截,导致404。
  • 缓存配置错误: 如果不配置节点缓存TTL,EdgeOne可能不会缓存您的图片,导致所有请求都回源,失去了CDN的意义。

通过Cloudflare隐藏源站域名

  • 按照上述教程配置好之后,通过A域名访问上传到minio的图片会跳转到源站域名,如果你想隐藏你的源站域名,做两件事

  • 强制使用反-向代理:修改代码,确保所有来自S3(MinIO)的请求都通过Cloudflare Worker获取,而不是重定向。

  • 禁用Cloudflare缓存:在Worker返回响应给用户时,明确设置Cache-Control响应头,告诉Cloudflare不要缓存这个响应,从而避免双重缓存。缓存将完全由您的源站(EdgeOne)来控制。

  • 同时需要修改一下此文件 **\functions\file\[[path]].js** 直接用下面代码替换
替换代码

总结

回顾整个过程,遇到的核心障碍有两个:一是Sanyue-ImgHub后端SDK对复杂Endpoint的兼容性Bug,二是CDN回源与图床自身安全机制(防盗链、Host头解析)之间的冲突。

通过采用Cloudflare Tunnel提供稳定API入口,并精细化配置EdgeOne的规则引擎(修改Referer和Host头),最终构建了一套稳定、高效、安全的个人图床系统。

希望这份详尽的指南能对您有所帮助!

Cloudflare Edgeone 图床 CDN

喜欢这篇文章嘛,觉得文章不错的话,奖励奖励我!

支付宝打赏支付宝微信打赏 微信