AWS CDK V2でCloudFront+S3の静的サイトホスティングを構築してみた

若槻龍太

2022.03.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 IoT事業部の若槻です。

昨年末にAWS CDK V2がデプロイされました。

AWS Cloud Development Kit (AWS CDK) v2 の一般提供開始

V2では、CDK Constructの構成で必要となるパッケージが1つに集約されるなど、V1と比べてよりよい開発体験が提供されるようになりました。

また、V1は2022/6/1以降はメンテナンスモードに移行してしまうので、今後新規のCDKプロジェクトを作る際には必然的にV2を使うこととなりそうです。

AWS CDKのv1はいつまでサポートされるのか調べてみた | DevelopersIO

今回は、そんなAWS CDK V2の肩慣らしとして、CloudFront+S3の静的サイトホスティングを構築してみました。

やってみた

CDKアプリ初回作成

cdk initでCDKアプリを初回作成します。

$ npx cdk init --language typescript

作成されたディレクトリの構成です。V1とほぼ同じに見えます。

package.jsonを見ると、CDKパッケージのバージョンが2.14.0とあり、CDKアプリがV2で作成されていることが分かります。

{
  "name": "aws-cdk-v2-app",
  "version": "0.1.0",
  "bin": {
    "aws-cdk-v2-app": "bin/aws-cdk-v2-app.js"
  },
  "scripts": {
    "build": "tsc",
    "watch": "tsc -w",
    "test": "jest",
    "cdk": "cdk"
  },
  "devDependencies": {
    "@types/jest": "^26.0.10",
    "@types/node": "10.17.27",
    "jest": "^26.4.2",
    "ts-jest": "^26.2.0",
    "aws-cdk": "2.14.0",
    "ts-node": "^9.0.0",
    "typescript": "~3.9.7"
  },
  "dependencies": {
    "aws-cdk-lib": "2.14.0",
    "constructs": "^10.0.0",
    "source-map-support": "^0.5.16"
  }
}

あとは必要に応じてcdk bootstrapを行ってください。

CloudFront+S3静的サイトホスティングの構成

今回作りたかったCloudFront+S3静的サイトホスティングを構成してみます。

やはり注目すべきはaws-cdk-libという1つのパッケージからすべてのConstructのクラスをImportできている点です。これにより作りたいサービスやリソース毎にパッケージを追加したり、すべてのパッケージのバージョンを揃えたりする手間が省けるのが何より嬉しいです。

また、StackのコードはCDK V1で同様の構成を作った際のコードをほぼそのまま流用できました。Importしたクラスの使用はV1とV2でほぼ互換性があるようです。

import { Construct } from 'constructs';
import {
  Stack,
  StackProps,
  aws_s3,
  aws_cloudfront,
  aws_cloudfront_origins,
  aws_s3_deployment,
  aws_iam,
  RemovalPolicy,
  Duration,
} from 'aws-cdk-lib';

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

    const websiteBucket = new aws_s3.Bucket(this, 'WebsiteBucket', {
      removalPolicy: RemovalPolicy.DESTROY,
    });

    const originAccessIdentity = new aws_cloudfront.OriginAccessIdentity(
      this,
      'OriginAccessIdentity',
      {
        comment: 'website-distribution-originAccessIdentity',
      }
    );

    const webSiteBucketPolicyStatement = new aws_iam.PolicyStatement({
      actions: ['s3:GetObject'],
      effect: aws_iam.Effect.ALLOW,
      principals: [
        new aws_iam.CanonicalUserPrincipal(
          originAccessIdentity.cloudFrontOriginAccessIdentityS3CanonicalUserId
        ),
      ],
      resources: [`${websiteBucket.bucketArn}/*`],
    });

    websiteBucket.addToResourcePolicy(webSiteBucketPolicyStatement);

    const distribution = new aws_cloudfront.Distribution(this, 'distribution', {
      comment: 'website-distribution',
      defaultRootObject: 'index.html',
      errorResponses: [
        {
          ttl: Duration.seconds(300),
          httpStatus: 403,
          responseHttpStatus: 403,
          responsePagePath: '/error.html',
        },
        {
          ttl: Duration.seconds(300),
          httpStatus: 404,
          responseHttpStatus: 404,
          responsePagePath: '/error.html',
        },
      ],
      defaultBehavior: {
        allowedMethods: aws_cloudfront.AllowedMethods.ALLOW_GET_HEAD,
        cachedMethods: aws_cloudfront.CachedMethods.CACHE_GET_HEAD,
        cachePolicy: aws_cloudfront.CachePolicy.CACHING_OPTIMIZED,
        viewerProtocolPolicy:
          aws_cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
        origin: new aws_cloudfront_origins.S3Origin(websiteBucket, {
          originAccessIdentity,
        }),
      },
      priceClass: aws_cloudfront.PriceClass.PRICE_CLASS_ALL,
    });

    new aws_s3_deployment.BucketDeployment(this, 'WebsiteDeploy', {
      sources: [
        aws_s3_deployment.Source.data(
          '/index.html',
          '<html><body><h1>Hello World</h1></body></html>'
        ),
        aws_s3_deployment.Source.data(
          '/error.html',
          '<html><body><h1>Error!!!!!!!!!!!!!</h1></body></html>'
        ),
        aws_s3_deployment.Source.data('/favicon.ico', ''),
      ],
      destinationBucket: websiteBucket,
      distribution: distribution,
      distributionPaths: ['/*'],
    });
  }
}

cdk deployを実行してStackをデプロイします。

ディストリビューションドメインにアクセスすると、サイトにアクセスできました！