[レポート] フロントエンドウェブ開発者向けおよびモバイル開発者向け AWS Amplify 新機能紹介 #FWM308 #reinvent

2022.12.07

アノテーション テクニカルサポートの川崎です。

本記事は AWS re:Invent 2022 のセッションレポートとなります。

概要

AWS Amplify は、フロントエンドのウェブおよびモバイル開発者が、最小限のクラウドの専門知識でフルスタック アプリケーションを数時間で構築するのに役立ちます。 このセッションでは、認証、データ、ストレージを使用してバックエンドを簡単に構成する方法など、Amplify の機能を探ります。 Amplify Studio でフロントエンド UI を作成します。 Amplify Hosting を使用して、静的およびサーバー側でレンダリングされた Web アプリをホストします。 Next.js のサポートを含む最近の Amplify の更新について学びます。 Web、デスクトップ、iOS/Android の Flutter サポートを増幅します。 AWS CDK で 175 以上の幅広い AWS サービスを使用し、ニーズの進化に合わせてデプロイ操作を変更できる拡張機能。

セッション動画

アジェンダ

  • ウェブおよびモバイル開発業界の現状
  • AWS Amplify とは
  • フルスタック Web およびクロスプラットフォーム アプリの構築
  • お客様が Amplify をどのように使用しているか
  • 基礎となるアーキテクチャ

ここ数か月の間にリリースされた Amplify の新機能について説明

ウェブおよびモバイル開発業界の現状

会場聴講者 アンケート1

あなたはどのようなタイプの開発者ですか?

  • フロントエンド
  • バックエンド
  • フルスタック (フロントエンド と バックエンド)
  • 開発者ではない

会場聴講者 アンケート1 結果

フロントエンド開発者は広範な責任を負っている

  • 俊敏性
    • 市場投入までの時間
    • 高速イノベーション
    • 一方通行のドアではない (元に戻せる、不可逆的ではない)
  • 優れたエクスペリエンス
    • マルチデバイス
    • モダンなルック/フィール
    • 差別化された特徴
  • プロダクションレディ
    • 低遅延
    • 安全
    • 信頼性と拡張性

↓ 技術的ニーズ

  • フルスタック開発
    • デバイスとクラウドを利用した特徴
    • 統合された開発
    • 少ないボイラープレート(定形コード)
    • ベストプラクティスがビルトインされた
  • Web
    • ネイティブのようなエクスペリエンス
    • クライアント/サーバー・レンダリングのサポート (例: Next.js)
  • クロスプラットフォーム
    • 共通のコードベース
    • Flutter、React Native、Appleクロスプラットフォームのサポート

会場聴講者 アンケート2

あなたが開発しているアプリケーションの種類は?

  • Web アプリ
  • ネイティブのモバイルアプリ
  • クロスプラットフォーム アプリ
  • なし

会場聴講者 アンケート2 結果

AWS Amplify とは

  • フルスタック開発
  • アプリのUI構築
  • アプリのホスティング
  • バックエンドに接続

フルスタック Web およびクロスプラットフォーム アプリの構築

Let's build a fullstack food delivery platform

  • 顧客がメニューを参照して注文するための Web アプリ
  • ドライバー用のモバイル アプリ
    • ドライバーは注文を受け取り、配達する

Build an AWS backend

  • プロビジョニング
    • コマンドライン
    • AWS コンソール
  • ユースケースを実現
    • 認証
    • ファイルストレージ
  • データスキーマをモデリング
    • 認可ルールを追加
    • データへのアクセスをきめ細かく制御

Modeling our data

  • GraphQL の利点
    • 単一のエンドポイントを使用して必要なすべてのデータをやり取りできる
  • レストラン・モデルの例
    • 2 つの認可ルールを追加
    • Public read access
    • 管理者のみが、変更を加えることができる

2つ目のモデル:注文モデル

  • 注文モデルの例
    • サインインした顧客のみが、注文を create/read/update できる
    • 配達のために割り当てられたドライバーのみが、注文ステータス フィールドを変更できる
  • モデル間の関係を設定
    • 注文
    • 顧客
    • レストラン

Initialize Amplify Project

  • Amplify プロジェクトを初期化
    • CLI
    • AWS コンソール
  • 後で構築する顧客向けアプリケーションと共通のバックエンド

Add API and Authentication to the backend

  • バックエンドに追加
    • API
    • 認証

Data Modeling

  • アプリのフォルダ
    • amplify という名前の自動生成されたフォルダ
    • schema.graphql ファイル

Push changes to the backend

  • ローカル環境で行ったセットアップ
    • クラウド内の amplify プロジェクトに変更が適用されていない
  • amplify push コマンドを実行
    • クラウド内の amplify プロジェクトに変更が適用される

Testing GraphQL APIs

  • graphql API のテストを開始
  • amplify console コマンド
    • Amplify Studio を開く
    • データモデルタブ
    • ローカルで作成したプロジェクトが、クラウド内の amplify プロジェクトに同期されている

