20241004_jpk2024_retrospective

Transcript

1. 1 © 2024 Japan Digital Design, Inc. Takuya Yonezawa 2024.10.04 JAWS PANKRATION 2024 WEB - re:Trospective -
2. 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
3. 3 © 2024 Japan Digital Design, Inc. はじめに これまでのウェブサイト
4. 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/
5. 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で自動化
6. 6 © 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
7. 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 今の状態を少しご紹介
8. 8 © 2024 Japan Digital Design, Inc. JAWS DAYS 2024 〜あのWEBサイトは今〜 CloudFrontへのリクエスト数 CloudFrontへの Upload/Download（MB） 平均 6000 requests/day 平均 200MB download/day 平均 0MB upload/day
9. 9 © 2024 Japan Digital Design, Inc. JAWS DAYS 2024 〜数値的なお話〜 もうWEBサイトの更新予定が一切ないため、 キャッシュポリシーで TTL : 3153600000秒 = 100年 を設定して文鎮化 ※ 本当にキャッシュが100年保持されるかは寿命の関係上検証できないので分かりません← CloudFrontのキャッシュポリシー
10. 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の利用料が急増した場合のチェックポイント
11. 11 © 2024 Japan Digital Design, Inc. はじめに ジョーズ・パンクラチオン
12. 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
13. 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対策の ために設置 コスト削減のために ライフサイクルポリシーも適用
14. 14 © 2024 Japan Digital Design, Inc. WEBサイト上の表示 microCMS上の元ネタ microCMSを使ったNEWS機能 ここのHTMLパーサーを作るのが とっっても辛かったです いい感じの 変換処理
15. 15 © 2024 Japan Digital Design, Inc. (2024/05 ~ 2024/08) 246 commit コミット数 本番リリース回数 約80 deploy (2024/05 ~ 2024/08) 月額トータルコスト 14 USD (2024/08,環境1面＋もろもろ) JAWS PANKRATION 2024 〜数値的なお話〜 たぶん
16. 16 © 2024 Japan Digital Design, Inc. JAWS PANKRATION 2024 〜データで振り返る〜 App Runnerへのリクエスト数 App Runnerコンテナインスタンス数（min:1, max:25） イベント当日（8/23~24）に急増
17. 17 © 2024 Japan Digital Design, Inc. JAWS PANKRATION 2024 〜データで振り返る〜 WAFでブロックされていたリクエストの内訳 下記の2ルールでの運用結果 ① AWSManagedRulesAmazonIpReputationList ② AWSManagedRulesCommonRuleSet
18. 18 © 2024 Japan Digital Design, Inc. JAWS PANKRATION 2024 〜データで振り返る 〜 ＼ 結局ほぼAttackは来なかった ／ （..と 同時に治安の良さに感動しました）
19. 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剥がし）
20. 20 © 2024 Japan Digital Design, Inc. はじめに ここまではJAWS山梨の内容
21. 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剥がし）
22. 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）
23. 23 © 2024 Japan Digital Design, Inc. LWA使ってみた Dockerfile に魔法のコマンドを1行追加
24. 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
25. 25 © 2024 Japan Digital Design, Inc. はじめに アプリケーションエラー発生
26. 26 © 2024 Japan Digital Design, Inc. LWAでハマったポイント ＼ CloudFront⇔Lambdaにした途端429エラーが連発 ／ [429] Too Many Requests
27. 27 © 2024 Japan Digital Design, Inc. 原因はLambdaの同時実行数 LWAでハマったポイント LambdaのService Quota • 同時実行数の上限が Service Quota上で10になっていた （前まで1000だった気が。。） • 画面レンダリングのために CloudFront→Lambdaで 同時に複数リクエストが走るので 上限抵触した模様（前Page参照） • とりあえず1000にUp クオータ抵触 Quota抵触 10！！
28. 28 © 2024 Japan Digital Design, Inc. そもそもキャッシュ効いてない LWAでハマったポイント • 愚直にCloudFront設定すると、 Function URLをオリジンとする 場合の推奨キャッシュポリシーは 「Caching Disabled」 • webp, woff2, js, cssあたりの 静的コンテンツはキャッシュに 乗せても問題ないので カスタムキャッシュポリシー適応 キャッシュ適応しないよ キャッシュ対応版
29. 29 © 2024 Japan Digital Design, Inc. LWAまとめ 10/1あたりにLWA対応を加えたので 具体的なコスト削減率値は出せていませんが、 もろもろ含めて 15 USD →3 USD くらいには着地しそう コールドスタートを踏むと明らかにApp Runnerよりレスポンスは遅いですが、 踏まなければパフォーマンスは遜色ないですし、今後アクセス数も減るはずなので、 Lambda Web Adapterはめちゃくちゃ良い選択肢でした
30. 30 © 2024 Japan Digital Design, Inc. はじめに 終劇
31. 31 © 2024 Japan Digital Design, Inc. Next… ↑のような技術スタックで JAWSのWEB開発したい方 WANTED！！
32. Thank you. 32 © 2024 Japan Digital Design, Inc.