Amplifyの仕組み

概要

Amplifyは開発者に、フルスタックアプリケーション開発のための柔軟でモジュール化されたクラウドサービスとライブラリのコレクションを提供します。各機能は他の機能と統合されるように設計されていますが、カスタマイズされた実装のために単独で使用することもできます。開発者はプロジェクトのニーズに基づいてAmplify機能を組み合わせて選択し、必要な構成要素だけを活用できます。例えば、開発者はAmplifyのデータ機能をフルスタックアプリのバックエンドとフロントエンドに使用したり、アプリのフロントエンドをホストするだけにしたり、ユーザーインターフェイスをAmazon S3バケットなどの既存のAWSリソースに接続したりできます。このガイドでは、Amplifyが提供するさまざまな機能と、それらを一緒に使用したり独立して使用したりする方法について説明します。

Amplifyの機能

Amplifyは、アプリバックエンドの構築、アプリフロントエンドのバックエンドリソースへの接続、およびフロントエンドアプリのホストを行うためのツール機能を提供します。

エンドツーエンドのフルスタック開発の場合、Amplifyを使用してアプリのフロントエンドをホストし、ビジュアルまたはコマンドラインを通じてバックエンドリソースをプロビジョニングし、Figmaからコードへの生成とAmplifyのフロントエンドライブラリを使用してアプリのフロントエンドユーザーインターフェイスを構築します。このダイアグラムは完全なAmplifyフローを示していますが、各部分を独立して使用することもできます。例えば、フロントエンドだけをホストしたり、UIコンポーネントを使用してアプリのフロントエンドを構築したりできます。

Amplifyが実現できるさまざまなユースケースをもっと詳しく見てみましょう。このガイドではコードスニペットにJavaScriptを使用しますが、AmplifyはSwift、Android、Flutterを使用するモバイル開発者もサポートしています。

アプリの構築

データ

Amplifyを使用すると、GraphQLまたはREST APIをデータベースに接続して素早くセットアップできます。

APIをアプリのバックエンドに追加するには、次のCLIコマンドを実行できます：

amplify add api

CLIはスキーマを設定し、GraphQLまたはRESTのいずれかを選択するためのプロンプトを表示します。ターミナルのこれらのプロンプトに応答して、APIをセットアップします。Amplifyはバックエンドのセットアップを処理し、AWS AppSyncまたはAmazon API Gatewayで支援されたAPIとAmazon DynamoDBデータベースをプロビジョニングします。

次に、フロントエンドコードからAPIにアクセスします。例えば、GraphQLを使用するToDoリストアプリの場合：

import { generateClient } from 'aws-amplify/api';
import { listTodos } from './graphql/queries';

const client = generateClient();

const result = await client.graphql({
  query: listTodos
});
console.log(result);

詳しくはAmplify Dataを参照してください。

認証

Amplify Authを使用すると、アプリケーションに完全なユーザー認証フローを簡単に追加できます。

バックエンド認証を追加するには、次のコマンドを実行できます：

amplify add auth

カスタマイズされたサインインおよび登録フロー、多要素認証（MFA）、サードパーティのソーシャルプロバイダーを使用して認証フローをカスタマイズできます。Amplifyは、アプリに認証を追加するとAmazon Cognitoインスタンスをお客様のAWSアカウントにデプロイします。

その後、AmplifyのAuthenticatorコンポーネントまたはクライアントライブラリを使用してユーザーフローを追加できます。

import { withAuthenticator } from '@aws-amplify/ui-react';

function App({ signOut, user }) {
  return (
    <>
      <h1>Hello {user.username}</h1>
      <button onClick={signOut}>Sign out</button>
    </>
  );
}

export default withAuthenticator(App);

詳しくはAmplify Authを参照してください。

ストレージ

Amplify Storageは、クラウド内の画像、動画、ドキュメントなどのファイルとデータストレージを管理するシンプルなメカニズムを提供します。

バックエンドのアプリにストレージバケットを追加するには、次のコマンドを実行します：

amplify add storage

Amplifyはお客様のAWSアカウントにAmazon S3バケットまたはAmazon DynamoDBデータベースを追加してコンテンツを保存します。

アプリのフロントエンドでは、ファイルをアップロードできます：

import { uploadData } from 'aws-amplify/storage';

const result = await uploadData({
  key: 'example.png',
  data: file
});

またはユーザーに表示するコンテンツを取得できます：

import { getUrl } from 'aws-amplify/storage';

const image = await getUrl({
  key: 'example.png'
});

詳しくはAmplify Storageを参照してください。

UI構築

Amplifyを使用すると、コンポーネントライブラリとFigmaからコードへの生成を使用して、Webおよびモバイルアプリのユーザーインターフェイスを素早く構築できます。

Figmaからコード機能を使用すると、FigmaのデザインをダイレクトにReactコンポーネントに変換できます。その後、これらのコンポーネントをAmplify Studioのクラウドデータに接続し、コードベースで必要に応じてカスタマイズできます。これにより、デザインモックからUIをコーディングするプロセスが自動化されます。

Figmaからコードはレアクトユーザーが利用できます。詳しくはFigmaからコード生成を参照してください。

Amplifyはまた、カスタムテーマ、検証ロジック、ライフサイクル管理、検証を含むReactフォームを生成するフォーム構築機能を備えています。

