本地localhost的Angular静态站如何通过AWS部署到绑定域名的公网

针对你提到的小体量静态站场景，你最初规划的EC2方案完全不是最优选择：EC2适合需要常驻运行后端进程的场景，纯静态Angular站点用S3对象存储+CloudFront CDN的方案，运维成本几乎为0，小流量下基本能被AWS免费额度覆盖，总成本只有EC2方案的十分之一甚至更低，也不需要你在服务器上安装Node/NPM维护运行环境。

环境区分方案 #

Angular本身内置了多环境支持，不需要额外搭建复杂体系：

• 开发环境配置存放在src/environments/environment.ts，可以写本地调试接口地址、开启日志打印等配置，本地执行ng serve启动开发服务时默认加载该配置，也就是你现在localhost:4200访问的模式
• 生产环境配置存放在src/environments/environment.prod.ts，可以写生产接口地址、关闭调试开关、开启生产优化等配置，执行生产构建时会自动替换为该文件的配置
• 如果后续需要测试、预发布等更多环境，直接在angular.json中添加对应构建配置项即可，构建时传对应参数就能切换环境

需要特别注意：本地ng serve是用Node起的开发调试服务器，生产环境只需要部署构建后的纯静态文件，根本不需要Node运行环境，这也是你最初思路里需要调整的核心认知。

完整部署流程（S3+CloudFront+Route53方案） #

1. 前置准备 #

• 完成域名购买，域名可以在AWS Route53购买，也可以在其他域名服务商购买，后续都可以正常绑定
• 本地先验证生产构建正常：在项目根目录执行ng build --configuration production，构建完成后会生成dist/你的项目名文件夹，里面就是所有可直接部署的静态资源。可以本地执行npx serve dist/你的项目名验证构建产物能正常访问、路由跳转/刷新都没有问题。

2. 创建S3存储桶存放静态文件 #

• 新建S3存储桶，桶名建议和你的自定义域名保持一致，区域选择离你目标用户最近的即可
• 关闭「阻止所有公共访问」选项，开启桶的「静态网站托管」功能，索引文档和错误文档都填index.html——Angular是前端单页路由，错误文档指向index.html才能解决子路由刷新报404的问题
• 给桶配置公有读权限策略，仅允许匿名用户读取桶内文件，绝对不要开公有写入权限，避免被人恶意篡改站点内容
• 把本地dist文件夹内的所有文件上传到S3桶根目录即可，不需要上传项目源码，这时候访问S3提供的静态网站端点已经可以正常打开站点，只是暂时是HTTP协议、AWS默认域名，没有全球加速。

3. 配置CloudFront CDN实现HTTPS和全球加速 #

• 新建CloudFront分配，源站选择你刚才创建的S3静态网站端点
• 默认根对象设置为index.html，同时配置自定义错误响应：把403、404错误的响应页面指向/index.html，返回200状态码，彻底解决前端路由刷新问题
• 开启自动HTTPS，AWS会免费提供SSL证书，不需要单独购买
• 配置缓存规则：带哈希后缀的JS/CSS/图片等静态资源可以设置7-30天的长缓存，index.html设置为不缓存或者1分钟以内的短缓存，避免站点更新后用户持续加载旧版本
• 等待CloudFront分配部署完成（一般5-10分钟），就可以通过CloudFront提供的xxx.cloudfront.net域名用HTTPS正常访问站点了。

4. 绑定自定义域名 #

• 如果域名是在Route53购买的，直接在对应域名的托管区域新建A记录，开启别名选项指向你创建的CloudFront分配，解析1-2分钟即可生效
• 如果域名是在其他服务商购买的，到域名商的解析后台添加CNAME记录，指向CloudFront分配的域名即可。

上线前检查清单 #

• 生产构建无报错，本地用静态服务器跑构建产物时所有功能、路由都正常
• S3桶权限配置正确，仅开放公有读权限，无多余写入/修改权限
• CloudFront错误页配置正确，任意子路由刷新都不会返回404
• HTTPS证书正常生效，浏览器访问没有安全警告
• 生产环境配置已正确加载，没有残留本地开发的接口地址、调试日志
• 缓存规则配置正确，避免更新后用户无法及时拿到新版本
• 用浏览器无痕模式访问自定义域名，完整走一遍核心功能流程确认无异常

后续代码更新流程 #

后续每次修改完代码要上线，只需要三个步骤：

1. 本地执行ng build --configuration production重新生成构建产物
2. 把新的dist文件全量上传覆盖S3桶内的旧文件
3. 在CloudFront控制台创建缓存失效请求，路径填/*，等1-2分钟全网节点就会更新到最新版本，不需要登录服务器做任何操作。

如果后续站点需要增加后端接口能力，再单独搭配EC2、Lambda或者API Gateway服务即可，静态资源部分依然可以保留这套S3+CloudFront的架构，不管是成本还是性能都比全量跑在EC2上优很多。

内容的提问来源于stack exchange，提问作者Learner