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

https://github.com/daikw/slides

Transcript

1. CDK で簡単に静的サイトホスティング をする at: クラスメソッドのAWS CDK 事情大公開スペシャル#2 - connpass src: daikw/slides © 2025 daikw
2. 自己紹介 daikw (Daiki Watanabe) バレーボール歴: 15 年 組込開発歴: 2 年 クラウドインフラ歴: 2 年 CDK 歴: 半年 © 2025 daikw 2
3. 株式会社 Photosynth 主に Akerun を作っています テックブログ あります！ メカ・エレキの設計 / 組込 / モバイル / クラウド / Web 開発 と、 IoT 大体全部やっていま す。レイヤ横断したいエンジニ アは楽しめると思います © 2025 daikw 3
4. CDK の用途 社内限定ツールのホスティングに利用 ツールが少しずつ増えてきたのでサービスディレクトリを作りたい -> CDK で完結する、静的サイトホスティングの手段が必要 © 2025 daikw 4
5. AWS における静的サイトホスティング 構成 特徴 HTTPS Amazon S3 簡単 x AWS Amplify IAM がカオス o Amazon CloudFront + S3 設定が面倒 o 面倒な設定の頻出パターン -> コンストラクト化が向いていそう © 2025 daikw 5
6. 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
7. 共通点 S3 + CloudFront + Route 53 BucketDeployment を利用しローカルのファイルをデプロイ © 2025 daikw 7
8. 相違点 パッケージ名 WebACL CDK API cdk-spa-deploy 設定なし 古いものを利用 (CloudFrontWebDistribution など) @cloudcomponents/cdk-static- website 既存の WebACL を 利用 古いものを利用 (CloudFrontWebDistribution など) @aws/pdk/static-website WebACL を自動 生成 最新を利用 (Distribution など) 参考: AWS WAF をCloudFront に導入する | DevelopersIO CloudFront Distribution のCDK Construct の新しいクラスを使って静的サイトホスティング （Amazon S3 ）の配信を構築してみた | DevelopersIO © 2025 daikw 8
9. 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
10. @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
11. @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
12. pdk-nag って？ cdk-nag のラッパー、 cdk-nag より少し設定がマイルドそう（ AwsSolutionsChecks のプロジェクトで pdk/static-website を利用 しようとしたら違反が少し出た） AwsPrototyping という独自の cdk-nag ルールを定めて、これに準拠 している プロジェクトで cdk-nag をすでに利用している場合は要検討 © 2025 daikw 12
13. @aws/pdk/static-website を使ってみる ハマりポイントはほとんどなかった、2 点だけ CloudFront の証明書を利用する場合、 us-east-1 を要求される 証明書を同じスタック内で作成する場合、スタック丸ごと us-east-1 にする必要がある 全部よしなにやってくれるつもりでいると、カスタムドメインの設 定がうまくいかない distributionProps でドメイン設定したつもりが、 A レコードは ないのでアクセスできない © 2025 daikw 13
14. @aws/pdk/static-website を使ってみる 作成されるリソース © 2025 daikw 14
15. まとめ ごく単純な静的サイトホスティングは GitHub Pages / Netlify / Vercel などの方が圧倒的に楽、楽をしよう AWS で静的サイトホスティングが必要な場合は、CDK を使って 楽をしよう よく使われているコンストラクトも以外と古い。新しめのものを 参考に、自分で作るのが良いかも © 2025 daikw 15
16. おわり © 2025 daikw