20240706_CDKConf

Transcript

1. 1 © 2024 Japan Digital Design, Inc. Takuya Yonezawa 2024.07.06

   AWS CDK Conference Japan 2024 TS何も分からんマンが作った JAWSDAYS2024ティザーサイト徹底解剖

2. 2 © 2024 Japan Digital Design, Inc. 米澤 拓也 Software

   Engineer Technology & Development Div. Photo 前職ではCCoE、現職ではSoftware Engineer フロントの実装からインフラ構築など何でもやります TypeScriptは趣味で触っていたが、半年ほど前から業務で利用開始 技術書典16で出店してました 好きなAWSサービスは CloudFront、Lambda 好きなCDK Constructは NodejsFunction ApplicationLoadBalancedFargateService プロフィール 米澤

3. 3 © 2024 Japan Digital Design, Inc. Japan Digital Design株式会社

   2017年10月2日 代表取締役 CEO 浜根 吉男 79名（2024年3月時点） 株式会社三菱UFJフィナンシャル・グループ 株式会社三菱総合研究所 三菱UFJリサーチ＆コンサルティング株式会社 社名 設立 代表者 従業員数 株主構成 会社概要

4. 4 © 2024 Japan Digital Design, Inc. はじめに 🙋 JAWS

   DAYS 2024に ご参加いただいた方？ 🙋

5. 5 © 2024 Japan Digital Design, Inc. 結構頑張ったぞJAWS DAYSサイト構築 1113

   Commit 134 Deploy 本日は 本業より工数がかかったといっても過言ではない DAYSのサイト構築についてお話します

6. 6 © 2024 Japan Digital Design, Inc. サイト構成

7. 7 © 2024 Japan Digital Design, Inc. latest コミット1発目（2023/11/14） 初期はこんな感じでした

   実行委員長からの 様々な無茶振り😢

8. 8 © 2024 Japan Digital Design, Inc. 従来のJAWSサイトを踏襲しつつ いくつか新規機能を追加 •

   PC/SPレスポンシブ対応 • セッションお気に入り機能 • あまり使っていない 管理者機能 サイトの使い心地についてXでエゴサ 改善など取り込めるものは即対応 💪 これが令和のJAWSDAYSや！ サイト構成 PC/SPレスポンシブ対応 セッションお気に入り機能

9. 9 © 2024 Japan Digital Design, Inc. 基本に忠実なサーバレス構成 • コスト増大NG

   • サイトへのトラフィック予測が 立てられなかった • 極力マネージドサービスに預ける ことで他の運営タスクに��力 （やることが多いんですホント） • こういうのでいいんだよ こういうので サイト構成 AWS Cloud (Dev/Prod) CloudFront API Gateway S3 （WEB） DynamoDB （News） Lambda （管理者操作用） Lambda （一般参照用） DynamoDB （FAQ） DynamoDB （FollowUp） S3 （イベント写真） Cognito CDK ACM X-Ray X-Ray

10. 10 © 2024 Japan Digital Design, Inc. 基本に忠実なサーバレス構成 • コスト増大NG

    • サイトへのトラフィック予測が 立てられなかった • 極力マネージドサービスに預ける ことで他の運営タスクに注力 （やることが多いんですホント） • こういうのでいいんだよ こういうので サイト構成 AWS Cloud (Dev/Prod) CloudFront API Gateway S3 （WEB） Lambda （管理者操作用） Lambda （一般参照用） Cognito CDK ACM X-Ray X-Ray DynamoDB （News） DynamoDB （FAQ） DynamoDB （FollowUp） S3 （イベント写真）

11. 11 © 2024 Japan Digital Design, Inc. CDKの内部 • 過去のCDK支部の資料を読み漁る

    • 大量のリソースをデプロイする わけでもないので 1Stack 構成 • Construct層は細分化しすぎると 参照を組むのが面倒くさくなりそ うだったので、用途/目的別 で分割 • TSのLambdaなので NodejsFunctionと周辺ライブラリ 活用 （Lambda Powertools、Middy） インフラ部分の構成 App Stack Construct （API） Construct （Cognito） Construct （Datastore） Parameter (TS)

12. 12 © 2024 Japan Digital Design, Inc. 楽をしたいサイト運営

13. 13 © 2024 Japan Digital Design, Inc. デプロイ作業を楽にしたい！ （フロント部分） •

    きっとたくさんデプロイするんだ ろうなという直感があったので CI/CD周りは真っ先に整備 • たくさんCI/CDしすぎて米澤の Actions無料枠が枯渇しました CI/CD –フロント- Actions CloudFront S3 （WEB） AWS Cloud (Dev/Prod) WEBデプロイ用 Role Step.1 リリース用ブランチに 変更をPush (Dev/Prod) Step.2 事前作成済みのCD用 IAMロールをAssume Step.3 ビルドした 静的コンテンツを配置 Step.4 CloudFrontの キャッシュクリア

