如何创建代码管道阶段以在 github 中使用源代码部署 React 应用程序？ [CDK 2.0]

Question

我在 GitHub 中有一个 React 存储库，我想构建一个管道，以便每当我将新提交推送到存储库时，管道都会构建并部署到生产环境中。我正在使用 CDK 2.0。

我的流水线代码：

import * as cdk from "aws-cdk-lib";

import { Stack, StackProps } from "aws-cdk-lib";
import {
  CodePipeline,
  CodePipelineSource,
  ShellStep,
  Step,
} from "aws-cdk-lib/pipelines";
import { ManualApprovalStep } from "aws-cdk-lib/pipelines";
import { PipelineStage } from "./pipeline-stage";

export interface CodePipelineStackProps extends cdk.StackProps {
  // Built in Stack props
  readonly env: cdk.Environment;
  readonly description: string;
}

export class CodePipelineStack extends Stack {
  constructor(scope: cdk.App, id: string, props: CodePipelineStackProps) {
    super(scope, id, props);

    const pipeline = new CodePipeline(this, "Pipeline", {
      pipelineName: "MyPipeline",
      synth: new ShellStep("Synth", {
        input: CodePipelineSource.gitHub(
          "github-acount-name/my-react-code",
          "main"
        ),
        commands: [
          'npm ci',
          'npm run build',
          'npx cdk synth'
        ],
      }),
    });

  
    const gammaStage = pipeline.addStage(
      new PipelineStage(this, "Gamma", {
        env: props.env,
      })
    );

    gammaStage.addPre(
      new ShellStep("Run Unit Tests", { commands: ["yarn install", "npm test"] })
    );
    gammaStage.addPost(
      new ManualApprovalStep("Manual approval before production")
    );

    const prodStage = pipeline.addStage(
      new PipelineStage(this, "Prod", {
        env: props.env,
      })
    );
    
  }
}

我应该在这里做什么才能将我的 React 应用程序添加到管道阶段代码？ 我可以从 this example 中看到它添加了一个 LambdaStack 来自本地资产。但是，我想从我的 GitHub 存储库构建工件。

export class PipelineStage extends cdk.Stage {
    constructor(scope: Construct, id: string, props?: cdk.StageProps) {
        super(scope, id, props);
        
    }
}

Answer 1

你有很多选择。首先，CDK 有两种流水线风格，codepipeline.Pipeline and pipelines.CodePipeline. The docs have guidance on which to choose，但简而言之：

pipelines.CodePipeline 针对部署 CDK 应用程序进行了自以为是和优化
codepipeline.Pipeline 对于通用构建任务更灵活
两者在很大程度上重叠 - 你可以解决很多问题
在幕后，部署 AWS::CodePipeline::Pipeline 和 AWS::CodeBuild::Project 资源

你应该选择哪个？这是一个偏好问题，但对于一般构建任务，我发现 codepipeline.Pipeline API 更容易推理。使用 S3 目标存储桶和管道构造创建堆栈。管道有 one-or-many stages and each stage has one-or-many actions (aws-cdk-lib/aws-codepipeline-actions)。这是一种处理方法：

带有 source action 的源代码阶段，用于从远程仓库中提取代码，例如 actions.CodeCommitSourceAction
A build stage with an actions.CodeBuildAction to build the code. You provide it a buildspec 给出安装和构建命令，设置环境变量等
带有 actions.S3DeployAction 的 deploy 阶段，用于将构建的代码输出到目标存储桶

如何创建代码管道阶段以在 github 中使用源代码部署 React 应用程序？ [CDK 2.0]

How to create a code pipeline stage to deploy React application with source code in github? [CDK 2.0]

reactjs

aws-codepipeline

aws-cdk