Zenn
🐷

AWS CDKでS3+CloudFront+WAFをTypeScriptで構築

2024/06/29に公開
AWS
CloudFront
WAF
AWS CDK
tech

1. はじめに

この記事では、AWS CDK（Cloud Development Kit）を使用して、S3バケット、CloudFrontディストリビューション、WAF（Web Application Firewall）を含むウェブホスティングインフラストラクチャをTypeScriptで構築する方法を説明します。

2. 前提条件

  • Node.jsとnpmがインストールされていること
  • AWS CLIがインストールされ、設定されていること
  • AWS CDKがインストールされていること（npm install -g aws-cdk）

3. 手順

1. プロジェクトのセットアップ

まず、新しいCDKプロジェクトを作成します：

mkdir my-cdk-project
cd my-cdk-project
cdk init app --language typescript

2. 必要な依存関係のインストール

package.jsonに以下の依存関係を追加し、npm installを実行します：

{
  "dependencies": {
    "aws-cdk-lib": "^2.0.0",
    "constructs": "^10.0.0"
  }
}

3. スタックの実装

lib/my-cdk-project-stack.ts

import * as cdk from 'aws-cdk-lib';
import * as s3 from 'aws-cdk-lib/aws-s3';
import * as cloudfront from 'aws-cdk-lib/aws-cloudfront';
import * as origins from 'aws-cdk-lib/aws-cloudfront-origins';
import * as wafv2 from 'aws-cdk-lib/aws-wafv2';
import { Construct } from 'constructs';

export class MyCdkProjectStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // S3バケットの作成
    const bucket = new s3.Bucket(this, 'WebsiteBucket', {
      versioned: true,
      encryption: s3.BucketEncryption.S3_MANAGED,
      publicReadAccess: false,
      blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
    });

    // CloudFrontディストリビューションの作成
    const distribution = new cloudfront.Distribution(this, 'WebsiteDistribution', {
      defaultBehavior: {
        origin: new origins.S3Origin(bucket),
        viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
      },
      defaultRootObject: 'index.html',
    });

    // WAF WebACLの作成
    const webAcl = new wafv2.CfnWebACL(this, 'WebACL', {
      defaultAction: { allow: {} },
      scope: 'CLOUDFRONT',
      visibilityConfig: {
        cloudWatchMetricsEnabled: true,
        metricName: 'WebACL',
        sampledRequestsEnabled: true,
      },
      rules: [
        {
          name: 'LimitRequests100',
          priority: 1,
          action: { block: {} },
          visibilityConfig: {
            cloudWatchMetricsEnabled: true,
            metricName: 'LimitRequests100',
            sampledRequestsEnabled: true,
          },
          statement: {
            rateBasedStatement: {
              limit: 100,
              aggregateKeyType: 'IP',
            },
          },
        },
      ],
    });

    // WAF WebACLとCloudFrontディストリビューションの関連付け
    new wafv2.CfnWebACLAssociation(this, 'WebACLAssociation', {
      resourceArn: distribution.distributionArn,
      webAclArn: webAcl.attrArn,
    });

    // CloudFront URLの出力
    new cdk.CfnOutput(this, 'DistributionDomainName', {
      value: distribution.distributionDomainName,
      description: 'CloudFront Distribution Domain Name',
    });
  }
}

4. コードの説明

S3バケット

  • バージョニングを有効にし、S3マネージド暗号化を使用
  • パブリックアクセスをブロック

CloudFrontディストリビューション

  • S3バケットをオリジンとして設定
  • HTTPSにリダイレクト
  • デフォルトのルートオブジェクトを'index.html'に設定

WAF WebACL

  • デフォルトのアクションを'allow'に設定
  • CloudFrontスコープで適用
  • レートベースのルールを追加（IPアドレスごとに100リクエスト/5分）

WAF WebACLとCloudFrontの関連付け

  • CfnWebACLAssociationを使用して関連付け

出力

  • CloudFrontのドメイン名を出力として表示

5. デプロイ

プロジェクトをデプロイするには、以下のコマンドを実行します：

cdk deploy

デプロイが完了すると、CloudFrontのドメイン名が出力されます。

4. まとめ

このチュートリアルでは、AWS CDKを使用してS3バケット、CloudFrontディストリビューション、WAF WebACLを含むウェブホスティングインフラストラクチャをTypeScriptで構築する方法を学びました。このアプローチにより、インフラストラクチャをコードとして管理し、バージョン管理やテストが容易になります。

Discussion