14. 14 © 2024 Japan Digital Design, Inc. デプロイ作業を楽にしたい！ （フロント部分） •

    きっとたくさんデプロイするんだ ろうなという直感があったので CI/CD周りは真っ先に整備 • たくさんCI/CDしすぎて米澤の Actions無料枠が枯渇しました CI/CD –フロント- CloudFront S3 （WEB） AWS Cloud (Dev/Prod) Step.1 リリース用ブランチに 変更をPush (Dev/Prod) Step.3 ビルドした 静的コンテンツを配置 Step.4 CloudFrontの キャッシュクリア Actions WEBデプロイ用 Role Step.2 事前作成済みのCD用 IAMロールをAssume GitHub Actions × WEBデプロイ用Role の 繋ぎ込みは configure-aws-credentials を採用 【嬉しみ】 ・Actions用アクセスキーが不要 ・CFnテンプレートが用意されている ・Actionsへの組み込みが簡単

15. 15 © 2024 Japan Digital Design, Inc. Actions WEBデプロイ用 Role

    Step.2 事前作成済みのCD用 IAMロールをAssume デプロイ作業を楽にしたい！ （フロント部分） • きっとたくさんデプロイするんだ ろうなという直感があったので CI/CD周りは真っ先に整備 • たくさんCI/CDしすぎて米澤の Actions無料枠が枯渇しました CI/CD –フロント- CloudFront S3 （WEB） AWS Cloud (Dev/Prod) Step.1 リリース用ブランチに 変更をPush (Dev/Prod) Step.3 ビルドした 静的コンテンツを配置 Step.4 CloudFrontの キャッシュクリア GitHub Actions × WEBデプロイ用Role の 繋ぎ込みは configure-aws-credentials を採用 【嬉しみ】 ・Actions用アクセスキーが不要 ・CFnテンプレートが用意されている ・Actionsへの組み込みが簡単 これだけ！

16. 16 © 2024 Japan Digital Design, Inc. デプロイ作業を楽にしたい！ （インフラ部分） •

    自動化しませんでした • デプロイ頻度が高くない + 変更が入ってもLambdaくらい • Actionsと紐づけるCDKデプロイ用 IAM Roleの権限精査が面倒だった • そもそもCodePipelineやCDK Pipelines使った方が楽なのでは？ と考えるのが面倒だった CI/CD –インフラ- CDK deployの進捗をニヤニヤしながら眺めるのも悪く��ない （と思っている）

17. 17 © 2024 Japan Digital Design, Inc. リポジトリ運用も楽したい！！ • フロント/インフラ層はTSで統一

    • 型定義/共用ライブラリなどを モノレポで共有することで リポジトリのスリム化 • モノレポ化には npm workspaceを利用 リポジトリ運用 root Frontend （Next.js） Infra （CDK） Types （独自型定義） package.json package.json package.json package.json yarn.lock npm workspace

18. 18 © 2024 Japan Digital Design, Inc. npm update？ npm-check-updates

    (ncu)？ npm outdated？ 漢のlatest運用？ ところでnpmライブラリのアップデート どう対応されてますか？ （特に aws-cdk）

19. 19 © 2024 Japan Digital Design, Inc. Dependabotを採用した • WeeklyでDependabotによる

    ライブラリアップデートを実施 • 開発ブランチにてPRマージ後、 下記の2つで壊れてないかチェック - フロント：CypressによるE2E - インフラ：CDK Synthでビルド • 当初nxでモノレポ組んでいたが dependabot絡みでハマった。。 リポジトリ運用 root Frontend （Next.js） Infra （CDK） Types （独自型定義） npm workspace package.json package.json package.json package.json yarn.lock Dependabot ライブラリアップデート用の Pull Request出しといたで！

20. 20 © 2024 Japan Digital Design, Inc. Dependabotを採用した リポジトリ運用 root

    Frontend （Next.js） Infra （CDK） Types （独自型定義） npm workspace package.json package.json package.json package.json yarn.lock Dependabot ライブラリアップデート用の Pull Request出しといたで • WeeklyでDependabotによる ライブラリアップデートを実施 • 開発ブランチにてPRマージ後、 下記の2つで壊れてないかチェック - フロント：CypressによるE2E - インフラ：CDK Synthでビルド • 当初nxでモノレポ組んでいたが dependabot絡みでハマった。。

21. 21 © 2024 Japan Digital Design, Inc. 辛かったこと

