amazon-web-services - 当我将此 BucketDeployment 添加到我的 CDK CodePipeline 时，cdk synth 永远不会完成

Question

我正在尝试使用 CDK 和 CodePipeline 构建 React 应用程序并将其部署到 S3。在 CodePipeline 阶段之后，在我自己的堆栈中，我这样定义了 S3 存储桶:

const bucket = new Bucket(this, "Bucket", {
    websiteIndexDocument: "index.html",
    websiteErrorDocument: "error.html",
})

有效。然后我这样定义了我构建的 React 应用程序的部署:

new BucketDeployment(this, "WebsiteDeployment", {
    sources: [Source.asset("./")],
    destinationBucket: bucket
})

这似乎不起作用。 BucketDeployment 的使用是否正确？

当我添加 BucketDeployment 行时发生的一些奇怪的事情是 cdk synth 或 cdk deploy，它们永远不会完成并且它们似乎生成cdk.out 中的无限递归树，所以那里肯定有问题。

如果我更改为 Source.asset("./build")，我会收到错误消息:

> cdk synth
C:\Users\pupeno\Code\ww3fe\node_modules\aws-cdk-lib\core\lib\asset-staging.ts:109
      throw new Error(`Cannot find asset at ${this.sourcePath}`);
            ^
Error: Cannot find asset at C:\Users\pupeno\Code\ww3fe\build
    at new AssetStaging (C:\Users\pupeno\Code\ww3fe\node_modules\aws-cdk-lib\core\lib\asset-staging.ts:109:13)
    at new Asset (C:\Users\pupeno\Code\ww3fe\node_modules\aws-cdk-lib\aws-s3-assets\lib\asset.ts:72:21)
    at Object.bind (C:\Users\pupeno\Code\ww3fe\node_modules\aws-cdk-lib\aws-s3-deployment\lib\source.ts:55:23)
    at C:\Users\pupeno\Code\ww3fe\node_modules\aws-cdk-lib\aws-s3-deployment\lib\bucket-deployment.ts:170:83
    at Array.map (<anonymous>)
    at new BucketDeployment (C:\Users\pupeno\Code\ww3fe\node_modules\aws-cdk-lib\aws-s3-deployment\lib\bucket-deployment.ts:170:51)
    at new MainStack (C:\Users\pupeno\Code\ww3fe\infra\pipeline-stack.ts:16:9)
    at new DeployStage (C:\Users\pupeno\Code\ww3fe\infra\pipeline-stack.ts:28:26)
    at new PipelineStack (C:\Users\pupeno\Code\ww3fe\infra\pipeline-stack.ts:56:24)
    at Object.<anonymous> (C:\Users\pupeno\Code\ww3fe\infra\pipeline.ts:6:1)
Subprocess exited with error 1

这表明这是非常错误的。为什么它在我的机器上搜索 build 目录？它应该在构建后在 CodePipeline 中搜索它。

我的整个管道是:

import {Construct} from "constructs"
import {CodeBuildStep, CodePipeline, CodePipelineSource} from "aws-cdk-lib/pipelines"
import {Stage, CfnOutput, StageProps, Stack, StackProps} from "aws-cdk-lib"
import {Bucket} from "aws-cdk-lib/aws-s3"
import {BucketDeployment, Source} from "aws-cdk-lib/aws-s3-deployment"

export class MainStack extends Stack {
    constructor(scope: Construct, id: string, props?: StageProps) {
        super(scope, id, props)

        const bucket = new Bucket(this, "Bucket", {
            websiteIndexDocument: "index.html",
            websiteErrorDocument: "error.html",
        })

        new BucketDeployment(this, "WebsiteDeployment", {
            sources: [Source.asset("./")],
            destinationBucket: bucket
        })

        new CfnOutput(this, "BucketOutput", {value: bucket.bucketArn})
    }
}

export class DeployStage extends Stage {
    public readonly mainStack: MainStack

