全栈开发next.js 与strapi 视频课程内容总结3

时间：2025-03-14 12:35:48来源：525游

(1292) Next.js 全栈开发实战课：每日一签网站——使用 Cloudflare 管理域名，R2 存储以及配置缓存 - YouTube https://www.youtube.com/watch?v=coXZz6lrJlQ

视频内容总结：Next.js 全栈开发实战课 - 第三段
1. 开场与课程目标

主题：Next.js 全栈开发实战课程第三课。
内容：
- 通过 Docker 为 Strapi 配置 Cloudflare R2 存储。
- 在 Cloudflare 上建立 CDN 并配置缓存。
回顾：上次课程部署了 Strapi 到 Zeabur 的 Docker，解决了本地存储不可持久的问题。

2. 为什么选择 Cloudflare R2

问题：Docker 本身无法持久化存储内容，每次重新部署容器会丢失本地文件（如图片）。
解决方案：
- 将存储托管到第三方云平台（如 Cloudflare R2）。
- 不推荐仅依赖 Zeabur 本地非 Docker 存储。
优势：
- 使用多个云平台可获得更多免费额度（数据库、存储、带宽）。
- 避免与单一服务商深度绑定，降低风险。
Cloudflare 特点：
- 有“赛博菩萨”之称，免费服务多且额度大（如 R2 提供 10GB 免费存储、千万次操作）。
- 缺点：Workers & Pages 的 Serverless 运行时不稳定，不适合 Next.js/Nuxt.js，但 R2 和 CDN 表现优秀。

3. 配置 Strapi 使用 Cloudflare R2

安装插件：
- 在 Mono Repo 的 packages/cms 目录下安装 strapi-provider-upload-cloudflare-r2。
- 通过此插件将 Strapi 的文件上传功能指向 Cloudflare R2。
配置插件：
- 修改 config/plugins.js，引入环境变量（env）。
- 添加上传配置：
  - 指定插件为 strapi-provider-upload-cloudflare-r2。
  - 配置 accessKeyId、secretAccessKey、endpoint 和 bucket（通过环境变量传入）。
环境变量设置：
- 在本地 .env 文件中添加 R2 的认证信息和存储配置。

4. Cloudflare R2 设置

创建 Bucket：
- 新建 bucket 名为 qian-example，位置默认美西（免费优先，速度次之）。
- 存储类型选普通存储（无需低频存储）。
获取 Endpoint：
- 在 R2 的 S3 API 设置中复制上传端点（删除 bucket 名部分）。
生成 API Token：
- 创建名为 qian-example 的 API Token，权限为 Admin Read & Write，有效期永久。
- 获取 accessKeyId 和 secretAccessKey，填入环境变量。

5. 配置域名与 CDN

域名注册建议：
- 推荐 Namecheap（便宜）或 GoDaddy 购买域名。
- 若面向国内用户，需注册 .cn 域名并备案；若出海或练习，无需备案。
Cloudflare 域名管理：
- 将域名（如 baifo.life）添加到 Cloudflare，修改 Nameserver 指向 Cloudflare。
- 添加自定义域名（如 image2.baifo.life），绑定到 R2 bucket。
- 配置过程简单，因主域名已托管在 Cloudflare。
缓存策略：
- 在 Cloudflare 的 Caching -> Cache Rules 中创建规则：
  - 匹配 image2.baifo.life 的请求。
  - 设置 Edge 缓存（CDN）为 30 天，浏览器缓存为 14 天。
- 验证缓存：
  - 使用 curl -i 检查响应头，cache-control 显示 14 天，第二次访问显示缓存命中（HIT）。

6. 测试与效果

本地测试：
- 运行 pnpm run develop，启动 Strapi。
- 在 Media Library 上传图片，确认图片存储到 R2。
- 检查 R2 bucket，Strapi 自动生成多种尺寸缩略图（原图 700KB，thumbnail 8KB 等）。
- URL 显示为 image2.baifo.life，证明存储与域名配置成功。
跨域调整：
- 修改 config/middlewares.js，将默认数组改为函数。
- 添加 contentSecurityPolicy，允许访问第三方文件（R2）。
持久化验证：
- 本地文件因容器销毁而丢失，R2 存储的文件持久存在。

7. 更新部署

代码提交：
- 修改内容：插件安装、plugins.js、middlewares.js、环境变量、依赖更新。
- 提交到 GitHub，命名为 change: added Cloudflare R2 as storage。
Zeabur 部署：
- 在 Zeabur 更新环境变量（复制本地 .env 到 Raw 编辑器）。
- 自动触发部署（因 packages/cms/package.json 变化）。
- 部署后，线上 Media Library 显示 R2 存储的图片。

8. 课程总结与展望

完成目标：
- 配置 Strapi 使用 Cloudflare R2 存储。
- 设置域名、API Token 和缓存策略。
- 实现文件持久化与 CDN 加速。
基础建设完成：
- Strapi + TiDB + R2 + Zeabur 的后端搭建完毕。
下步计划：
- 下节课进入 Next.js 前端开发，基于 Strapi API 搭建网站。
建议：
- 即使不上传文件，也推荐外部存储（如 R2），简单且实用。
- 鼓励观众点赞、分享、完播视频。