中国区部署 Web 前端到 S3 和 Cloudfront
现代应用通常采用前、后端分离的架构,分离后的前端应用通常以 HTML + CSS + Javascript 的形式存在,通过 HTTP 服务器将这些静态资源提供给用户的浏览器,并在其中运行,再配合后端各个微服务面向前端的 API 动态加载数据组成应用的整体。虽然 HTTP 服务器可以提供前端应用的静态资源,但是为了更快的加载速度和更好的使用体验,现在,静态资源几乎都会使用 CDN(内容分发网络)进行分发。这样既可以减轻 HTTP 服务器的压力,又可以加快前端应用的加载速度,还可以在全球不同地点提供几乎一致的使用体验。在 AWS 上,Amazon S3 可以直接通过 HTTP 协议对外提供资源,节省了 HTTP 服务器的成本,配合 CDN 服务 CloudFront 即可实现前端应用的快速部署。
Amazon S3 是 AWS 上使用最为广泛的对象存储服务,支持直接将存储在 S3 数据桶的HTML、CSS、Javascript 等资源通过 HTTP 协议对外暴露,让用户可以直接通过 S3 获取到前端应用。Amazon CloudFront 是 AWS 上的 CDN 服务,它可以将 S3 设置为分发的对象,将 S3 上的资源通过 AWS 分布在世界各地的边缘节点将内容提供给用户。同时,CloudFront 还提供了 S3 不支持的 HTTPS 协议,让前端应用更加安全。然而由于中国区的一些特殊情况,在此使用 S3 + CloudFront 需要一些不同于 Global 的额外配置,下文将详细描述操作步骤,帮助有需要的人在 AWS 中国区优雅的部署前端应用。
1. 建立 S3 数据桶
注意:需要设置阻止公开访问。
2. 建立 Route 53
红框内输入以备案的域名。
3. 建立 CloudFront 分配
源选择存放前端资源的 S3 桶,桶中如果没有子文件夹则留空源路径输入框。来源访问选择“遗留访问身份”,点击“建立新的 OAI”,下面选择“否,我将更新存储桶策略”。
在备用域名中添加刚才在 Route 53 添加的域名,默认根对象填写 index.html (根 HTML 文件文件名)。
建立完成后,进入“源”标签页,记下表格中 Origin access 的值,如图红框所示。
4. 更新 S3 桶策略并保存
代码如下(替换下面纯大写字符串):
5. 回到 Route 53 增加别名
如果实用子域名则需要新增 CNAME 记录,并在 CloudFront 的备用域名中输入该记录的完整域名。
全部完成后,等待片刻即可去设定的域名测试效果。
总结
由于中国区和全球区的不同,以及 ICP 备案的要求,导致在国内使用 S3 + CloudFront 部署前端应用需要更多的额外设置。相信本文可以帮助大家顺利使用在 AWS 部署前端应用的最佳实践,降低部署和维护前端应用的成本。
本篇作者
相关文章
- Windows 11承诺的支持安卓App终于更新了 大神教你如何在国区使用
- HaaS场景式应用学习|阿里云产品精选(十七)
- 重新设计的Windows记事本和Media Player上架
- 移植案例与原理 - XTS子系统之应用兼容性测试套件之二
- 移植案例与原理 - XTS子系统之应用兼容性测试套件之一
- Windows 11今日迎来数个新功能 包括Android应用支持和任务栏改进
- Windows 11设置应用将获重大升级
- 微软 Windows 11 全新现代任务管理器更多曝光功能体验:支持 App 健康、电池健康、新启动项
- HaaS UI基础教学八:JSAPI自动化测试方法
- HaaS UI – 免费开源的轻量级IoT小程序解决方案
- 1 万 Star!基于 Android 平台的开源 Linux 终端模拟器
- HaaS UI小程序解决方案基础教学之一: 快速开始
- 微软筹备Windows 11系统新版本:Win10开始菜单文件夹功能终于回归
- 斗宿-HarmonyOS中APP、组件、组件库的辨析与应用
- 手机在线视频流量对业务速率、小区容量影响分析
- 微软听取用户意见:继续改进Windows 11任务栏 更好用了
- 微软突然暂停Windows 11更新:直言为系统准备更多重磅新功能
- 如何在 Windows 11 中快速安装 Android 原生应用
- 可运行安卓应用:微软正式确认Windows 11更新
- 微软 Windows 10 / 11 月活设备达 14 亿台,90% 财富 500 强企业使用 Teams