OSS+CDN+云效部署前端站点

背景

目前公司前端项目采用 ECS 部署模式，即通过 ECS 服务器直接提供前端资源服务。具体流程如下：

1. 运维资源准备

• • ECS 实例：申请 2-3 台服务器，通常与后端服务共用；
  • Nginx 配置：可与前端资源部署在同一服务器，或独立部署一台机器以实现负载均衡。

2. 前端服务部署

• • 容器化构建：通过 Dockerfile 定义构建与启动指令，包括npm run build打包前端代码，并使用pm2-runtime start在 ECS 上启动服务；
  • 自动化部署：依托云效流水线实现基于 Docker 的自动化部署。

当时想要切换到CDN和OSS，核心诉求在于简化运维复杂度：项目未采用服务端渲染（SSR），无需服务器承载资源管理与服务运行，仅需完成前端构建后，将静态资源托管至 CDN 实现访问，其余环节（如缓存、加速、高可用）交由云服务处理。

两种模式对比分析如下：

维度	ECS 部署模式	OSS+CDN 模式
成本	综合成本高（服务器租赁 + 0.8 元 / GB 公网流量），如 100GB 总费用约 130-180 元，ecs本身是有地域属性的，如果跨地域访问，成本更高	成本显著降低（OSS 存储 + 0.25 元 / GB CDN 流量），100GB 费用仅约 25 元
性能	存在地域限制，跨区域访问延迟高；需手动配置负载均衡与缓存策略	全球节点分布式缓存，就近访问降低延迟，自动实现高并发处理
稳定性	依赖运维能力，需配置心跳检测监控服务状态以及负载均衡	云厂商托管服务，提供 99.9% 可用性保障，节点故障自动切换
运维复杂度	需持续管理服务器（系统更新、安全加固）、监控服务运行状态	免运维，仅需关注资源上传与缓存刷新，其余由云服务自动处理

因此，切换至 OSS+CDN 模式能大幅降低成本，也可通过云服务的自动化能力显著减少运维负担，更契合前端项目轻量部署以及高效运营的诉求

实践方案

配置OSS

1. 创建两个bucket，区分预发，线上，地域选择华东2，因为我们所有的服务都在华东2
2. 开启公共访问，并修改读写权限，设置为公共读

3. 设置静态页面，如果做静态站点部署，需设置静态页面，如果子目录也有html需要访问的，需开通子目录首页

配置CDN

1. 在CDN控制台，添加域名以及DNS解析，开启CDN加速，如果是预发，选中国本地即可，如果是线上可根据情况选择国内还是全球
2. 添加https证书
3. 修改缓存配置，最终目的是html不设置缓存，所有静态资源添加缓存，通过优先级配合文件后缀名进行实现

4. 性能优化配置， 开启http2，启用Gzip和Brotli压缩，Brotli压缩效果更好

配置云效

推荐使用云效的「应用交付」去管理和串联流水线，一开始我只是用流水线去做ci/cd部署，但预发和线上的部署流程是割裂的，体感不是很好。应用交付可以构建一个完整的研发流程，去完成一次迭代的发布

新建应用

1. 新建应用，可以自己建研发流程，也可以选现有的模版

2. 配置研发流程，这个没什么好介绍的，按照流程走一遍就会了， 本质上就是做流水线串联，现在针对发布迭代，把预发和线上的流水线串起来，可以完成一次迭代的部署, 整体流程如下

编辑流水线

预发流水线

1. 针对研发阶段配置预发、线上进行流水线配置，选择NodeJS构建，并配置任务步骤

1. 1. 「安装NodeJS」建议跟本地的NodeJS版本一致
   2. 「执行命令」，就是你执行构建要执行的命令，可使用npm私有仓库来改变原有构建集群使用的默认npm仓库，这个仓库默认用的是淘宝的npm源
   3. 「上传OSS」，选择建好的服务连接，Bucket目录可自行选择，如果为空是根目录

线上流水线

1. 发布审核，本质上并不是说要加一道审核，而是提醒需要进行预发验证后，再执行发布，避免误操作导致直接发到了线上
2. 下载预发已经部署的OSS，并将下载的OSS上传到线上的bucket