博客架构升级-静态托管与视频迁R2

把博客从「本机反向隧道」换成「服务器静态托管 + 视频走 Cloudflare R2」。不是简单的新好旧坏——老架构在自主可控上其实更优，这篇诚实对比两者优劣，以及我为什么最终还是切了。

#架构#Cloudflare#R2#nginx#CDN#rclone

这个博客是 Astro 静态站，默认零 JS，本该很轻。但我往里塞了几十个视频教程，构建产物 dist/ 涨到 5G，其中视频占 4.7G。最近我把这套架构从「本机反向隧道」换成了「服务器静态托管 + 视频走 Cloudflare R2」。

需要先说清楚：这不是一次「旧的很烂、新的很棒」的升级。老架构有它实打实的优点，新架构也放弃了一些东西。这篇如实记录两者的取舍，以及我为什么在这个时间点做了切换。

一、老架构：反向 SSH 隧道

博客根本不部署到服务器上，而是跑在我自己的电脑上，再用一条反向 SSH 隧道把它「捅」到公网：

老架构示意图：访客经 HTTPS 访问 VPS nginx，VPS 通过反向 SSH 隧道把请求转发回家用电脑上的静态服务器

  • 电脑上跑一个静态服务器伺服 dist/（含视频）。
  • 一条 ssh -R 反向隧道把服务器的 127.0.0.1:8080 转发回电脑的 8081。
  • 服务器 nginx 把 detached.online 反代到 127.0.0.1:8080。

它的优点（真实的，不是凑数）

  1. 修改发布一步到位。资源文件全在本机，本地就是生产环境，改完立即生效，没有「构建 → 上传」的中间环节。
  2. 服务器零资源压力。VPS 只做带宽转发，磁盘、CPU 占用全在本地——再大的视频也不占服务器一寸硬盘。
  3. 数据主权与安全。服务器只是个「空壳代理」，本身不存任何内容。就算 VPS 被入侵，攻击者既拿不到我的文件、也删不掉我的内容——源头在本地，随时能重新接上。
  4. 零第三方依赖。不受任何对象存储、CDN 的封禁、宕机、政策影响，完全自主可控。
  5. 成本极低。只需一台能跑 nginx 的小 VPS，不依赖任何付费服务。

它的短板

致命的一条：可用性完全绑定在一台家用电脑上。 电脑关机、睡眠、重启，家庭网络波动，甚至系统自动更新——任何一个都会让整站直接掉线。这套架构自娱自乐没问题，一旦要「对外长期稳定」，这条就是硬伤。

还有个隐藏的小摩擦：更新时会短暂失联。 上面说「本地即上线」听着爽，但线上站正是从 dist/ 伺服的，每次 npm run build 重建 dist/ 的那十几秒里，网站会 404 掉线。反正是自娱自乐，也就懒得治（其实本地加个 nginx 缓存能缓解）——但它确实是一种体验损耗。

二、新架构：服务器静态托管 + 视频走 R2

两个目标：服务器独立托管网页（电脑不用常开），视频从 VPS 彻底卸掉。

新架构示意图：网页请求由 VPS nginx 静态伺服；视频请求被 302 重定向到 video.detached.online，浏览器直连 Cloudflare R2 + CDN

  • 网页/图片/字体（约 264M）：rsync 增量推到 VPS 的 /var/www/detached.online，nginx 直接静态伺服。
  • 视频（66 个，4.7G）：上传到 Cloudflare R2，绑自定义域 video.detached.online。
  • nginx 用一段 302 重定向分流：请求 /video/xxx 时不读磁盘，直接回跳转，让浏览器直连 R2/CDN 拿视频。
nginx
location /video/ {
    # R2 对象在桶根目录，剥掉 /video/ 前缀再跳转
    rewrite ^/video/(.*)$ https://video.detached.online/$1 redirect;
}

它的优点

  1. 视频卸给 R2，对服务器存储和带宽都零压力。R2 免费额度 10G 足够放 4.7G 视频，而且视频加载不走服务器带宽——出站流量 egress 免费、不限量，正常个人博客就是 $0/月。

  2. 能长期稳定运行，不需要维持本地 100% 在线、也不依赖家里的网络稳定。

  3. 更新零掉线。构建在本地完成，压根不碰线上服务器；rclone sync 只逐个替换变动的文件，nginx 全程照常伺服——再没有老架构那种「构建十几秒里网站失联」的问题。

  4. 通讯链路更短，加载更快。老架构拉资源要绕一大圈：

    老:  用户 ─▶ VPS ─▶ 本机 ─▶ VPS ─▶ 用户     （四跳，慢）
新:  用户 ─▶ VPS(只发网页)
     用户 ─▶ Cloudflare CDN(视频，就近边缘节点)   （更短，快）

它放弃了什么

  1. 不再是「服务器空壳」。内容现在落到了 VPS 磁盘 + R2，多了需要信任的远端（好在源头仍在本地、且 R2 有一份校验过的副本）。
  2. 多了一层第三方依赖。视频绑上了 Cloudflare 生态——虽然免费，但不再是纯自主可控。
  3. 发布多了一步。本地改完要 build + rclone sync 才上线，没有老架构「本地即线上」那么即时。

三、为什么在这个时间点切

老架构的短板一直都在，但真正逼我动手的是三件事凑到了一起：

  • 已经把站点提交给 Google Search 收录。SEO 要的是「长期稳定在线」，爬虫才能持续、稳定地建立索引。三天两头掉线，索引就废了。
  • 最近要出行。整个行程中本地服务没法保持在线，可能陆续断联一整天。
  • 昨晚 Windows 自动更新直接把博客搞掉线了——这是压垮骆驼的最后一根稻草。

当我的需求从「自己玩」变成「要被搜索引擎持续索引、出行期间也得稳」，可用性的权重压倒了一切，老架构那些优点（自主、简单、零依赖）也就让位了。

四、部署：全增量，无打包

老的隧道流程退休，换成一个发布脚本，网页和视频两条线都只传「变动的文件」：

powershell
npm run build            # 构建 dist/

# 网页：rsync 增量镜像到 VPS（delta 算法，改一个字也检测得到）
rsync -a --delete --exclude 'video/'  dist/  vps:/var/www/detached.online/

# 视频：rclone 增量同步到 R2（按文件名+大小对账，本地删了桶里也跟着删）
rclone sync  videos  r2:blog-video  --size-only

没有打包、没有 scp、没有服务器端解压。改一篇文章重新发布，只有那几个变动的文件会上传。

两种架构，各有取舍

维度老架构（反向隧道）新架构（静态托管 + R2）
可用性✗ 绑定家用电脑，随时可能掉线✓ 独立托管，长期稳定
更新时掉线✗ 构建那十几秒网站失联✓ 构建在本地，线上零掉线
发布便捷✓ 本地即线上，改完即生效需 build + sync 一步
服务器资源✓ 纯代理，零占用网页占 264M（视频仍零占用）
加载速度四跳长链路，慢短链路 + CDN，快
数据自主✓ 全本地，服务器空壳落 VPS + R2，多了远端
第三方依赖✓ 零依赖绑 Cloudflare（免费）
视频带宽/存储压在本地上行R2，免费且不限量

没有绝对的好坏，只有优先级。 如果只是自己看、图个简单和绝对自主，老架构其实很香；但当「无论我在不在、电脑开没开，它都得稳稳在线」成了硬需求，就该把最重的包袱交给云、让站点自己站住脚。

评论

评论加载中……