20240706_CDKConf - Speaker Deck

20240706_CDKConf

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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 （イベント写真）

Slide 11

Slide 11 text

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)

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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のキャッシュクリア

Slide 14

Slide 14 text

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への組み込みが簡単

Slide 15

Slide 15 text

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への組み込みが簡単これだけ！

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Slide 19

Slide 19 text

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出しといたで！

Slide 20

Slide 20 text

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絡みでハマった。。

Slide 21

Slide 21 text

Slide 22

Slide 22 text

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の度にコケた😢

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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…

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

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班