amazon-s3 - 如何使用 AWS CDK(首选 typescript)向 API 网关的现有 AWS cloudfront 发行版添加行为？

Question

我正在尝试实现一个 CDK 项目，该项目将在 s3 存储桶中部署静态网站以及 CloudFront 发行版。我还有一个 API 网关，需要通过相同的云前端 URL 进行访问。我可以从 AWS 管理控制台执行此操作。但是当我尝试使用 CDK 实现此功能时，我遇到了循环依赖错误。

    const cdn = new cloudfront.Distribution(this, "websitecdn", {
        defaultBehavior: {origin: new origins.S3Origin(s3_bucket)}
    });
    const api = new apigw.RestApi(this, 'someapi', {defaultCorsPreflightOptions: enableCors})
    const loginApi = api.root.addResource('login', {defaultCorsPreflightOptions: enableCors})
    loginApi.addMethod('POST', new apigw.LambdaIntegration(loginLambda, {
    proxy: false,
    integrationResponses: [LambdaIntegrationResponses]}), 
    {
        methodResponses: [LambdaMethodResponses]
    })
    const apiOrigin = new origins.RestApiOrigin(api)
    cdn.addBehavior("/prod/*",apiOrigin,{
        allowedMethods: cloudfront.AllowedMethods.ALLOW_ALL,
        cachePolicy: cloudfront.CachePolicy.CACHING_DISABLED,
        viewerProtocolPolicy: ViewerProtocolPolicy.HTTPS_ONLY,
    })

一切正常，直到我尝试在 CDN 中添加 API 网关的行为。但是当我添加它时，它开始抛出循环依赖错误。

我尝试使用 AWS CDK typescript 执行以下操作:

1. 部署静态 s3 网站

2. 为此网站创建一个 CloudFront 分配 -> 我们将其命名为 cdn_x

3. 部署后端 API(带有 API 网关的 Lambda 函数)

4. 将 API 网关 URL 作为行为添加到 cdn_x，以便我也可以使用相同的 URL 进行 API 调用(我没有自定义域)

我预计部署会顺利进行，因为我能够在 AWS 管理控制台(AWS 的 Web UI)中进行部署。但尝试使用 AWS CDK 执行相同操作会引发循环依赖错误。

Answer 1

从您的示例中尚不清楚 CDK 项目中的堆栈和资源是如何创建和关联的。我无法使用您的代码示例。

同时，我在 /api/* 路径下使用 CloudFront 中的多个行为和 Amazon API Gateway 创建了一个 TypeScript 示例，并将 S3 存储桶作为默认行为来提供静态 Assets /*

最终的CDK结构如下:

CDK 代码库使用 multiple stacks :

• cloudfront-stack.ts
• rest-api-stack.ts
• s3-stack.ts
• waf-stack.ts

资源在 bin/infra.ts 中作为引用传递

const app = new cdk.App();
const s3Stack = new S3Stack(app, "S3Stack");
const restApiStack = new RestApiStack(app, "RestApiStack");
const wafStack = new WafStack(app, "WafStack", {
  restApi: restApiStack.restApi,
});
const cloudFrontStack = new CloudFrontStack(app, "CloudFrontStack", {
  bucketAssets: s3Stack.bucketAssets,
  restApi: restApiStack.restApi,
  wafCloudFrontAclArn: wafStack.wafCloudFrontAclArn,
  wafRestApiOriginVerifyHeader: wafStack.wafRestApiOriginVerifyHeader,
  wafRestApiOriginVerifyHeaderValue: wafStack.wafRestApiOriginVerifyHeaderValue,
});

GitHub 存储库:

• https://github.com/oieduardorabelo/cdk-cloudfront-behavior-api-gateway-waf-protection

我相信上面的示例会澄清您的一些问题。