CDK で簡単に静的サイトホスティングをする

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Construct Hub から絞り込み AWS CDK v2 キーワード: spa, website, static パッケージ名バージョン ( 最新) ダウンロード [weekly] cdk-nag 複雑さ ( 私見) cdk-spa-deploy 2.0.0-alpha.1 636 低 @cloudcomponents/cdk-static-website 2.2.0 230 中 @aws/pdk/static-website 0.19.68 114 高 © 2025 daikw 6

Slide 7

Slide 7 text

Slide 8

Slide 8 text

相違点パッケージ名 WebACL CDK API cdk-spa-deploy 設定なし古いものを利用 (CloudFrontWebDistribution など) @cloudcomponents/cdk-staticwebsite 既存の WebACL を利用古いものを利用 (CloudFrontWebDistribution など) @aws/pdk/static-website WebACL を自動生成最新を利用 (Distribution など) 参考: AWS WAF をCloudFront に導入する | DevelopersIO CloudFront Distribution のCDK Construct の新しいクラスを使って静的サイトホスティング（Amazon S3 ）の配信を構築してみた | DevelopersIO © 2025 daikw 8

Slide 9

Slide 9 text

cdk-spa-deploy シンプルな単一ファイルからなるコンストラクトダウンロード数が多いカスタムドメインで利用するとき: 証明書・DNS レコードまでまとめて生成される利用されている API が古い (CloudFrontWebDistribution, DnsValidatedCertificate) new SPADeploy(this, 'SPADeploy') .createSiteWithCloudfront({ indexDoc: 'index.html', websiteFolder: 'path/to/your/static/webpage', cfAliases: [yourDomainName] }); © 2025 daikw 9

Slide 10

Slide 10 text

@cloudcomponents/cdk-static-website GitHub Organization が一人でメンテされている: hupe1980 (Frank Hübner) カスタムドメインで利用するとき: DNS レコードは生成される、証明書は生成されない利用されている API が古い (CloudFrontWebDistribution), 証明書周りが、なんか、動かなそう ... ？ new StaticWebsite(this, 'StaticWebsite', { bucketConfiguration: { source: 'path/to/your/static/webpage', }, aliasConfiguration: { domainName: 'domain.com', names: ['www.domain.com', 'domain.com'], acmCertRef: certificateArn, }, }); © 2025 daikw 10

Slide 11

Slide 11 text

@aws/pdk/static-website AWS Project Development Kit (PDK) で定義のあるコンストラクト PDK 特有の実装が多く、やや複雑カスタムリソースによる WebACL の動的生成を利用し IP 制限をサポート pdk-nag に対応しているらしいカスタムドメインで利用するとき: 証明書・DNS レコードは生成されない const staticWebsite = new StaticWebsite(this, 'StaticWebsite', { websiteContentPath: 'path/to/your/static/webpage', distributionProps: { domainNames: [yourDomainName], certificate, }, }); new ARecord(this, 'AliasRecord', { zone: hostedZone, recordName: yourDomainName, target: RecordTarget.fromAlias(new targets.CloudFrontTarget(staticWebsite.cloudFrontDistribution)), }); © 2025 daikw 11

Slide 12

Slide 12 text

pdk-nag って？ cdk-nag のラッパー、 cdk-nag より少し設定がマイルドそう（ AwsSolutionsChecks のプロジェクトで pdk/static-website を利用しようとしたら違反が少し出た） AwsPrototyping という独自の cdk-nag ルールを定めて、これに準拠しているプロジェクトで cdk-nag をすでに利用している場合は要検討 © 2025 daikw 12

Slide 13

Slide 13 text

@aws/pdk/static-website を使ってみるハマりポイントはほとんどなかった、2 点だけ CloudFront の証明書を利用する場合、 us-east-1 を要求される証明書を同じスタック内で作成する場合、スタック丸ごと us-east-1 にする必要がある全部よしなにやってくれるつもりでいると、カスタムドメインの設定がうまくいかない distributionProps でドメイン設定したつもりが、 A レコードはないのでアクセスできない © 2025 daikw 13