Function Compute搭建前端CICD系统

1FucntionCompute搭建前端CICD系统最佳实践 业务架构图 场景描述 传统动静不分离的产品架构，随着访问量在增 长，性能会成为瓶颈。在这种情况下，用户可以 通过利用OSS和CDN对网站进行架构优化， 做到网站文件的动静分离，提升用户访问体验， 实现成本可控。本方案使用 Fucntion Compute监听前端代码库提交的分支变更，上 传分支文件至OSS，通过CDN进行前端资源加 速。 部署架构图 方案优势 1. 面向serverless：无需购买服务器 2. 免运维：无需部署配置Jenkins 3. 提供日志查询、性能监控和报警等功能 4. 一站式：事件驱动方式触发响应 5. 费用极低：按需付费 产品列表  专有网络VPC  对象存储OSS  日志服务SLS  FucntionCompute  CDN 文档版本：20191127（发布日期）

2云服务器ECS（产品名称） 文档模板（手册名称）/文档版本信息 阿里云 FucntionCompute搭建 前端CICD系统最佳实践 文档版本：20150122（发布日期） 2

3FucntionCompute搭建 前端CICD系统最佳实践|文档版本信息 文档版本信息 文本信息 属性 内容 文档名称 FucntionCompute搭建前端CICD系统最佳实践 文档编号 073 文档版本 V1.5 版本日期 2020/12/28 文档状态 制作人 毕役 审阅人 文档变更记录 版本编号 日期 作者 审核人 说明 V1.0 2019/07/19 毕役 创建 V1.1 2019/08/05 毕役 张明远 文档优化 V1.2 2019/08/07 毕役 游圣 添加代码 V1.3 2019/11/27 毕役 添加钉群二维码 V1.4 2020/1/20 毕役 增加概览页 V1.5 2020/12/28 毕役 替换Function Compute 文档版本：20190805 I

4FucntionCompute搭建 前端CICD系统最佳实践|前言 前言 概述 本方案功能是FucntionCompute监听前端代码库提交的分支变更，上传分支文件至 OSS，通过CDN进行前端资源加速。 应用范围 适用于前后端分离架构下，自动化持续部署前端资源。 名词解释  VPC：VirtualPrivateCloud，简称VPC。基于阿里云创建的自定义私有网络, 不 同的专有网络之间二层逻辑隔离，可以在自己创建的专有网络内创建和管理云产 品实例，比如ECS、负载均衡、RDS等。在创建前，您需要结合具体业务，规划 VPC和交换机的数量及网段等。 详见：https://www.aliyun.com/product/vpc  OSS：对象存储服务（ObjectStorageService，OSS）是一种海量、安全、低成 本、高可靠的云存储服务，适合存放任意类型的文件。容量和处理能力弹性扩展， 多种存储类型供选择，全面优化存储成本。 详见：https://help.aliyun.com/product/31815.html  RAM：RAM(ResourceAccessManagement)是阿里云为客户提供的用户身份管 理与访问控制服务。使用RAM，您可以创建、管理用户账号（比如员工、系统或 应用程序），并可以控制这些用户账号对您名下资源具有的操作权限。当您的企业 存在多用户协同操作资源时，RAM可以按需为用户分配最小权限，从而让您避免 与其他用户共享云账号密钥，降低您企业的信息安全风险。 详见：https://help.aliyun.com/product/28625.html  日志服务：日志服务（LogService，简称LOG）是针对日志类数据一站式服务， 在阿里巴巴集团经历了大量大数据场景锤炼而成。用户无需开发就能快捷完成数 据采集、消费、投递以及查询分析等功能，帮助提升运维、运营效率，建立 DT时 代海量日志处理能力。 详见：https://help.aliyun.com/product/28958.html  FucntionCompute：阿里云FucntionCompute是事件驱动的全托管计算服务。通 文档版本：20190805 III

5FucntionCompute搭建 前端CICD系统最佳实践|前言 过FucntionCompute，您无需管理服务器等基础设施，只需编写代码并上传。 FucntionCompute会为您准备好计算资源，以弹性、可靠的方式运行您的代码， 并提供日志查询、性能监控、报警等功能。借助于FucntionCompute，您可以快 速构建任何类型的应用和服务，无需管理和运维。而且，您只需要为代码实际运 行所消耗的资源付费，代码未运行则不产生费用。 详见：https://help.aliyun.com/product/50980.html 文档版本：20190805 IV

6FucntionCompute搭建 前端CICD系统最佳实践|目录 目录 文档版本信息.........................................................................................................................................I ................................................................................................................................................ 法律声明 II 前言.......................................................................................................................................................III 目录........................................................................................................................................................V ....................................................................................................................................... 最佳实践概述 VI 前置条件................................................................................................................................................1 .............................................................................................................................. 1. 创建OSSBucket 2 2. 创建RAM子账号.........................................................................................................................10 2.1. 创建子账号.....................................................................................................................10 ..................................................................................................................... 2.2. 授权子账号 13 3. 配置日志服务...............................................................................................................................15 ................................................................................................................ 4. 配置FucntionCompute 19 4.1. 创建函数服务.................................................................................................................19 4.2. 创建函数.........................................................................................................................23 ............................................................................................................................... 5. 配置代码托管 29 5.1. 创建代码仓库.................................................................................................................29 ................................................................................................................. 5.2. 配置webhook 31 5.3. 配置sshkey.....................................................................................................................32 6. 持续发布验证...............................................................................................................................36 ............................................................................................................................................... 7. 附录 38 7.1. 代码地址.........................................................................................................................38 .................................................................................................... 7.2. my_ssh_executable.sh 38 7.3. frontenddeploy.py...........................................................................................................38 文档版本：20190805 V

7FucntionCompute搭建 前端CICD系统最佳实践|最佳实践概述 最佳实践概述 业务场景  动静分离架构 传统动静不分离的产品架构，随着访问量在增长，性能会成为瓶颈。在这种情况 下，用户可以通过利用OSS和CDN对网站进行架构优化，做到网站文件的动静 分离，提升用户访问体验，实现成本可控。 ￚ 静态文件访问通过CDN降低Web服务器负载 ￚ OSS的存储费用仅为ECS磁盘费用的50% ￚ 海量存储空间，无需考虑存储架构升级 ￚ CDN流量费用低  静态资源发布 企业一般的做法是使用Gitlab托管前端代码，搭建Jenkins监听webhook消息， 再发布至OSS。此方案虽然比较灵活，但存在如下的劣势： ￚ 需要购买服务器自建Jenkins，涉及计算存储费用 ￚ 需要专业的运维人员保障服务器稳定运行 ￚ 集成OSS的SDK实现比较重 方案概述 本方案功能是FucntionCompute监听前端代码库提交的分支变更，上传分支文件至 文档版本：20190805 VI

8FucntionCompute搭建 前端CICD系统最佳实践|最佳实践概述 OSS，通过CDN进行前端资源加速。方案优势如下： ￚ 面向serverless：无需购买服务器 ￚ 免运维：无需部署配置Jenkins ￚ 提供日志查询、性能监控和报警等功能 ￚ 一站式：事件驱动方式触发响应 ￚ 费用极低：按需付费https://help.aliyun.com/document_detail/54301.html 文档版本：20190805 VII