如何基于新版AWS CDK TypeScript通过CodePipeline实现S3部署

核心实现逻辑：新版CDK Pipelines支持将传统CodePipeline Action包装为可直接插入流水线的CodePipelineActionStep，可直接对接ShellStep输出的FileSet对象，无需手动处理底层Artifact，也不用将部署逻辑耦合到构建阶段。

前置准备 #

先导入对应依赖（CDK v1版本导入路径为@aws-cdk/前缀，v2版本为aws-cdk-lib/前缀，两者API完全兼容）：

// CDK v1 导入示例
import * as s3 from '@aws-cdk/aws-s3';
import * as codepipeline_actions from '@aws-cdk/aws-codepipeline-actions';
import { CodePipeline, ShellStep, CodePipelineSource, CodePipelineActionStep } from '@aws-cdk/pipelines';
import { Duration } from '@aws-cdk/core';

创建静态页目标S3桶（按需配置静态托管、访问权限等属性）：

const landingPageBucket = new s3.Bucket(this, `${PREFIX}LandingPageBucket`, {
  websiteIndexDocument: 'index.html',
  publicReadAccess: true, // 若对接CloudFront可关闭该配置，改用OAC访问
});

实现方案1：复用官方S3DeployAction（推荐） #

直接将你熟悉的旧版S3DeployAction包装为新版Pipeline支持的步骤，自动适配FileSet输入：

// 你原有代码保持不变
const landingPageStep = new ShellStep(`${PREFIX}LandingPageCodeBuildStep`, {
  input: CodePipelineSource.connection(`${GIT_ORG}/vicinialandingpage`, GIT_MAIN, {
    connectionArn: GIT_CONNECTION_ARN,
  }),
  installCommands: ['npm ci'],
  commands: ['npm run build'],
  primaryOutputDirectory: 'out',
})

const pipeline = new CodePipeline(this, `${PREFIX}Pipeline`, {
  pipelineName: `${PREFIX}Pipeline`,
  synth: new ShellStep(`${PREFIX}Synth`, {
    input: CodePipelineSource.connection(`${GIT_ORG}/viciniacdk`, GIT_MAIN, {
      connectionArn: GIT_CONNECTION_ARN,
    }),
    commands: [
      'npm ci',
      'npm run build',
      'npx cdk synth',
    ],
    // 若无需在CDK构建阶段用到落地页代码，可删除此处additionalInputs配置
    // additionalInputs: { 'landing_page': landingPageStep }
  }),
});

// 新增独立的落地页部署阶段
const deployStage = pipeline.addStage({ stageName: 'DeployLandingPage' });
// 插入S3部署步骤
deployStage.addStep(new CodePipelineActionStep('S3DeployStep', {
  action: new codepipeline_actions.S3DeployAction({
    actionName: 'DeployToS3',
    bucket: landingPageBucket,
    // 直接传入landingPageStep的输出作为部署源，自动完成FileSet到Artifact的转换
    input: landingPageStep.primaryOutput!,
    extract: true, // 自动解压构建产物到桶根目录，必须开启
    // 按需添加其他配置
    cacheControl: [
      codepipeline_actions.CacheControl.setPublic(),
      codepipeline_actions.CacheControl.maxAge(Duration.days(7))
    ]
  })
}));

实现方案2：用ShellStep直接执行同步命令 #

如果你不想依赖S3DeployAction，也可以直接用ShellStep执行aws cli同步命令，逻辑更灵活：

// 新增独立部署阶段
const deployStage = pipeline.addStage({ stageName: 'DeployLandingPage' });
const deployStep = new ShellStep('S3DeployStep', {
  input: landingPageStep.primaryOutput!,
  commands: [
    `aws s3 sync ./ s3://${landingPageBucket.bucketName} --delete`
  ]
});
deployStage.addStep(deployStep);
// 给部署步骤授予S3桶写入权限
landingPageBucket.grantWrite(deployStep.grantPrincipal);

注意事项 #

• 两种方案均为完全独立的部署阶段，和构建阶段完全解耦，符合CI/CD最佳实践
• 若需要配置CloudFront缓存刷新，可在部署阶段后新增一个ShellStep执行aws cloudfront create-invalidation命令即可
• 如果你确实需要在CDK synth阶段用到落地页代码，保留原有的additionalInputs配置即可，不影响后续部署阶段的引用

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