20241004_jpk2024_retrospective

Slide 1

Slide 1 text

Slide 2

Slide 2 text

2 © 2024 Japan Digital Design, Inc. 米澤拓也 Software Engineer Technology & Development Div. 前職ではCCoE、現職ではSoftware Engineer フロント/バックエンドの実装からインフラ構築など何でもやってます JAWS DAYS2024 / PANKRATION2024 の運営（WEB担当） Fin-JAWSの運営もやってます最近はJAWSイベントのWEBサイト構築屋（Next is …）好きなAWSサービスは CloudFront、Lambda プロフィール @CDK Conference 2024

Slide 3

Slide 3 text

Slide 4

Slide 4 text

4 © 2024 Japan Digital Design, Inc. JAWS DAYS 2024 • 5年ぶりのオフライン開催＠池袋 • スポンサー募集瞬殺劇など、様々なドラマが繰り広げられた • 従来無かったレスポンシブ対応や、お気に入り機能などを新規追加 • ＼極力コストを抑えろ／ JAWS DAYS 2024 CloudFront API Gateway S3 DynamoDB Lambda CDK 主要な登場人物画面イメージ実データはDynamoDB（News用/FollowUp用）に格納実データはDynamoDB（News用/FollowUp用）に格納 https://jawsdays2024.jaws-ug.jp/ https://jawsdays2024.jaws-ug.jp/

Slide 5

Slide 5 text

5 © 2024 Japan Digital Design, Inc. 基本に忠実なサーバレス構成 JAWS DAYS 2024 アーキ概略 AWS Cloud (Dev/Prod) CloudFront API Gateway S3 （WEB） Lambda （データ取得） CDK X-Ray DynamoDB （動的コンテンツ）その他 AWSリソース超ざっくり図 GitHub Actions ① 静的コンテンツのデプロイ ② CloudFrontのキャッシュクリア • Next.jsでSSGした静的コンテンツを S3+CloudFront経由で配信 • 動的に出したいコンテンツは API-GW+Lambda+DynamoDBで API化して都度取得（News/FollowUpなど） • リリース作業はすべて GitHubActionsで自動化

Slide 6

Slide 6 text

Slide 7

Slide 7 text

7 © 2024 Japan Digital Design, Inc. (2023/11 ~ 2024/03) 1113 commit コミット数本番リリース回数 134 deploy (2023/11 ~ 2024/03) 月額トータルコスト 1.1 USD (2024/07,環境2面＋もろもろ) JAWS DAYS 2024 〜数値的なお話〜 ※ 人件費はもちろん 0 USD 今の状態を少しご紹介

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

10 © 2024 Japan Digital Design, Inc. JAWS DAYS 2024 〜まとめ〜良かった点イマイチだった点超激安運用：CloudFrontの無料枠でWEBホスティングが完結スケーリングがほぼ考慮不要：CloudFront、S3、API-GW、Lambda 強し文鎮化が楽：CloudFrontのキャッシュいじるだけアプリケーション以外の作り物が多い：インフラのCDKコード、GitHub Actionsのワークフロー etc... 構成AWS要素が多い：Building Block的ではあるかも知れないが。。。【CloudFrontコストの参考記事】Amazon CloudFrontの利用料が急増した場合のチェックポイント

Slide 11

Slide 11 text

Slide 12

Slide 12 text

12 © 2024 Japan Digital Design, Inc. JAWS PANKRATION 2024 • 24時間ぶっ続けオンライン。あの狂気のイベントが帰ってきた！ • 登壇者/参加者は全世界 • DAYS2024のサイトをベースに、下記の追加機能を実装 - 国際化対応 (日本語/英語) - microCMSを用いた記事投稿機能 - NEWSのSNSシェア機能 - Bedrockによるセッションサマリ JAWS PANKRATION 2024 主要な登場人物画面イメージ https://jawspankration2024.jaws-ug.jp/en/ https://jawspankration2024.jaws-ug.jp/en/ https://jawspankration2024.jaws-ug.jp/jp/ https://jawspankration2024.jaws-ug.jp/jp/ App Runner ECR CDK 言語切り替えボタン AWS WAF

Slide 13

Slide 13 text

