© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Serverless Meetup Tokyo #19 - AWS re:Invent 2023 re:Cap - Daisuke Awaji Amazon Web Services Solutions Architect クラウドを駆使した開発 〜AWS Lambda, Dev Tools, AppSync の⾰新的な最新アップデート〜

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Daisuke Awaji Amazon Web Services Japan Solutions Architect 3 @gee0awa

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Agenda 4 • AWS Lambda • AWS Application Composer • AWS Amplify • AWS AppSync • Amazon CloudFront KeyValueStore • Amazon ElastiCache Serverless AWS Lambda AWS Application Composer AWS Amplify AWS AppSync Amazon CloudFront Amazon ElastiCache

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Lambda

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Lambda Updates 6 • 12x faster when handling high volume requests • Lambda Polling scale rate SQS event source • View and Export Application Composer • Search/Filter/Aggregate function logs • Single pane view of metrics, logs and traces • Troubleshoot errors and timeouts of Init and Restore phase • Support Node.js 20, Java 21, Amazon Linux 2023

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Lambda Updates 7 • 12x faster when handling high volume requests • Lambda Polling scale rate SQS event source • View and Export Application Composer • Search/Filter/Aggregate function logs • Single pane view of metrics, logs and traces • Troubleshoot errors and timeouts of Init and Restore phase • Support Node.js 20, Java 21, Amazon Linux 2023

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Lambda が 最⼤ 12 倍⾼速にスケールアウト • 10 秒ごとに 1,000 の同時実⾏数でスケーリング § この更新以前は 毎分 500 の同時実⾏数でスケーリング（10秒あたり約 83 ） § トラフィックの変動が激しい場合でも素早くスケールが可能 – ニュース速報サイト、オンラインストアのセールなど • 全ての関数でデフォルトで有効 § 11⽉26⽇ ~ 12⽉中旬にかけて徐々に展開 § 中国、GovCloud リージョンを除く 8 https://aws.amazon.com/jp/blogs/aws/aws-lambda-functions-now-scale-12-times-faster-when-handling-high-volume-requests/

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Lambda で関数のテンプレートの表⽰と AWS Application Composer へのエクスポートが利⽤可能に • 関数の AWS SAM テンプレートをコンソールで 設定しながら、表⽰、ダウンロード可能に • ボタンをクリックするだけで、 関数を Application Composer にエクスポート • App Composer が使⽤可能な 全てのリージョンで利⽤可能 § 東京、⼤阪リージョンも利⽤可能です 9 https://aws.amazon.com/jp/about-aws/whats-new/2023/11/aws-lambda-view-export-functions-template-aws-application-composer/

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Application Composer

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Application Composer を IDE の拡張機能として提供 • AWS サービスをドラッグ＆ドロップして SAM テンプレートを⽣成 • 現在は VS Code の拡張機能 AWS Toolkit として提供される • 14の拡張コンポーネントに加え、 1000を超える標準 CloudFormation リソースをサポート（2023/09 update） • 同期（Sync）ボタンをワンクリックで CloudFormation スタックとしてデプロイ • Step Functions Workflow Studio との 統合も可能 16 https://aws.amazon.com/jp/blogs/aws/ide-extension-for-aws-application-composer-enhances-visual-modern-applications-development-with-ai-generated-iac/ プ レ ビ ュ ー

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Demo – Application Composer

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. 18 Demo – Application Composer + Step Functions Workflow Studio

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. 22

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Gen2 - 次世代フルスタック開発体験 - • TypeScript コードでバックエンドを定義する Code-first な次世代 Amplify § CDK L3 Construct でインフラを定義、フロントエンド にデータスキーマや各バックエンドを Export して型安 全な開発ができます § ファイルベースの規約を採⽤ • CLI操作がなくなり、フロント・バックエンドの 両環境が接続したGitリポジトリのブランチ毎に デプロイされます。開発者にとってのブラック ボックスが⼤幅に減少しました 23 プ レ ビ ュ ー

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. 型安全な開発者体験 24 https://docs.amplify.aws/gen2 TypeScript-first developer experience Frontend (React) Backend (スキーマの定義)

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Sandbox – 開発者ごとのサンドボックス環境 - 27 プ レ ビ ュ ー • ローカルのバックエンドコードを AWS 上にデプロイして、localhost から接続で きる機能 § amplify sandbox コマンドを実⾏する と ローカル接続⽤の AWSリソースをデ プロイし、コードの変更を監視して 開発中のコード変更を⾃動で反映 § フロントエンドの localhost からゼロ コンフィグで sandbox 環境に接続 (要 Amplify Libraries) • Amplify の本番環境設定前から、 ローカル開発で全機能をテスト可能にな ります

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. 29 ⼀ 般 利 ⽤ 開 始 Amplify Hosting 任意の SSR アプリのホスティングが可能に • Amplify Hosting が Next.js だけでなく、 任意の JavaScript SSR (Server Side Rendering) フレームワークをサポートしました § Amplify Hosting デプロイ仕様に従って .amplify-hosting ディレクトリ以下に デプロイバンドルを配置して利⽤する § フレームワーク開発者はデプロイ仕様に沿った バンドル配置を⾏うアダプタを開発して Amplify Hosting との容易な連携を提供できる § GA 時点では Nuxt 向けアダプタが公開済み

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. SSR 以外のレンダリングパターンはこちらもご覧ください 30 https://speakerdeck.com/gawa/modern-frontend-design-pattern https://youtu.be/pqyyGdtok4Q?si=O3HFcjmpAGVdAAUs

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. 31 ⼀ 般 利 ⽤ 開 始 Amplify Hosting ワイルドカードサブドメインが利⽤可能に • カスタムドメインを利⽤する際に、 ワイルドカードサブドメインの設定が 可能になりました • Amplify Hosting 上のアプリにて動的な サブドメインを取り扱うことができます • ユーザごとに固有のサブドメインを提供 するSaaS 等のアプリをホスティングする 場合に有⽤です

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify JavaScript Libraries v6 の⼀般提供開始 • Amplify community からのリクエストに応え、 以下の項⽬をアップデート § バンドルサイズが縮⼩ ︓⾼速な読み込みを可能に § TypeScript のサポート強化︓コーディング体験の向上 § Next.js App Router, Server Actions のサポート 32 ⼀ 般 利 ⽤ 開 始 詳細は Amplify Doc を確認︕ (Doc もリニューアル︕)

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Gen2 workshop Retail Store アプリケーションを Next.js で実装して Amplify でデプロイ 33 https://catalog.us-east-1.prod.workshops.aws/workshops/386fd39b-01a5-44e9-9836-264c10039160/ja-JP • Amplify Gen2 Data • Auth Library • Amplify Hosting • Amplify UI Library

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS AppSync

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. 2023 年の主要 Updates Merged APIs 35 ・GraphQL Federation の実現 ・複数の GraphQL API を単⼀の Schema, 単⼀の Endpoint で集約可能に JS Support ・Resolver 開発において従来の VTL に加え JavaScript/TypeScript をサポート ・Unit Resolver, Pipeline Resolvers 共に サポートし VTL との混在も可能 ・PrivateLink/Interface をサポート ・Public, Private の何れかを選択して GraphQL Endpoint の作成が可能に Private API Event-driven アーキテクチャ ・Data source として EventBridge をサポート ・GraphQL アクションをトリガーとして Event Bus への連携を容易に利⽤可能 Enhanced filtering 強化 ・Enhanced filtering の Rule 指定で Nested filter をサポート ・より柔軟な Subscription 条件指定が可能に ・AWS::Serverless::GraphQLApi リソース タイプが追加され SAM での Deploy 管理が 可能に ・SAM CLI もサポート AWS SAM サポート

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Aurora の Data API 対応を強化 36 Data API Introspection GraphQL リソースの⾃動⽣成 AWS AppSync Amazon Aurora • Data API が有効に設定された Aurora に対して Introspection を実⾏し GraphQL リソースの⾃動⽣成が可能に（Schema, DB 処理を含む Resolver を⾃動⽣成） • @aws-appsync/utils/rds を使⽤して、JS Resolver で静的 SQL ステートメントが記述可能 となり SQL処理を容易に記述可能とする Library も追加 /graphql Front-end Apps ⼀ 般 利 ⽤ 開 始 Aurora Serverless V2 (PostgreSQL) でも Data API が利⽤可能になりました

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. 37 https://qiita.com/inada_riku/items/5f058e34bf8c0737f588

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon CloudFront KeyValueStore

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. CloudFront KeyValueStore • 低レイテンシーなキーバリューストアをエッジロケーションで提供 § API/コンソール経由は Read/Write、CloudFront Functions は Read に対応。 CloudFront Functions からは低レイテンシで読み取りができ、数百万 RPS の オーダーに耐える。データストアあたり 5MB の容量 § 全エッジロケーションで利⽤可能 39 ※KVに基づくオリジン切り替えは現時点でリダイレクトが必要 ⼀ 般 利 ⽤ 開 始 import cf from 'cloudfront’; const kvsId = 'XXX’; const kvsHandle = cf.kvs(kvsId); const value = await kvsHandle.get(key); CloudFront Functions ランタイム 2.0の ヘルパーメソッドを使⽤

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon ElastiCache Serverless

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. • インフラの構築や設定なしに可⽤性の⾼いキャッシュを作成できる § パフォーマンス劣化やダウンタイムなしに、⽔平・垂直に即座にスケール § 複数AZに⾃動的にレプリケーションを⾏い、 全てのワークロードで99.99%の可⽤性を提供 § データ量とコンピュートリソース使⽤量に基づいた料⾦体系 • Memcached と Redisの双⽅に対応 41 ⼀ 般 利 ⽤ 開 始 Amazon ElastiCache Serverlessを発表

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon ElastiCache Serverless 料⾦例 42 ⼀ 般 利 ⽤ 開 始 ※価格は12/4のN.Virginiaのものから算出しています 例）ほとんど利⽤されないワークロード データセット︓1.0~1.5GB リクエスト ︓100 rps で 500 byte の GET / PUT データセット︓0.01GB リクエスト ︓1 rps で 500 byte の GET / PUT データストレージ 時間あたりの平均データストレージ使⽤量 = ((2 GB * 16 h) + (1 GB * 8 h))/24 h = 1.6 GB/h 時間当たりのデータ ストレージ料⾦ = 1.6 GB/h * 0.125 $ / GB h= 0.2 $/h ECPU SET/GETは500バイトなので各リクエスト1 ECPUを利⽤するとする 時間当たりの平均 ECPU 使⽤量 = (100 ECPU/s * 3,600 s * 16h) / 24 h = 0.24M ECPU ECPU 時間当たりの平均料⾦ = 0.24M ECPU * 0.0034 $ / 1M ECPU = 0.0008 $/h データストレージ 0.2 $/h + ECPU 0.0008 $/h 月額 約150$ ※ １⽇で平均化して算出しています t ストレージ利用料が 1GB 単位で切り上げられる点にご注意ください 8h

