本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 使用 AWS WAF 啟用 Amplify 應用程式 AWS CDK
<a name="amplify-waf-CDK"></a>

您可以使用 AWS Cloud Development Kit (AWS CDK) 為 Amplify 應用程式啟用 AWS WAF 。若要進一步了解如何使用 CDK，請參閱《 *AWS Cloud Development Kit (AWS CDK) 開發人員指南*》中的[什麼是 CDK？](https://docs.aws.amazon.com/cdk/v2/guide/home.html)。

下列 TypeScript 程式碼範例示範如何使用兩個 CDK 堆疊建立 AWS CDK 應用程式：一個用於 Amplify，另一個用於 Amplify AWS WAF。請注意， AWS WAF 堆疊必須部署到美國東部 （維吉尼亞北部） (us-east-1) 區域。Amplify 應用程式堆疊可以部署到不同的區域。您必須建立要與全球 (CloudFront) 區域中 Amplify 應用程式建立關聯的 Web ACL。區域性 Web ACLs 可能已存在於您的 中 AWS 帳戶，但與 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.
});
```