AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify, AWS AppSync の アップデートをご紹介 都築 了太郎 Solutions Architect Amazon Web Services Japan G.K. A M P L I F Y B O O S T U P # 0 3 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 自己紹介 都築 了太郎 / Ryotaro Tsuzuki Solutions Architect • 主に金融系のお客様の技術支援を担当 • 好きな AWS サービス: AWS Amplify, AWS AppSync, AWS CDK • Twitter: @_unirt 2 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 目次 • Amplify の主要アップデート（2023年 前半） • Amplify Hosting がモノレポフレームワークをサポート • Amplify JavaScript Library がパフォーマンスを改善 • Swift / Android 向け Authenticator UI コンポーネントを発表 • Amplify Library for Swift が macOS, watchOS および tvOS を正式サポート • Amplify Flutter がウェブおよびデスクトップを正式サポート • AppSync の主要アップデート（2023年 前半） • AppSync Merged API を発表 • プライベート API をサポート • Amazon EventBridge への Event 発行をサポート 3 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 目次 • Amplify の主要アップデート（2023年 前半） • Amplify Hosting がモノレポフレームワークをサポート • Amplify JavaScript Library がパフォーマンスを改善 • Swift / Android 向け Authenticator UI コンポーネントを発表 • Amplify Library for Swift が macOS, watchOS および tvOS を正式サポート • Amplify Flutter がウェブおよびデスクトップを正式サポート • AppSync の主要アップデート（2023年 前半） • AppSync Merged API を発表 • プライベート API をサポート • Amazon EventBridge への Event 発行をサポート 4 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify 5 Amplify CLI Web やモバイルアプリケーションを一般的なユースケースベースのガイド付きワークフローで バックエンドを簡単に作成、管理するツール Amplify Libraries Web やモバイルアプリケーションと AWS を統合するためのユースケース中心のライブラリ Amplify Hosting 継続的デプロイメントを管理し、モダンな Web アプリケーションをビルド、テスト、デプロイ、 そしてホスティングするための AWS サービス Amplify Studio AWS 上に最小限のコーディングでフロントからバックまでのアプリケーションを作成できる ビジュアルな開発環境 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Hosting がモノレポフレームワークをサポート • 以下のモノレポフレームワークをサポート • npm workspace • pnpm workspace (*) • Yarn workspace • Nx • Turborepo (*) • フレームワークに応じた amplify.yml を自動生成 6 モノレポ内のアプリのフルマネージド CI/CD とホスティングを提供 (*) 追加の設定が必要 https://aws.amazon.com/jp/about-aws/whats-new/2023/06/aws- amplify-hosting-monorepo-frameworks/ 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Nx での例 1. Nx を利用してモノレポを構成 2. Nx のプラグインを活用して例えば Next.js アプリや共有ライブラリのディ レクトリを作成 • e.g. `nx generate @nx/next:application bankA-app` 3. Amplify Hosting の設定にてアプリの ルートパスを指定 7 https://aws.amazon.com/jp/blogs/mobile/share-code- between-next-js-apps-with-nx-on-aws-amplify-hosting/ 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify JavaScript Library がパフォーマンスを改善 • バンドルサイズの削減とツリーシェイキ ングの最適化により、ユーザに高速でパ フォーマンスの高いエクスペリエンスを 提供 • バンドルサイズ (Amplify JS v5.3.4) • Auth: 26% 削減 • Analytics & Notifications: 59% 削減 • Storage: 55% 削減 8 Auth など重要なカテゴリのバンドルサイズを大幅に削減 https://aws.amazon.com/jp/blogs/news/aws-amplify-javascript- library-announces-leaner-bundles-and-faster-load-times/ 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. さらなる改善 • 次期メジャーバージョン (v6) に向けてさらなる改善を進める予定 です • バンドルサイズとアプリのロード時間をさらに短縮 • IDE の自動補完やインテリセンスの改善をはじめとして、 TypeScript での 開発体験を向上 RFC: Amplify JS TypeScript Improvements #11113 • SolidJS, Astro, NuxtJS などのフレームワーク・ツールの追加サポート サーバーサイドレンダリングのサポートを拡張 9 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Swift / Android 向け Authenticator UI コンポーネントを発表 • Authenticator UI コンポーネントを使用 して、エンドツーエンドのサインイン・ サインアップのワークフローを数分で構 築 • カスタムテーマも適用可能 11 認証画面の作成が容易に カスタムテーマの適用例 https://aws.amazon.com/jp/blogs/mobile/new-amplify- swiftui-based-authenticator-component/ 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Library for Swift が macOS, watchOS および tvOS を正式サポート • 単一のコードベースで iOS, macOS, watchOS および tvOS 向けアプリ を開発 • v2.12.0 以上をご利用ください 12 iOS に加え macOS, watchOS, tvOS のサポートも一般提供を開始 Todo アプリの例 https://aws.amazon.com/jp/about-aws/whats- new/2023/06/watchos-tvos-aws-amplify-library-swift/ 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Flutter がウェブおよびデスクトップを正式サポート • 単一のコードベースで iOS, Android, Web, Linux, macOS, Windows 向けア プリを開発 • カテゴリ / プラットフォームの対応状 況は GitHub の README.md から確認 可能 • v0 はメンテナンスモードに v1 へのアップグレード手順はドキュ メントをご参照ください 13 バージョン 1.0.0 のリリースを発表 https://aws.amazon.com/jp/about-aws/whats-new/2023/04/aws-amplify-flutter-web-desktop-support/ 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 目次 • Amplify の主要アップデート（2023年 前半） • Amplify Hosting がモノレポフレームワークをサポート • Amplify JavaScript Library がパフォーマンスを改善 • Swift / Android 向け Authenticator UI コンポーネントを発表 • Amplify Library for Swift が macOS, watchOS および tvOS を正式サポート • Amplify Flutter がウェブおよびデスクトップを正式サポート • AppSync の主要アップデート（2023年 前半） • AppSync Merged API を発表 • プライベート API をサポート • Amazon EventBridge への Event 発行をサポート 14 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS AppSync サーバーレス GraphQL および Pub/Sub API 15 Data Sources (Data) AWS AppSync GraphQL Schema (Data Model) Resolvers (Business Logic) 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AppSync Merged API を発表 • Merged APIs は、単一の GraphQL Schema を構成し、単一の Endpoint で Back-end API からクライアントにデータを安全に公 開することにより様々なチームが所有およ び管理する AppSync GraphQL API グルー プを結合 • 各チームが独立して開発/運用しながら チーム間のコラボレーションを実現 16 チーム間のコラボレーションを実現 https://aws.amazon.com/jp/blogs/news/introducing-merged-apis- on-aws-appsync/ 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AppSync Merged APIs (例) 2つの個別 AppSync GraphQL API 17 GraphQL Schema Resolvers AWS account – Team B type Order { id: ID! total: Float inStock: Boolean date: AWSDate items: [Product] } type Query { getOrder (id: ID!): Order } type Product { id: ID! name: String description: String price: Float } type Query { getProduct (id: ID!): Product } Amazon DynamoDB Amazon Aurora Serverless Schema A Schema B AWS account – Team A AWS AppSync GraphQL Schema Resolvers AWS AppSync 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AppSync Merged APIs (例) Merged APIs で統合された AppSync GraphQL API 18 AWS account – Merged API IAM Permissions type Order { id: ID! total: Float inStock: Boolean date: AWSDate items: [Product] } type Product { id: ID! name: String description: String price: Float } type Query { getOrder (id: ID!): Order getProduct (id: ID!): Product } AWS account – Team A AWS AppSync Merged GraphQL Schema Resolvers (Team A) Amazon DynamoDB Amazon Aurora Serverless Merged Schema Read-only Read-only Resolvers (Team B) Read-only AWS account – Team B IAM Permissions 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. プライベート API をサポート プライベートネットワーク内のクライアントのみにアクセスを制限 19 Instance Interface endpoint VPC Private subnet AWS PrivateLink Route 53 private hosted zone AWS Region AWS AppSync https://aws.amazon.com/jp/blogs/news/introducing-private-apis-on-aws-appsync/ 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon EventBridge への Event 発行をサポート 20 EventBridge をデータソースとして指定可能に Event-driven 疎結合システムへの 接続 Real-time 接続済の数百万もの クライアントにデータ配信 あらゆるシステムを イベント駆動型 且つ Real-time に AppSync にて EventBridge を Data source 指定し Resolver で繋ぐ事で、GraphQL アクションを トリガーとしてイベント バスへのサブスクライバーを柔軟に連携可能 https://aws.amazon.com/jp/about-aws/whats-new/2023/04/aws-appsync-publishing-events-amazon-eventbridge/ 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. お知らせ: AppSync の Black Belt が近日リニューアル予定 21 

AMPLIFY BOOST UP #03 – AWS AMPLIFY, AWS APPSYNC のアップデートをご紹介 © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Thank you!