フォームビルダーはReactユーザーが利用できます。詳しくはフォームビルダーを参照してください。

Amplifyは、認証、ファイルストレージ、データ管理などの一般的なユースケースを処理するオープンソースのReactコンポーネントのライブラリを含みます。これらのコンポーネントはバックエンドデータソースとしてAWSサービスを使用します。例えば、<Authenticator>コンポーネントは認証リソースに接続することで完全な認証フローを提供します。

詳しくはクラウド接続コンポーネントを参照してください。

AmplifyはまたCSSおよびReactで構築された40以上のプリミティブReactコンポーネントを提供し、アプリケーション全体を構築するための基盤を提供します。これらのプリミティブコンポーネントは、カスタムユーザーインターフェイスを構築するための基本的な構成要素を提供します。

さらに詳しく！

Amplifyはコアデータ、ストレージ、認証機能を超えたさらに多くの機能を提供しています。また、以下を含む追加のカテゴリも提供しています：

• サーバーレス関数 – AWS Lambdaファンクションをプロジェクトに追加して、アプリにカスタムビジネスロジックを追加します。
• ロケーションサービス – マッピング機能、ジオフェンシング、ロケーション追跡を追加します。
• 分析 – ユーザーの行動を理解し、主要なメトリクスを追跡します。
• AI/ML – 自然言語処理、テキスト音声変換、推奨事項などのAI搭載機能を組み込みます。
• PubSub – アプリインスタンス間とアプリバックエンド間でメッセージを送信して、リアルタイムのインタラクティブなエクスペリエンスを作成します。
• インタラクション – 音声とチャットボットで動作する会話インターフェイスを作成します。
• アプリ内メッセージング – 定義されたユーザーセグメントにターゲットメッセージを送信するか、ユーザーの行動に基づいてコンテキストメッセージをトリガーします。

フロントエンドホスティング

Amplify Hostingは、静的でサーバーサイドレンダリングされたNext.jsアプリ用のホストを提供します。組み込みのCI/CDワークフローがあるため、すべてのコミットで自動的に再デプロイできます。GitブランチをAmplify Hostingに接続して、すべてのプッシュでフロントエンドとバックエンドの変更を自動的にデプロイします。プルリクエストプレビューを有効にして、マージ前に本番ブランチに新機能を表示します。

リポジトリブランチを接続します：

ビルド設定を確認し、APIキーまたはパラメータに必要な環境変数を追加してから、保存してデプロイします。Amplifyはビルド環境をプロビジョニングしてリポジトリをクローンし、Amplifyバックエンドがある場合はデプロイし、その後フロントエンドをデプロイします。すべてAmplifyによって完全に管理されます。

詳しくはAmplify Hostingを参照してください。

Amplifyを超えたAWSへの接続

既存リソースへの接続

Amplifyは既存のAWSリソースと設定で動作するように設計されています。例えば、Amplifyの事前に構築された認証UIコンポーネントを、別に作成して設定した既存のAmazon Cognitoユーザープールで使用できます。または、Amplify Storageと統合することで、既存のS3バケットからの画像とファイルをアプリのユーザーインターフェイスに表示できます。

Amplifyのライブラリは既存のAWSサービスを活用するためのインターフェイスを提供するので、既存のバックエンドインフラストラクチャを中断することなく、現在のワークフローにAmplifyの機能を段階的に採用できます。

この柔軟性により、既存のリソースを使用して認証、API、ストレージ、ビジネスロジックなどのAmplifyフロントエンド機能を簡単に使い始めることができます。AmplifyはUIコード、アプリケーションロジック、およびバックエンドクラウドサービス間の統合を合理化します。

CDKで拡張

Amplifyは、CLIが提供するデフォルトを超えてインフラストラクチャをカスタマイズするための3つのオーバーライド機能を提供します。

• オーバーライド – Amplifyで生成されたインフラストラクチャを追加設定でオーバーライドします。例えば、Amplifyではダイレクトに利用できないがAmazon Cognitoでは利用できる認証設定を追加できます。
• カスタム – Amplifyで作成されたバックエンドにAWSサービスを追加します。
• エクスポート – AmplifyバックエンドをCDKスタックにエクスポートします。

他のAmplifyアクションと同様に、CLIコマンドを実行することで拡張可能性機能を有効にできます。例えば：

amplify override

詳しくは拡張可能性を参照してください。

サポートマトリックス

Amplifyはサポートされている言語全体で次のカテゴリと機能をサポートしています：

Amplifyアーキテクチャの例

以下のダイアグラムは、Amplifyで実装できるいくつかのシナリオの概要を示しています。AWS Amplifyで表示されるUI、Amplifyでプロビジョニングされたバックエンドリソース、Amplifyがお客様用にデプロイする基盤となるAWSサービスを示しています。

Amplifyはお客様のニーズに応じて成長し、フルスタックのフロント・ツー・バック・ソリューション、フロントエンドホストのみ、またはお客様のAWSリソースと統合するUIコンポーネントなど、最適な方法で使用できます。

AWS Amplifyのコアコンセプトと機能を理解したので、構築を開始しましょう。ステップバイステップの入門チュートリアルは、新しいアプリケーションにAmplifyを設定して統合する方法を説明しています。これらのチュートリアルはReact、JavaScript、Flutterなど多くの人気のある開発プラットフォームとフレームワークで利用できます。