Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20240706_CDKConf

 20240706_CDKConf

Takuya Yonezawa

July 05, 2024
Tweet

More Decks by Takuya Yonezawa

Other Decks in Programming

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. 8 © 2024 Japan Digital Design, Inc. 従来のJAWSサイトを踏襲しつつ いくつか新規機能を追加 •

    PC/SPレスポンシブ対応 • セッションお気に入り機能 • あまり使っていない 管理者機能 サイトの使い心地についてXでエゴサ 改善など取り込めるものは即対応 💪 これが令和のJAWSDAYSや! サイト構成 PC/SPレスポンシブ対応 セッションお気に入り機能
  7. 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
  8. 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 (イベント写真)
  9. 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)
  10. 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の キャッシュクリア
  11. 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への組み込みが簡単
  12. 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への組み込みが簡単 これだけ!
  13. 16 © 2024 Japan Digital Design, Inc. デプロイ作業を楽にしたい! (インフラ部分) •

    自動化しませんでした • デプロイ頻度が高くない + 変更が入ってもLambdaくらい • Actionsと紐づけるCDKデプロイ用 IAM Roleの権限精査が面倒だった • そもそもCodePipelineやCDK Pipelines使った方が楽なのでは? と考えるのが面倒だった CI/CD –インフラ- CDK deployの進捗をニヤニヤしながら眺めるのも悪くはない (と思っている)
  14. 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
  15. 18 © 2024 Japan Digital Design, Inc. npm update? npm-check-updates

    (ncu)? npm outdated? 漢のlatest運用? ところでnpmライブラリのアップデート どう対応されてますか? (特に aws-cdk)
  16. 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出しといたで!
  17. 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絡みでハマった。。
  18. 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の度にコケた😢
  19. 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
  20. 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…
  21. 25 © 2024 Japan Digital Design, Inc. 企業スポンサー申し込み期間のリクエスト数 ちなみに。。 お手本のようなバーストトラフィック!

    とはいえLambda以外に コンピューティングリソースが存在しないので何もせず傍観 Diamond 募集オープン Platinum 募集オープン Gold/Lunch 募集オープン Silver 募集オープン
  22. 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班