Build an AWS backend: What's new

  • GraphQL in Studio
    • Amplify Studio 上で自動生成APIに対してクエリを実行
  • Real-time data
    • サーバーサイドフィルタリング
    • 特定のユーザーまたはグループにのみ更新を送信する
    • データをエンド ユーザー デバイスに選択的に同期
      • デバイスのローカル ストレージを節約
      • ネットワーク トラフィックを節約
    • コラボレーション型のアプリを簡単に作成
  • In-app messages (アプリ内メッセージング)
    • セグメント化されたユーザにメッセージを送信
    • 顧客の行動に基づき、メッセージをトリガー
    • アプリで使用できる UI コンポーネントも提供

お客様が Amplify をどのように使用しているか

But is the backend production-ready?

  • Amplify は2軸を両立
    • フロントエンド開発者のエクスペリエンス
    • 拡張性

  • 作成した既存のリソースを変更
    • amplify override コマンド
  • カスタムリソースを追加
    • amplify add custom コマンド
    • ネイティブに提供されていないカスタムリソースを追加
    • 175 を超える AWS サービスを活用できる
  • Amplify バックエンドを CDK コンストラクトとしてエクスポート
    • amplify export コマンド
    • CI/CD パイプラインで使用可能に

Build web app UI

  • figma (設計ツール)
    • React コンポーネントを生成
  • Studio Form Builder
    • クラウドに接続されたフォームを構築
    • UI コンポーネントとしてアプリにプルする
  • UI コンポーネントを提供
    • サインイン
    • いくつかの機能が登場予定

Built-in UI components

  • 1つ目の方法
  • ビルトインの UI コンポーネント
    • オーセンティケータ コンポーネントの例

Figma-imported UI components

  • 2つ目の方法
  • Figma を使用してUIを構築する
    • figma ファイルを Amplify Studio にインポート
    • 提供されているコンポーネントを確認可能

Form Builder

  • 3つ目の方法
  • フォーム ビルダー を使用してアプリに UI を追加

Amplify Studio Form Builder

  • Forms for any API
    • API定義からフォームを生成
    • 新しいフォームをスクラッチから作成
  • Design visually
    • 共通の検証ルールを視覚的に設定
  • Extend via code
    • 検証ルールやフォームのスタイルを、コードを使いカスタマイズ可能

Host a web app

  • フルマネージド・ホスティング
    • 静的/シングルページ(SPA)Webアプリケーション
    • ハイブリッドサーバ側レンダリング(SSR)アプリケーション
  • GitベースのCI/CD機能
    • Amplify で作成されたバックエンドのデプロイ
  • 最新のWebフレームワークをサポート
    • React、Next.js、Angular、Vue、Gatsby、Hugo、Jekyllなど

Fully managed hosting for server side rendered apps built with Next.js 13

  • Next.js
    • ハイブリッド静的レンダリングとサーバレンダリング
    • インタラクティブ性と高速な初期ロード時間の両方をサポート
  • ゼロコンフィグ・デプロイメント
    • ブラウザとサーバのコードにわたる単一の開発者エクスペリエンス
  • バックエンドとの統合
    • Amplifyのバックエンドとシームレスに連携
    • Amplify Auth、Amplify API などのクライアント ライブラリを更新
    • ブラウザとクラウドの両方でまったく同じコードを使用できるようになる
  • CloudWatch との統合
    • SSR アプリ (サーバーサイドレンダリング アプリ)
    • オブザーブ
    • モニタ
    • トラブルシューティング

Connect to an AWS backend

  • Amplify ライブラリ や UI コンポーネント

  • Amplify でプロビジョニングされたリソース、既存のリソース に接続

  • ユースケース中心

    • 機能を簡単に使用できるよう API が宣言されている
  • web やモバイル、クロスプラットフォーム をサポート
    • クロスプラットフォーム
    • Flutter
    • React Native

Setup Authentication

Integrate GraphQL API

Connect to an AWS backend: What's new

  • Flutter
    • Dart でリライト
    • 共通のコードベースから、モバイル、デスクトップ、Webの各アプリを作成
  • iOS
    • Swift でリライト
    • 共通のコードベースから、iOSとmacOSのアプリを作成
    • async/await の使用
  • Android
    • Kotlin でリライト
    • ストレージおよび認証機能の改善
  • Authenticator UIコンポーネント
    • Flutter
    • React Native

基礎となるアーキテクチャ

Underlying architecture - Customer

  • webアプリのアセットを取得
  • アプリにログイン
  • メニューを参照して、注文する
  • 自分の注文のみ、更新を取得

Underlying architecture - Driver

  • アプリにログイン
  • ドライバー自身に割り当てられた注文のみを取得、更新
  • 新規注文のリアルタイム更新を取得

まとめ

AWS Amplify (再掲)

  • フルスタック開発
  • アプリのUI構築
  • アプリのホスティング
  • バックエンドに接続