この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
アノテーション テクニカルサポートの川崎です。
本記事は 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構築
- アプリのホスティング
- バックエンドに接続
2