22. 22 © 2024 Japan Digital Design, Inc. biomeのVerUp起因でCI/CD Pipelineがコケる •

    LinterとFormatterが セットになったやつ • モノレポでeslint, prettierの設定を 入れるのが面倒だったので採用 • 実行が早いとの噂を聞きつけた • 各種設定をbiome.jsonに集約、 使い回しができそうだった • 新しいので使ってみたかった 辛かったこと パイプライン概略 npm intall Lintチェック （biome） ビルド E2Eテスト （cypress） デプロイ処理 （前述） フロント インフラ npm intall Lintチェック （biome） ビルド （synth） ▪ 開発用ブランチ ▪ リリース用ブランチ biome.json（抜粋） 公式サイトでホストされているスキー マファイルを参照してバージョン固定 することもできるが、 node_modules配下（=最新）の スキーマファイルを参照するよう設定 ルール定義が頻繁に変わるため、 （リネーム、リタイア etc..） biome実行時に「ルール名が違うぜ！」 的なエラーが頻発 v1.7.x 代の時はVerUpの度にコケた😢

23. 23 © 2024 Japan Digital Design, Inc. 辛かったこと CloudFront API

    Gateway Lambda （News） /api/news /api/faq /api/followup Lambda （FAQ） Lambda （FollowUp） DynamoDB （News） DynamoDB （FAQ） DynamoDB （FollowUp） No. パスパターン キャッシュ 1 /* ON 2 - - 3 - - CloudFront周りをCDK管理下に 置いていなかった • 1回作ったら修正不要＋マネコンで 作った���うが早そうと判断し、 ポチポチ操作で作成した • 参照系APIが主になると考えていた のでAPI系も原則キャッシュONに して、Lambdaのコールドスタート を回避できるようにしていた。 が、運用の中で設定変更が必要に • 設定変更はマネコン操作で対応し ていた（早いうちにcdk importし ておけば良かった。。 • そのうちキャッシュを100年に 設定して文鎮化予定 【 通常状態 】 CloudFrontのキャッシュを効かせて表示速度Up ▪ キャッシュON ▪ キャッシュOFF

24. 24 © 2024 Japan Digital Design, Inc. 辛かったこと CloudFront API

    Gateway Lambda （News） /api/news /api/faq /api/followup Lambda （FAQ） Lambda （FollowUp） DynamoDB （News） DynamoDB （FAQ） DynamoDB （FollowUp） No. パスパターン キャッシュ 1 /api/news OFF 2 ・・・ ・・・ 3 /* ON CloudFront周りをCDK管理下に 置いていなかった • 1回作ったら修正不要＋マネコンで 作ったほうが早そうと判断し、 ポチポチ操作で作成した • 参照系APIが主になると考えていた のでAPI系も原則キャッシュONに して、Lambdaのコールドスタート を回避できるようにしていた。 が、運用の中で設定変更が必要に • 設定変更はマネコン操作で対応し ていた（早いうちにcdk importし ておけば良かった。。 • そのうちキャッシュを100年に 設定して文鎮化予定 ▪ キャッシュON ▪ キャッシュOFF 時刻指定でNewsを 表示する際に利用 【 常時最新News表示パターン 】 ・企業スポンサー申し込みフォームのOpen/Close速報 ・Keynote情報速報アナウンス etc…

25. 25 © 2024 Japan Digital Design, Inc. 企業スポンサー申し込み期間のリクエスト数 ちなみに。。 お手本のようなバーストトラフィック！

    とはいえLambda以外に コンピューティングリソースが存在しないので何もせず傍観 Diamond 募集オープン Platinum 募集オープン Gold/Lunch 募集オープン Silver 募集オープン

26. 26 © 2024 Japan Digital Design, Inc. 実は PANKRATIONのサイトも作ってます

27. 27 © 2024 Japan Digital Design, Inc. もはやCDK要らないんじゃね？ • i18n対応/microCMS採用のために

    Next.jsをSSR化 • ホスティング先は1番お手軽そうな App Runnerに決定 • ECSも少し検討したが、 オーバーテクノロジーだと 思ったので不採用 サイト構成 – PANKRATION - AWS Cloud (Prod) CDK App Runner ECR Secrets Manager 自動デプロイ Push PANKRATION WEB班

28. 28 © 2024 Japan Digital Design, Inc. 宣伝させてください！ https://jawspankration2024.jaws-ug.jp/ja/ あのCrazyな24時間イベントが帰ってくる！

    今回のテーマは「No Border」

29. 29 © 2024 Japan Digital Design, Inc. 皆様の参加お待ちしています！

30. Thank you. 30 © 2024 Japan Digital Design, Inc.