再也不会为前端项目接入CDN哭爹喊娘了！

前端

2023-04-09 14:02:14

为前端项目按环境部署CDN，告别403错误

CDN 接入的步骤

想象一下，在一个忙碌的早晨，你正坐在你的办公椅上，突然一个声音打断你的思绪。原来是后端团队来报告一个令人抓狂的问题：前端项目的静态资源在国际环境下总是返回 403 错误。

这种情况并不罕见。在为前端项目部署 CDN 时，正确设置权限至关重要。以下是分环境部署 CDN 的详细步骤：

选择 CDN 服务商： 考虑价格、服务质量和技术支持等因素。
创建 CDN 项目： 命名项目并选择项目类型。
添加 CDN 域名： 确保域名与前端项目域名相同。
配置 CDN 源站： 指定源站的域名或 IP 地址。
设置 CDN 缓存规则： 控制静态资源的缓存时间。
部署 CDN： 使用服务商工具或第三方工具部署 CDN。
测试 CDN： 使用浏览器访问 CDN 域名，确认资源加载正常。
维护 CDN： 定期更新缓存规则和监控运行状态。

解决 403 错误

如果遇到 403 错误，请检查 CDN 权限是否设置正确。确保：

权限已授予： CDN 用户拥有对源站资源的访问权限。
资源已授权： CDN 服务器可以访问指定的资源。
CDN 域名已添加到白名单： CDN 域名已添加到源站的白名单中。

代码示例：

以下是一些示例代码，演示如何配置 CDN 权限：

// 阿里云 CDN
oss.useBucket('your-bucket-name').grant('your-cdn-domain', 'Read');

// 腾讯云 CDN
let cdnService = tcb.cdn();
await cdnService.setDomainRefer(
  'cdn-domain-name',
  {
    path: ['/*'],
    rules: [
      {
        allow: ['*'],
      },
    ],
  },
  {
    // 强制刷新
    forceRefresh: true,
  }
);

// 百度云 CDN
let bceCdn = bce.createCDN({ ak: 'your-ak', sk: 'your-sk' });
let domain = bceCdn.getDomain(domain);
await domain.setRefer(
  {
    path: ['/*'],
    rules: [
      {
        allow: ['*'],
      },
    ],
  },
  {
    forceRefresh: true,
  }
);