使用 AWS CDK 为 Amplify 应用程序启用 AWS WAF

您可以使用 AWS Cloud Development Kit (AWS CDK) 来为 Amplify 应用程序启用 AWS WAF。要了解有关使用 CDK 的更多信息，请参阅《AWS Cloud Development Kit (AWS CDK) 开发人员指南》中的 What is the CDK?。

以下 TypeScript 代码示例演示了如何创建包含两个 CDK 堆栈的 AWS CDK 应用程序：一个用于 Amplify，一个用于 AWS WAF。请注意，AWS WAF 堆栈必须部署到美国东部（弗吉尼亚州北部）（us-east-1）区域。Amplify 应用程序堆栈可以部署到不同的区域。必须在全局（CloudFront）区域中创建要与 Amplify 应用程序关联的 Web ACL。您的 AWS 账户中可能已经存在区域性的 Web ACL，但它们与 Amplify 不兼容。

import * as cdk from "aws-cdk-lib";
import { Construct } from "constructs";
import * as wafv2 from "aws-cdk-lib/aws-wafv2";
import * as amplify from "aws-cdk-lib/aws-amplify";

interface WafStackProps extends cdk.StackProps {
  appArn: string;
}

export class AmplifyStack extends cdk.Stack {
  public readonly appArn: string;
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);
    const amplifyApp = new amplify.CfnApp(this, "AmplifyApp", {
      name: "MyApp",
    });
    this.appArn = amplifyApp.attrArn;
  }
}

export class WAFStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props: WafStackProps) {
    super(scope, id, props);
    const webAcl = new wafv2.CfnWebACL(this, "WebACL", {
      defaultAction: { allow: {} },
      scope: "CLOUDFRONT",
      rules: [
        // Add your own rules here.
      ],
      visibilityConfig: {
        cloudWatchMetricsEnabled: true,
        metricName: "my-metric-name",
        sampledRequestsEnabled: true,
      },
    });

    new wafv2.CfnWebACLAssociation(this, "WebACLAssociation", {
      resourceArn: props.appArn,
      webAclArn: webAcl.attrArn,
    });
  }
}

const app = new cdk.App();

// Create AmplifyStack in your desired Region.
const amplifyStack = new AmplifyStack(app, 'AmplifyStack', {
  env: { region: 'us-west-2' },
});

// Create WAFStack in IAD region, passing appArn from AmplifyStack.
new WAFStack(app, 'WAFStack', {
  env: { region: 'us-east-1' }, 
  crossRegionReferences: true,

  appArn: amplifyStack.appArn,  // Pass appArn from AmplifyStack.
});