기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# AWS WAF 를 사용하여 Amplify 애플리케이션 활성화 AWS CDK
<a name="amplify-waf-CDK"></a>

를 사용하여 Amplify 애플리케이션에 AWS WAF 대해를 활성화 AWS Cloud Development Kit (AWS CDK) 할 수 있습니다. CDK 사용에 대한 자세한 내용은 *AWS Cloud Development Kit (AWS CDK) 개발자 가이드*의 [CDK란 무엇인가요?](https://docs.aws.amazon.com/cdk/v2/guide/home.html)를 참조하세요.

다음 TypeScript 코드 예제에서는 두 개의 CDK 스택으로 AWS CDK 앱을 생성하는 방법을 보여줍니다. 하나는 Amplify용이고 다른 하나는 용입니다 AWS WAF. AWS WAF 스택은 미국 동부(버지니아 북부)(us-east-1) 리전에 배포해야 합니다. Amplify 애플리케이션 스택은 다른 리전에 배포할 수 있습니다. Amplify 앱에 연결하려는 웹 ACL은 전역(CloudFront) 리전에서 생성해야 합니다. 리전 웹 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.
});
```