使用CDN优化图片加载
📅
开始之前 🔗
目前，文章图片以.png文件保存在public文件夹中。
可以使用
<Image>组件引用并加载这些图片。
但随着图片增多，项目体积会变大，图片文件也越来越难管理。
此外，图片越多，页面加载越慢，因此我开始寻找能够优化图片加载的方式。什么是CDN 🔗
CDN（Content Delivery Network，内容分发网络）会把内容存储在分布于世界各地的服务器上，当用户访问内容时，由距离用户最近的服务器提供内容。 这样可以提高内容传输速度，减轻服务器负载。 维基百科↗
提供CDN服务的厂商有很多。
这里我打算使用CloudFront和S3存储桶搭建CDN环境。
什么是CloudFront和S3 🔗
Amazon CloudFront
是一项将.html、.css、.js和图片等静态与动态Web内容
快速分发给用户的Web服务。
CloudFront通过遍布世界各地、称为边缘站点的数据中心网络提供内容。
当用户请求CloudFront上的内容时，请求会被路由到延迟最低的边缘站点，从而获得更好的传输性能。
Amazon S3
是面向Web服务的对象存储服务，提供简单的Web服务接口，供Web规模的计算任务使用。搭建CDN环境 🔗
1. 创建S3存储桶 🔗
我已有一个通过Route53托管的域名，因此使用对应账号登录并操作。
- 登录AWS，进入
S3服务，然后点击버킷 생성。 **注意区域选择！**创建存储桶之前，应先选择合适的区域。这里我选择了아시아 태평양(서울)。 存储桶命名规则↗——不能使用下划线。 其余选项使用默认设置。 点击버킷 만들기后，即可创建。
2. 创建CloudFront分配 🔗
- 进入
CloudFront服务，点击배포 생성。 - 在Origin Domain中，选择S3存储桶的端点地址。
在Origin Access中选择
원본 엑세스 제어 설정，然后点击Create new OAC。 使用默认设置，点击Create。 在默认缓存行为中，根据自己的需求选择查看器协议策略（我选择了HTTPS only）。 通常img和script标签不会检查CORS，因此可以保留默认缓存策略，但为了保险，这里仍然进行配置。- 将源请求策略设为
CORS-S3Origin。 - 将响应标头策略设为
CORS-With-Preflight。
배포 생성。 - 将源请求策略设为
3. 配置S3存储桶策略 🔗
CloudFront创建完成后，会显示以下消息。
点击复制策略按钮，将策略复制下来，然后通过链接进入S3存储桶的策略设置页面。
点击编辑策略，粘贴策略并保存。
4. 确认CloudFront连接 🔗
向S3存储桶上传图片。
点击上传按钮，选择要上传的文件或图片。
也可以直接拖放上传。
回到CloudFront，检查分配状态。
CloudFront部署完成后，可以看到分配的域名。
现在，通过分配域名就能访问图片。
https://[도메인 이름]/[파일명]"绑定CDN域名（可选） 🔗
默认提供的域名由AWS生成。
这个域名比较复杂、不易记忆，因此最好绑定到自己已有的域名。
需要一个已经完成
托管
的域名，请提前准备。1. 创建记录 🔗
进入Route53，选择自己的域名。
点击
레코드 세트 생성。
输入子域名，选择CNAME记录。
将值设为CloudFront分配域名，然后创建记录。2. 申请SSL证书 🔗
CloudFront需要SSL证书，因此进入ACM（AWS Certificate Manager）申请证书。
可供CloudFront使用的证书，只能在美国东部（弗吉尼亚北部）区域申请。
请先将区域切换到弗吉尼亚北部！
依次选择申请证书 > 申请公有证书。
输入配置CNAME的域名，点击요청。初始状态为等待验证。
如果等待后状态仍然没有变化，可以点击
Route53에서 레코드 생성，创建DNS记录。3. 绑定CloudFront域名 🔗
在CloudFront页面点击编辑设置。
按下图配置CNAME和SSL证书，再点击
설정 저장。配置完成后，通过对应域名访问CDN。
结论 🔗
进一步思考 🔗
对比应用CDN前后的整篇文章。
这里选取了一篇图片较多的文章进行比较。
应用CDN之前：
应用CDN之后：
