配置 CDN

下面介绍如何在使用 Nodejs 构建时将静态资源托管到 CDN，imqi1.com 同样采用此方式部署。

修改 site.config.ts

将 _cdnUrl 的值设置为 CDN 的完整地址（带协议头），例如 https://cdn.imqi1.com。

在构建时，所有站内的静态资源（如 skills、icons、imgs 等），都会自动带上 CDN 前缀，你无需进行特殊处理。

TypeScriptconst _cdnUrl = "https://cdn.imqi1.com";

执行 bun run build 构建项目。

从构建输出中可以看到，所有静态资源的 URL 均带有 CDN 前缀。每次构建都会变化的 Nuxt Bundle 会自动带上新的 hash 前缀，其他资源的 URL 保持不变，前缀固定，因此可以为 CDN 内的资源设置统一的缓存规则，即使 Nuxt Bundle 更新了，但由于哈希不一致，资源也是最新的。

从下图也可以看到，主域内已经没有任何静态资源了（sw.js 与 robots.txt 除外，这两者按设计仍由主域提供）。

将静态资源上传至 CDN

在将静态资源上传到 CDN 之前，建议先按照上一节的说明修改 site.config.ts 并完成构建，再访问站点查看实际加载的 CDN 路径，并与下文对照确认资源分类和目录结构。

本项目 CDN 分两类，第一类是随每次构建就更改的 Nuxt Bundle，第二类是每次更改不变的其他静态资源，这两类资源需上传至 CDN 的不同位置。

先介绍其他不变的静态资源。这类资源主要包括图片和字体，确定后可以长期保留在 CDN 中，缓存时间也可设置得较长，例如 1 年。它们位于 CDN 根目录，结构如下：

目录树public/
├── emojis/                 评论表情
├── fonts/                  字体
├── icons/                  文章正文用的技术图标
├── imgs/                   图片
├── skills/                 关于页的技能图标
├── favicon.ico
├── manifest.webmanifest
└── robots.txt

将以上资源上传至 CDN 根目录后，可通过 CDN 根路径访问，例如 https://cdn.imqi1.com/manifest.webmanifest。这些资源会包含在构建产物中，也可以直接从 public/ 目录获取。

下面介绍 Nuxt Bundle。每次构建生成的前端产物都会在路径中带有哈希前缀，便于在 CDN 中区分不同构建的资源。云存储空间不足时，可根据哈希前缀删除旧资源；哈希由时间戳和随机字符组成。

默认情况下 Nuxt Bundle 会带有 _nuxt 前缀，我将它去掉了，这样每一个资源的父级目录都是哈希。

Nuxt Bundle 全部的存放位置位于 static 目录下，和 emojis 等平级。故完整的目录结构是：

目录树public/
├── emojis/                 评论表情
├── fonts/                  字体
├── icons/                  文章正文用的技术图标
├── imgs/                   图片
├── skills/                 关于页的技能图标
├── static/                 静态资源
├── favicon.ico
├── manifest.webmanifest
└── robots.txt

后面这里还会有一个上传目录的，即 uploads，会在 附件 中介绍。

在 Docker 中配置 CDN

在 Docker 中配置 CDN 的前置步骤与上一节相同，但需要将构建产物取出，且至少应包含 Nuxt Bundle。

package.json 内置了一条命令 bun run export:bundle，会将容器内打包好的 public 目录导出到宿主机的 dist 目录中，只需要将 dist 内的哈希文件夹上传到 CDN 即可。