部署React应用到AWS的服务选型、CI/CD搭建及Codestar、Amplify适配咨询

1. AWS CodeStar适配场景及配套服务 #

可以使用CodeStar实现你的需求，需配合使用的AWS服务如下：

• 代码托管：CodeCommit（也可关联GitHub/GitLab第三方仓库，支持多开发者权限管控、协同提交）
• CI构建：CodeBuild，负责执行React应用的依赖安装、打包构建流程
• 部署托管：纯前端React场景使用S3 + CloudFront托管静态资源，服务端渲染场景可选择ECS/EKS或Elastic Beanstalk
• 权限管控：IAM，配置不同开发者的流水线操作、资源访问权限
• CRUD配套：CodeStar支持直接关联Serverless资源模板，可同步创建API Gateway、Lambda、DynamoDB资源，无需单独逐个配置

2. AWS Amplify是否为可行替代方案 #

是完全可行的替代方案，甚至更适配纯前端React的开发场景：

• Amplify内置CI/CD流水线，绑定代码仓库后自动触发构建部署，原生支持多环境隔离（开发/测试/生产），多开发者可基于不同分支部署对应环境，权限管控能力完全满足协同需求
• Amplify提供开箱即用的Amplify CLI，可一键生成API Gateway、Lambda、DynamoDB的CRUD接口，还封装了前端SDK，直接在React代码中调用即可，无需自行编写接口签名、请求封装逻辑
• 纯前端React应用的部署做了深度优化，自动配置S3、CloudFront、HTTPS证书、自定义域名，无需手动调整底层配置，比CodeStar的配置量减少70%以上

3. CodeStar部署纯前端create-react-app构建失败的解决方案 #

这不是CodeStar的已知问题，绝大多数是buildspec.yml配置、构件输出路径、部署目标不匹配导致的，可按以下步骤排查解决：

1. 确认buildspec.yml的配置符合纯前端静态资源部署要求，参考正确配置示例：

version: 0.2
phases:
  install:
    runtime-versions:
      nodejs: 18 # 需匹配本地开发的Node.js版本，避免依赖安装失败
    commands:
      - npm install
  build:
    commands:
      - npm run build # 对应create-react-app的构建命令，输出产物默认存放在build目录
artifacts:
  files:
    - '**/*'
  base-directory: 'build' # 必须指定构建产物的根目录为build，否则部署流程会找不到静态资源
  discard-paths: no

2. 确认CodeStar项目选择的部署目标是S3静态网站托管，而非EC2/Elastic Beanstalk这类服务端运行时环境。你之前能正常部署带Express的应用，大概率是默认选择了服务端运行时部署模板，纯前端不需要启动服务进程，直接将build目录的文件推送到S3即可。
3. 若为构建阶段报错，可查看CodeBuild运行日志，排查是否为依赖版本不兼容、CI环境内存不足问题，可在install阶段添加NODE_OPTIONS=--max_old_space_size=4096参数解决内存溢出问题。

4. 后端资源创建方式说明 #

不需要手动单独创建每个后端资源，AWS体系内有两种方案可一体化完成资源创建和调用：

• 若使用CodeStar：项目初始化时选择带Web + Serverless API的模板，CodeStar会自动生成CloudFormation模板，一键创建API Gateway、Lambda、DynamoDB资源，生成的代码模板中已包含前端调用后端接口的示例，直接修改即可使用。
• 若使用Amplify：执行amplify add api命令，按照CLI提示选择REST/GraphQL接口、配置CRUD权限、关联DynamoDB表，执行amplify push后所有资源会自动创建完成，前端安装aws-amplify依赖后，直接调用API.get()、API.post()等方法即可完成数据操作，无需手动配置接口签名、跨域等规则，Amplify会自动处理。

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