前端静态存放在oss通过cdn加速访问

Posted on 2026-02-23 Views:

前端构建产物（HTML/CSS/JS）放进对象存储；
对象存储负责静态文件托管；
CDN 在全球/全国节点分发缓存内容，通过加速域名访问，实现低时延、高并发、抗抖动的前端分发体系。

架构

flowchart LR
    A[FE Build / CI-CD] --> B[OSS Bucket
静态资源部署]
    B --> C[CDN 加速域名
全网缓存]
    C --> D[用户访问
浏览器]
    D -->|GET /index.html| C
    C -->|MISS 回源| B

1.CDN 加速层配置

创建 CDN 加速域名

CNAME 指向 CDN 提供的域名
回源方式：OSS Bucket 域名
协议：HTTP/HTTPS（建议直接上 HTTPS）

2.配置缓存策略

index.html：缓存时间短（例如 30s~5min），避免用户长时间看到旧版本
js/css/img：构建生成文件名通常带 hash，可缓存很长时间
这是一种“入口短期、资源长期”的经典前端布阵。

3.启用 HTTPS

上传自有证书
或使用 CDN 自动签发证书（免费）

4.开启安全优化

防盗链
IP 访问限速
UA 黑白名单
这些像放在城门口的小机关，平时不引人注意，关键时刻很顶用。

5.版本发布流程（CI/CD）

构建
npm/yarn/pnpm → 产物 dist/
上传到 OSS
ossutil sync dist/ oss://bucket/path –checksum –delete
CDN 刷新
刷新目录：/
刷新文件：index.html
hash 静态文件无需刷新，因为文件名已变。
发布完成

CDN + OSS前端系统典型拓扑

graph TD
    Dev[开发者 Push 代码] --> CI[CI/CD 构建流水线]
    CI --> |构建/上传| OSS[(OSS 静态资源库)]
    OSS --> CDN[CDN 边缘节点]
    User[浏览器] --> CDN
    CDN -->|回源 MISS| OSS

0%