Slide 1

Slide 1 text

1 © 2024 Japan Digital Design, Inc. Takuya Yonezawa 2024.07.06 AWS CDK Conference Japan 2024 TS何も分からんマンが作った JAWSDAYS2024ティザーサイト徹底解剖

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

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

Slide 4

Slide 4 text

4 © 2024 Japan Digital Design, Inc. はじめに 🙋 JAWS DAYS 2024に ご参加いただいた方? 🙋

Slide 5

Slide 5 text

5 © 2024 Japan Digital Design, Inc. 結構頑張ったぞJAWS DAYSサイト構築 1113 Commit 134 Deploy 本日は 本業より工数がかかったといっても過言ではない DAYSのサイト構築についてお話します

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

7 © 2024 Japan Digital Design, Inc. latest コミット1発目(2023/11/14) 初期はこんな感じでした 実行委員長からの 様々な無茶振り😢

Slide 8

Slide 8 text

8 © 2024 Japan Digital Design, Inc. 従来のJAWSサイトを踏襲しつつ いくつか新規機能を追加 • PC/SPレスポンシブ対応 • セッションお気に入り機能 • あまり使っていない 管理者機能 サイトの使い心地についてXでエゴサ 改善など取り込めるものは即対応 💪 これが令和のJAWSDAYSや! サイト構成 PC/SPレスポンシブ対応 セッションお気に入り機能

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

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

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

18 © 2024 Japan Digital Design, Inc. npm update? npm-check-updates (ncu)? npm outdated? 漢のlatest運用? ところでnpmライブラリのアップデート どう対応されてますか? (特に aws-cdk)

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

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

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

25 © 2024 Japan Digital Design, Inc. 企業スポンサー申し込み期間のリクエスト数 ちなみに。。 お手本のようなバーストトラフィック! とはいえLambda以外に コンピューティングリソースが存在しないので何もせず傍観 Diamond 募集オープン Platinum 募集オープン Gold/Lunch 募集オープン Silver 募集オープン

Slide 26

Slide 26 text

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

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班

Slide 28

Slide 28 text

28 © 2024 Japan Digital Design, Inc. 宣伝させてください! https://jawspankration2024.jaws-ug.jp/ja/ あのCrazyな24時間イベントが帰ってくる! 今回のテーマは「No Border」

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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