© 2024, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon ElastiCache Serverless 料⾦例 43 ⼀ 般 利 ⽤ 開 始 ※価格は12/4のN.Virginiaのものから算出しています 例）常時⾼いリクエストがあり、さらに１⽇２時間ピークがあるワークロード データセット︓100GB リクエスト ︓100万 rps で 500 byte の GET / PUT データセット︓10GB リクエスト ︓10万 rps で 500 byte の GET / PUT x10 データストレージ 時間あたりの平均データストレージ使⽤量 = ((10 GB * 22 h) + (100 GB * 2 h))/24 h = 17.5 GB/h 時間当たりのデータ ストレージ料⾦ = 17.5 GB/h * 0.125 $ / GB h= 2.19 $/h ECPU SET/GETは500バイトなので各リクエスト1 ECPUを利⽤するとする 時間当たりの平均 ECPU 使⽤量 = (100,000 ECPU/s * 3,600 s * 22 h + 1,000,000 ECPU/s * 3,600 s * 2 h) / 24 h = 630 M ECPU ECPU 時間当たりの平均料⾦ = 630 M ECPU * 0.0034 $ / 1M ECPU = 2.14 $/h データストレージ 2.19 $/h + ECPU 2.14 $/h 月額 約3100$ ※ １⽇で平均化して算出しています t

© 2024, Amazon Web Services, Inc. or its affiliates. Thank you! © 2024, Amazon Web Services, Inc. or its affiliates.