HTML、CSS、JavaScript 和图片可以放在 OSS 中,再通过 CDN 加速访问。OSS 负责保存文件,CDN 缓存并分发文件,域名解析则把请求引到 CDN。
下面以 static.example.com 为加速域名,记录一下配置过程。
1. 创建 OSS Bucket
开通 OSS 后,在控制台创建 Bucket,填写名称并选择地域。资源包按实际用量选择,不是创建 Bucket 的前提。
读写权限可以选择“公共读”,这样匿名用户可以读取文件,但不能上传和修改。这个 Bucket 只放准备公开的页面和资源,不放配置文件、密钥或数据库备份。
也可以选择“私有”。使用私有 Bucket 时,需要在 CDN 的回源配置中完成角色授权,并开启“私有 Bucket 回源”。只把 Bucket 改成私有而不配置回源授权,CDN 就无法正常读取文件。
2. 配置 CDN
开通 CDN,在“域名管理”中添加加速域名:
| 配置项 | 内容 |
|---|---|
| 加速域名 | static.example.com |
| 源站类型 | OSS 域名 |
| 源站地址 | 第一步创建的 Bucket 对应的外网域名 |
这里选择 OSS 源站,不要把加速域名本身填成源站,否则请求可能绕回 CDN。回源 HOST 使用 Bucket 对应的 OSS 外网域名。
回源端口设为 80 时使用 HTTP,设为 443 时使用 HTTPS。这里控制的是 CDN 到 OSS 这一段;如果要通过 https://static.example.com 访问,还需要在 CDN 上为这个加速域名配置 HTTPS 证书,不能只改回源端口。
3. 配置域名解析
CDN 域名配置完成后,回到域名列表,复制分配的 CNAME 地址。
到 example.com 的 DNS 解析管理中添加记录:
| 配置项 | 内容 |
|---|---|
| 记录类型 | CNAME |
| 主机记录 | static |
| 记录值 | CDN 控制台分配的 CNAME 地址 |
在以主域名为范围的解析面板里,static.example.com 的主机记录填 static;根域名通常填 @,不是把完整 URL 填进去。记录值也不带 http://、https:// 或文件路径。
等解析生效后,可以查看:
dig +short CNAME static.example.com返回值应与 CDN 分配的 CNAME 一致。这里的 DNS 记录指向 CDN,不是直接指向 OSS。
4. 上传文件并测试
在 Bucket 的“文件管理”里上传 index.html 和图片,保留页面中引用的目录结构。例如页面使用 images/logo.png,就把图片放在对应路径下。
先用完整文件路径访问:
http://static.example.com/index.html
http://static.example.com/images/logo.png如果已配置 CDN 的 HTTPS 证书,再检查 HTTPS 地址。也可以查看响应头:
curl -I https://static.example.com/index.html页面能打开后,再检查图片、CSS 和 JavaScript 是否正常加载。
如果使用公共读 Bucket,并希望访问域名根路径 / 就显示首页,可以在 OSS 的静态网站托管中设置默认首页为 index.html。私有 Bucket 的签名回源与默认首页访问有差别,前面的测试直接指定 /index.html,不依赖首页补全。
覆盖上传同名文件后,如果域名访问的还是旧内容,可以在 CDN 控制台刷新对应 URL 的缓存,再检查浏览器缓存。OSS 文件更新和 CDN 缓存更新不是同一件事。