从 Host 到 Serverless: 博客架构升级实践

在过去的一个半月里，我对博客进行了一系列的调整，涉及发布机制、代码架构和版式设计等多个方面。这些调整不仅提升了博客的性能和用户体验，也让内容维护和更新变得更加高效。本文将简单记录一下本次调整的主要内容。

架构迁移：从 Host + CDN 到 Serverless

迁移背景

三年前，随着博客访问量增长，我将架构从单一云主机升级为 Host + CDN 模式。然而，这种架构存在一个显著痛点：每次页面更新后都需要手动刷新对应的 CDN 缓存（由于服务商未提供 API)。这个表面上简单的操作实际上极大地影响了我对博客进行持续改进的积极性。

转向 Serverless

在发现我当前的云服务商推出了 EdgeOne Pages 服务（类似 Cloudflare Pages) 后，尽管该服务仍处于测试阶段，我仍决定将博客迁移至 Serverless 架构。这种云计算模式让开发者可以专注于代码，而将服务器管理交给云服务商。

迁移后最大的收获是显著降低了部署的心理负担 - 只需在 Github 提交代码，短时间内就能看到部署效果。正是这种便利性激发了我对博客进行更多优化的兴趣。

本地构建策略

考虑到博客文章数量较多且使用了多个自定义 remark 插件，每次构建的资源需求已超出云端构建的能力限制。因此，我采用了本地构建并提交构建产物的方案。为了同时满足两个站点的需求（包括 Github.io 上的备份站点）, 我选择将构建内容放置在 docs 目录下，然后分别配置 Github 和 EdgeOne Pages 的输出目录。

之所以使用 docs 目录，是因为这是 Github Pages 支持的唯一非根目录配置方式。

Serverless Functions 实现 301 重定向

在上次改版中，我统一了文章 URL 的大小写规范。为了保持搜索引擎索引的连续性，我通过 Nginx mapping 实现 301 重定向。迁移到 Serverless 后，由于失去了 Nginx 配置能力，且 EdgeOne Pages 仅支持 30 个重定向规则，我转而使用 Serverless Functions 实现这一功能：

export function onRequest({request}) {
    const targetUrl = request.url;
    const post = targetUrl.split('/posts/')[1];
    const postId = post.includes('/') ? post.split('/')[0] : post.split('?')[0];
    const postIdLower = postId.toLowerCase();
    return Response.redirect(`/zh/posts/${postIdLower}/`, 301);
}

这种实现方式将转换逻辑前移到用户端，相比原来的 Host 端转换更加高效。

现存挑战

由于 EdgeOne Pages 仍处于测试阶段，存在一些功能限制，如缺乏流量日志、未支持 HTTP2 等。目前最困扰的问题是部署后偶尔会出现个别页面部署失败的情况（尽管部署日志显示成功，但访问会返回 404)。好在服务商工程团队反应积极，相信这些问题会在近期得到解决。

性能提升：升级至 Astro 5

从 Astro 4.5 升级到 Astro 5 后，构建性能获得了显著提升，主要得益于两个方面：

1. Astro 5 对内容层 (Content Layer) 进行了重大升级：
   • Markdown 页面构建速度提升 5 倍
   • MDX 页面构建速度提升 2 倍
   • 内存占用降低 25-50%
2. 集成了 Vite 6, 进一步优化了编译效率

在这两项改进的共同作用下，整站构建时间从 4.5 分钟缩短至 50 秒。

代码优化与排版改进

本次优化还包括了代码模块化和懒加载等性能优化措施。通过与 AI 协作完成的版式调整，虽然主要集中在字号、字间距、行距等微观层面，但这些细节的优化让我对排版设计有了更深的理解，这些经验也将对未来的 iOS 应用开发有所帮助。

短域名服务

我用闲置的云主机搭建了基于 Shlink 的自有短域名服务，替代了之前在周报中使用的 t.ly。部署过程中有几个值得注意的要点：

1. Shlink 的内置 Web 服务 (RoadRunner) 不支持 HTTPS, 需要配合 Nginx 使用
2. 需要在 Nginx 层面额外处理 301 重定向（ 尽管在 Shlink 中设置了 301，但仍会返回 302 ）
3. 即使短域名服务不需要内容缓存，仍然建议部署 CDN 作为安全防护层

AI 辅助开发体验

相较于最初 构建博客时 AI 工具所带来的惊喜，经过一年多的发展，AI 工具的应用已经相当成熟：

1. AI 对前端开发的支持明显优于 Apple 生态开发
2. 各类 AI 开发工具 (VSCode、Cursor、Trae) 的能力趋同，主要差异体现在自动提示等细节功能
3. 多模态 AI 显著改善了 UI 开发流程，提供更精准和即时的反馈
4. 相较于将 AI 作为自动化工具，我更愿意将其视为学习旅程中的陪伴者。通过亲手编写代码而非简单复制，不仅能保持对技术的敏锐度，更能在与 AI 协作的过程中找到人类独特的价值

总结

这次博客优化不仅提升了系统性能和用户体验，也让我在技术积累上有了新的突破。作为一名 Apple 生态开发者，通过深入优化个人博客系统，我得以跨领域学习和视野拓展，这也是一次很好的技术实践机会。