如何通过AWS CDK v2将React项目部署到AWS（含流水线配置）

1. 创建React部署栈 #

在cdk/lib目录下新建react-deployment.stack.ts，定义存储静态资源的S3桶和CloudFront分发：

import * as cdk from "aws-cdk-lib";
import { Construct } from "constructs";
import * as s3 from "aws-cdk-lib/aws-s3";
import * as cloudfront from "aws-cdk-lib/aws-cloudfront";
import * as origins from "aws-cdk-lib/aws-cloudfront-origins";

export class ReactDeploymentStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // 创建S3桶，用于存储React构建产物
    const reactBucket = new s3.Bucket(this, "ReactAppBucket", {
      bucketName: `my-react-app-${cdk.Aws.ACCOUNT_ID}-${cdk.Aws.REGION}`,
      publicReadAccess: false,
      blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
      removalPolicy: cdk.RemovalPolicy.DESTROY, // 测试环境用，生产环境改为RETAIN
      autoDeleteObjects: true, // 测试环境用
    });

    // 创建CloudFront分发，指向S3桶
    const distribution = new cloudfront.Distribution(this, "ReactAppDistribution", {
      defaultBehavior: {
        origin: new origins.S3Origin(reactBucket),
        viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
      },
      defaultRootObject: "index.html",
      errorResponses: [
        {
          httpStatus: 404,
          responseHttpStatus: 200,
          responsePagePath: "/index.html",
        },
      ],
    });

    // 输出CloudFront域名和分发ID
    new cdk.CfnOutput(this, "CloudFrontDomain", {
      value: distribution.domainName,
    });
    new cdk.CfnOutput(this, "DistributionId", {
      value: distribution.distributionId,
      exportName: "ReactAppDistributionId",
    });
  }
}

2. 修改流水线栈，添加构建与部署步骤 #

更新cdk/lib/pipeline.stack.ts，调整Synth步骤命令以构建React应用，并添加部署阶段：

import * as cdk from "aws-cdk-lib";
import { CodePipeline, CodePipelineSource, ShellStep } from "aws-cdk-lib/pipelines";
import { Construct } from "constructs";
import { ReactDeploymentStack } from "./react-deployment.stack";

export class PipelineStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // 定义流水线
    const pipeline = new CodePipeline(this, "Pipeline", {
      pipelineName: "MyPipeline",
      synth: new ShellStep("Synth", {
        input: CodePipelineSource.gitHub("<OWNER>/<PROJECT>", "dev"),
        commands: [
          // 根目录安装依赖并构建React应用
          "npm ci",
          "npm run build",
          // 处理CDK部分
          "cd cdk",
          "npm ci",
          "npm run build",
          "npx cdk synth",
        ],
        primaryOutputDirectory: "cdk/cdk.out",
      }),
    });

    // 添加部署阶段，部署React应用栈
    const deployStage = pipeline.addStage(new cdk.Stage(this, "DeployStage", {
      env: props?.env,
    }));

    // 部署React部署栈
    deployStage.addStack(new ReactDeploymentStack(this, "ReactDeploymentStack", {
      env: props?.env,
    }));

    // 添加步骤：同步React构建产物到S3并刷新CloudFront缓存
    deployStage.addPost(new ShellStep("DeployReactAssets", {
      commands: [
        `aws s3 sync ../build s3://my-react-app-${cdk.Aws.ACCOUNT_ID}-${cdk.Aws.REGION} --delete`,
        `aws cloudfront create-invalidation --distribution-id ${cdk.Fn.importValue("ReactAppDistributionId")} --paths "/*"`,
      ],
    }));
  }
}

3. 更新流水线部署 #

1. 进入cdk目录，执行npm run build编译CDK代码
2. 运行cdk deploy --profile my-profile更新AWS上的流水线
3. 提交代码到GitHub dev分支，触发流水线自动执行React构建、CDK合成、部署到S3和CloudFront

关键注意事项 #

• 确保流水线执行角色拥有S3读写、CloudFront缓存无效化的权限
• React项目package.json需包含build命令（默认React模板已自带："build": "react-scripts build"）
• 生产环境需将S3桶的removalPolicy改为cdk.RemovalPolicy.RETAIN，避免误删数据

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