    constructor(scope: Construct, id: string, props?: StageProps) {
        super(scope, id, props)
        this.mainStack = new MainStack(this, "example")
    }
}

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

        const pipeline = new CodePipeline(this, id, {
            pipelineName: id,
            synth: new CodeBuildStep("Synth", {
                    input: CodePipelineSource.connection("user/example", "main", {
                        connectionArn: "arn:aws:codestar-connections:....",
                    }),
                    installCommands: [
                        "npm install -g aws-cdk"
                    ],
                    commands: [
                        "npm ci",
                        "npm run build",
                        "npx cdk synth"
                    ]
                }
            ),
        })

        const deploy = new DeployStage(this, "Staging")
        const deployStage = pipeline.addStage(deploy)
    }
}

我在 AWS 中遇到的实际错误是:

[Container] 2022/01/25 20:28:27 Phase complete: BUILD State: SUCCEEDED
[Container] 2022/01/25 20:28:27 Phase context status code:  Message: 
[Container] 2022/01/25 20:28:27 Entering phase POST_BUILD
[Container] 2022/01/25 20:28:27 Phase complete: POST_BUILD State: SUCCEEDED
[Container] 2022/01/25 20:28:27 Phase context status code:  Message: 
[Container] 2022/01/25 20:28:27 Expanding base directory path: cdk.out
[Container] 2022/01/25 20:28:27 Assembling file list
[Container] 2022/01/25 20:28:27 Expanding cdk.out
[Container] 2022/01/25 20:28:27 Skipping invalid file path cdk.out
[Container] 2022/01/25 20:28:27 Phase complete: UPLOAD_ARTIFACTS State: FAILED
[Container] 2022/01/25 20:28:27 Phase context status code: CLIENT_ERROR Message: no matching base directory path found for cdk.out

以防万一，通过 cdk.json，在我的 repo 的根目录中，包含:

{
  "app": "npx ts-node --project infra/tsconfig.json --prefer-ts-exts infra/pipeline.ts",
  "watch": {
    "include": [
      "**"
    ],
    "exclude": [
      "README.md",
      "cdk*.json",
      "**/*.d.ts",
      "**/*.js",
      "tsconfig.json",
      "package*.json",
      "yarn.lock",
      "node_modules",
      "test"
    ]
  },
  "context": {
    "@aws-cdk/aws-apigateway:usagePlanKeyOrderInsensitiveId": true,
    "@aws-cdk/core:stackRelativeExports": true,
    "@aws-cdk/aws-rds:lowercaseDbIdentifier": true,
    "@aws-cdk/aws-lambda:recognizeVersionProps": true,
    "@aws-cdk/aws-cloudfront:defaultSecurityPolicyTLSv1.2_2021": true
  }
}

Answer 1

TL;DR 通过两个更改，管道成功部署了 React 应用程序:(1) Source.asset 需要 build 目录和 (2) React 构建命令需要添加到合成步骤。

为 Source.asset 提供 React build 目录的完整路径:

new BucketDeployment(this, "WebsiteDeployment", {
    sources: [Source.asset(path.join(__dirname, './build'))], // relative to the Stack dir
    destinationBucket: bucket
})

React 构建工件通常是 .gitignored，因此 CodePipeline 需要构建 React 应用程序。我的版本有一个单独的 package.json 用于 React 应用程序，因此构建步骤 ¹ 需要更多命令:

synth: new pipelines.CodeBuildStep('Synth', {
  commands: [
    // build react (new)
    'cd react-app',  // path from project root to React app package.json
    'npm ci',
    'npm run build',
    'cd ..',
    // synth cdk (as in OP)
    "npm ci",
    "npm run build",
    "npx cdk synth"  // synth must run AFTER the React build step
  ],

React 应用部署到 S3 URL:

// MainStack
new cdk.CfnOutput(this, 'WebsiteUrl', {
  value: `http://${this.websiteBucket.bucketName}.s3-website-${this.region}.amazonaws.com`,
});

---

(1) pipelines.CodePipeline 是一个 opinionated construct for deploying Stacks .较低级别的 codepipeline.Pipeline 构造具有许多应用程序需要的功能，例如分离构建步骤和在步骤之间传递构建时环境变量(例如，使用 < 将 API URL 注入(inject)客户端包code>REACT_APP_API_URL 环境变量)。