Habilitación AWS WAF de una aplicación Amplify mediante el AWS CDK

Puede usar el AWS Cloud Development Kit (AWS CDK) AWS WAF para habilitar una aplicación Amplify. Para obtener más información sobre el CDK, consulte ¿Qué es el CDK? en la Guía para desarrolladores de AWS Cloud Development Kit (AWS CDK) .

El siguiente ejemplo de TypeScript código muestra cómo crear una AWS CDK aplicación con dos pilas de CDK: una para Amplify y otra para. AWS WAF Tenga en cuenta que la AWS WAF pila debe desplegarse en la región EE.UU. Este (Norte de Virginia) (us-east-1). La pila de la aplicación de Amplify se puede implementar en una región diferente. Debe crear la ACL web que desee asociar a la aplicación Amplify en la región Global (CloudFront). ACLs Puede que tu web regional ya exista Cuenta de AWS, pero no es compatible con 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.
});