13 © 2024 Japan Digital Design, Inc. App Runnerはサーバレスです！ JAWS PANKRATION 2024 アーキ概略ホントにこれだけ • i18n/microCMS対応のために AWS App Runnerを採用 → 常時稼働のコンピュートリソースで WEBホスティングが必要になったという背景 • standaloneモードでビルドした SSR方式のNext.jsを利用 • GitHub ActionsではコンテナイメージをビルドしてECRにPush • お気持ち程度のCDK AWS Cloud (Prod) CDK App Runner ECR Secrets Manager 自動デプロイ GitHub Actions ビルドしたコンテナイメージをPush AWS WAF DoS/EDoS対策のために設置コスト削減のためにライフサイクルポリシーも適用

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

19 © 2024 Japan Digital Design, Inc. JAWS PANKRATION 2024 〜まとめ〜良かった点イマイチだった点 AWS環境のスリム化：LambdaやAPI-GW、DynamoDBが不要に CI/CDのスリム化：App Runnerの自動デプロイ機能に乗っかることで、 GitHub ActionsではコンテナイメージのBuild・Pushだけに DAYSと比べて高額： DoS対策の為にWAFも導入するとまあまあ高額（そもそもApp Runner自体も良いお値段。。） microCMSの採用：News投稿/編集はすべてMicroCMS操作で完結するため、データインサート作業やビルド作業が不要に（SPOF解消）文鎮化対応が面倒：近日苦労し始める予定（App Runner剥がし）

Slide 20

Slide 20 text

Slide 21

Slide 21 text

21 © 2024 Japan Digital Design, Inc. JAWS PANKRATION 2024 〜まとめ〜良かった点イマイチだった点 AWS環境のスリム化：LambdaやAPI-GW、DynamoDBが不要に CI/CDのスリム化：App Runnerの自動デプロイ機能に乗っかることで、 GitHub ActionsではコンテナイメージのBuild・Pushだけに DAYSと比べて高額： DoS対策の為にWAFも導入するとまあまあ高額（そもそもApp Runner自体も良いお値段。。） microCMSの採用：News投稿/編集はすべてMicroCMS操作で完結するため、データインサート作業やビルド作業が不要に（SPOF解消）文鎮化対応が面倒：近日苦労し始める予定（App Runner剥がし）

Slide 22

Slide 22 text

22 © 2024 Japan Digital Design, Inc. Serverless Days Tokyo 2024にて https://speakerdeck.com/tmokmss/aws-lambda-web-adapterwohuo-yong-suruxin-siisabaresunoshi-zhuang-patan https://speakerdeck.com/tmokmss/aws-lambda-web-adapterwohuo-yong-suruxin-siisabaresunoshi-zhuang-patan LambdaでWEBフレームワークを動かすためのOSS（略称：LWA）

Slide 23

Slide 23 text

Slide 24

Slide 24 text

24 © 2024 Japan Digital Design, Inc. 1時間程度でLambda移行完了文鎮化バージョン • CloudFrontの新規作成 • CloudFront⇔Lambda URL間はOAC認証でガード（関数URL直叩きアクセス対策） • App RunnerにアタッチしていたWAF はCloudFrontに付け替え • 今回はGET系のみなので、 L@Eによる署名処理は不要 [1] AWS Cloud (Prod) ECR Secrets Manager GitHub Actions AWS WAF Lambda CloudFront GET OAC [1] https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-lambda.html [1] https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-lambda.html

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

27 © 2024 Japan Digital Design, Inc. 原因はLambdaの同時実行数 LWAでハマったポイント LambdaのService Quota • 同時実行数の上限が Service Quota上で10になっていた（前まで1000だった気が。。） • 画面レンダリングのために CloudFront→Lambdaで同時に複数リクエストが走るので上限抵触した模様（前Page参照） • とりあえず1000にUp クオータ抵触 Quota抵触 10！！

Slide 28

Slide 28 text

28 © 2024 Japan Digital Design, Inc. そもそもキャッシュ効いてない LWAでハマったポイント • 愚直にCloudFront設定すると、 Function URLをオリジンとする場合の推奨キャッシュポリシーは「Caching Disabled」 • webp, woff2, js, cssあたりの静的コンテンツはキャッシュに乗せても問題ないのでカスタムキャッシュポリシー適応キャッシュ適応しないよキャッシュ対応版

Slide 29

Slide 29 text

29 © 2024 Japan Digital Design, Inc. LWAまとめ 10/1あたりにLWA対応を加えたので具体的なコスト削減率値は出せていませんが、もろもろ含めて 15 USD →3 USD くらいには着地しそうコールドスタートを踏むと明らかにApp Runnerよりレスポンスは遅いですが、踏まなければパフォーマンスは遜色ないですし、今後アクセス数も減るはずなので、 Lambda Web Adapterはめちゃくちゃ良い選択肢でした