如何在AWS上将React应用部署至app.my-website.example子域名？

你不需要单独购买带.的域名，app.my-website.example是你已持有根域名my-website.example下的子域名——所有域名注册商都不支持直接注册含.的多级域名，你看到的所有app.xxx.com这类地址，都是站长在自有根域名基础上自行解析配置的，不需要额外支付域名费用。
你已经在AWS持有根域名且完成了根站部署，按以下步骤配置即可实现需求：

默认你的根域名DNS已经托管在Route 53（AWS购买的域名默认自动托管），全程不需要额外注册其他域名。

1. 先打包部署React应用生产资源 #

在你的React项目根目录执行打包命令，生成可直接部署的静态文件：
npm run build
执行完成后项目下会生成build目录，里面是所有需要部署的静态资源，你可以选两种常用的AWS托管方案：

• 方案A：S3存储桶托管（成本最低，适合纯静态React应用）
  • 新建S3存储桶，名称不需要和子域名绑定，比如命名为my-saas-app-prod即可，关闭"阻止所有公共访问"开关
  • 将build目录下的所有文件上传到该存储桶
  • 开启存储桶的静态网站托管功能，索引文档、错误文档均填写index.html——这一步是为了适配React Router的前端路由模式，避免子页面刷新出现404
• 方案B：AWS Amplify托管（迭代更方便，适合SaaS类长期更新的应用）
  直接在Amplify控制台关联你的项目代码仓库，框架选择React，Amplify会自动完成构建、部署流程，自带CI/CD能力，后续代码推送到仓库就会自动更新线上版本，不需要手动上传文件。

2. 申请子域名对应的SSL证书 #

要实现HTTPS访问，必须给子域名配置合法SSL证书：

• 打开AWS Certificate Manager（ACM）控制台，如果你后续要用CloudFront做CDN，必须选择**美国东部（弗吉尼亚北部）**区域申请证书，这是CloudFront的硬性要求；如果不用CloudFront，选和你应用部署相同的区域即可
• 申请公有证书，域名填写app.my-website.example，验证方式选择DNS验证
• 证书提交后控制台会生成一条CNAME验证记录，直接点击"在Route53中创建记录"，系统会自动把验证记录添加到你的根域名解析配置中，等待2-5分钟证书状态变为"已签发"即可使用。

3. （强烈推荐）配置CloudFront CDN #

不管用S3还是Amplify托管应用，都建议套一层CloudFront CDN，既可以提升全球访问速度，也能统一管理证书和访问规则：

• 新建CloudFront分配，源站地址填写你S3存储桶的静态网站托管端点，或是Amplify给你的默认应用访问域名
• 查看器协议策略选择"将HTTP重定向到HTTPS"，默认根对象填写index.html
• 在分配的"备用域名"项填入app.my-website.example，SSL证书选择上一步申请的对应子域名证书
• 自定义错误响应规则：将403、404错误的响应码改为200，响应路径填/index.html，同样是为了解决前端路由刷新404的问题

4. 添加子域名解析记录 #

回到Route 53控制台，找到my-website.example的托管区域：

• 新建解析记录，记录名填app，系统会自动补全为完整的app.my-website.example域名
• 记录类型选A记录，开启"别名"开关
• 别名目标选择你上一步创建的CloudFront分配域名；如果不用CDN直连S3，直接选择对应S3存储桶的静态网站端点即可
• 保存记录后等待DNS生效，一般1-10分钟就能通过https://app.my-website.example访问你的React应用，极少数情况可能需要等待最长48小时全球生效。

注意：不要把app子域名解析到你根域名现有站点使用的CloudFront分配或S3存储桶上，必须给业务应用单独配置源站和CDN规则，否则会和根域名的静态宣传站内容冲突。

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