AWS Amplify Frameworkとは
AWS Amplifyは、モバイルアプリやウェブアプリの実装を容易にするフレームワークで、AWS上のバックエンドをプロビジョニングし、iOS、Android、Web、React Native上などのフロントエンドと簡単に統合することが可能なライブラリ、UIコンポーネント、CLIなどを提供する。バックエンドのサービスを設定可能なAmplify CLIや、Web上に展開するAmplify JSなどのリソースがGitHub上で提供されており、認証や解析、プッシュ通知、ボットなどの機能を実装することが可能である。
Amplify Frameworkは、カテゴリベースのプログラミングモデルを採用しており、対話式の設定画面から各カテゴリを追加/編集/削除することができる。
| 機能名 | Frontend API | Backend Category | AWSサービス | 内容 |
|---|---|---|---|---|
| Analytics | AnalyticsClass | analytics | Pinpoint | ユーザのセッションや属性などを計測 |
| Interactions | Interactions | intaraction | Lex | Botの構築 |
| Cache | CacheObject | LRUキャッシュ | ||
| API | APIClass | api | Lambda + API Gateway | REST/GraphQL APIの利用 |
| PubSub | PubSub | IoT | リアルタイムデータのやりとり | |
| Hub | HubClass | ユーザセッション、属性等を追跡 | ||
| Authentication | AuthClass | auth | Cognito | 認証APIとpre-build UI component |
| Notification | PushNotification | notifications | Pinpoint | プッシュ通知 |
| I18n | I18n | 多言語化 | ||
| Storage | StorageClass | storage | S3, DynamoDB | 静的コンテンツの管理 |
| XR | XR | xr | Sumerian | AR/VR |
| Logger | Logger | コンソールログの記録 | ||
| Service Worker | ServiceWorkerClass | |||
| function | Lambda | 関数の作成 | ||
| hosting | S3, CloudFront | Webサイトホスティング | ||
| Predictions | prediction | Recognition など | 予測 |
Amplify CLI
Amplify CLIを用いることでバックエンドを簡単に設定することができる。バックエンドのカテゴリごとにカテゴリプラグインや、プロバイダープラグイン、フロンドエンドプラグインなど様々なプラグインが用意されている。これらのリソースの状況は、amplify statusコマンドで確認することができる。
初期設定
amplify initコマンドを実行することで、フロントエンドの設定確認と初期化、AWS上のバックエンドをセットアップすることができる。このとき、CloudFormation経由で IAMロールやS3バケットの作成 も行われる。
| コマンド | 実行内容 | 備考 |
|---|---|---|
| amplify init | Amplify プロジェクトを作成/初期化, IAMロールの作成 | ルートディレクトリで実行すること |
| amplify delete | Amplify プロジェクトをすべて削除 | 再度構築する場合は amplify init が必要 |
コマンドの実行手順は以下の通り。
| 実行順序 | コマンド | 内容 |
|---|---|---|
| 1 | amplify configure | AWSユーザや認証情報の設定 |
| 2 | amplify init | プロジェクトの作成 |
| 3 | amplify add | カテゴリの追加 |
| 4 | amplify push | バックエンドのデプロイ |
バックエンドの環境設定
1つのプロジェクトは設定の異なる複数のバックエンド（=Env）を持つことが可能で、amplify envコマンドを用いてこれらのバックエンドを切り替えることが可能。Gitのブランチと組み合わせることも可能で、masterブランチ上のプロジェクトはprod環境のバックエンド上にデプロイ、developブランチ上のプロジェクトはdevelop環境のバックエンド上にデプロイするなどの設定を行うことができる。万が一、AWS上のCloudFormationを削除してしまった状態のままデプロイした場合はエラーとなるので、この場合はamplify initコマンドでバックエンドの再生成が必要となる。
| コマンド | 実行内容 |
|---|---|
| amplify env add <ENV> | バックエンドを追加 |
| amplify env remove <ENV> | バックエンドを削除 |
| amplify env pull <ENV> –restore | AWS上のバックエンド設定を参照して上書き |
| amplify env ckeckout <ENV> –restore | 指定した環境設定を適用 |
| amplify env list | バックエンドの一覧を表示 |
AWS Amplify Console等の外部サービスでAmplifyをデプロイしたあとに、amplify pushコマンドを用いて開発環境上でデプロイを実行すると、バックエンドのデプロイ状態に差異が生じているためにデプロイに失敗する。上記のamplify env pullコマンドによって、AWS上の最新のバックエンド情報を取得することで、この問題は解決する。
カテゴリの追加と削除
上述のようにAmplify Frameworkは、認証や解析などの様々な機能を有している。これらの機能（=カテゴリ）を自身のプロジェクトに追加したり削除したりするのが以下のコマンドである。
| コマンド | 実行内容 |
|---|---|
| amplify add <CATEGORY> | カテゴリを追加 |
| amplify update <CATEGORY> | カテゴリを更新 |
| amplify remove <CATEGORY> | カテゴリを削除 |
その他のコマンド
その他よく使うコマンドは以下の通り。
| コマンド | 実行内容 |
|---|---|
| amplify status | Amplify プロジェクトのステータスを表示 |
| amplify push | Amplify プロジェクトをAWS上でデプロイ |
| amplify pull | AWSから設定情報を取得し、ローカル環境を変更 |
| amplify console | AWSのマネージメントコンソールに遷移 |
| amplify delete | Amplify プロジェクトを削除 |
Amplifyプロジェクト
Amplifyプロジェクトは、以下のようなディレクトリ構成となっている。
.
├── amplify/
│ ├── .config/ （自動生成） クラウドの構成とユーザー設定を格納 (amplify init)
│ │ ├── local-aws-info.json （自動生成） AWSクレデンシャルのプロファイル名を格納
│ │ ├── local-env-info.json （自動生成） ローカルのディレクトリやIDEの設定を格納
│ │ └── project-config.json （自動生成） プロジェクトの設定を格納
│ ├── backend/
│ │ ├─── api
│ │ │ └── PROJECT_NAME
│ │ │ └── schema.graphql （編集可） GraphQLのスキーマ
│ │ ├─── auth
│ │ │ └── PROJECT_NAME
│ │ │ └── parameters.json （編集可） プロンプトで設定した内容を格納（amplify add auth）
│ │ ├── amplify-meta.json （自動生成） AWSリソースの設定情報（Permission, Category）を格納, Gitリポジトリの管理対象外
│ │ └── awscloudformation （自動生成） CloudFormationのルートスタック, Gitリポジトリの管理対象外
│ ├── #current-cloud-backend/ （自動生成） 直近に取得したクラウド構成, Gitリポジトリの管理対象外
│ └── team-provider-info.json （自動生成） Environment設定（Permission, Category, CloudFormation Stack）を格納
└── src/
├── App.vue （編集可） Vueの単一コンポーネントファイル
├── aws-exports.js （自動生成） AWSリソースのエンドポイント等の情報を格納, Gitリポジトリの管理対象外 (amplify init)
├── components/ （手動生成） 作成したVueコンポーネント
│ ├── Authenticator.vue （自動生成） 認証画面コンポーネント
│ └── Main.vue （手動生成） メインコンポーネント
├── graph/ （自動生成） GraphQL statement
│ ├── mutation.js （自動生成）
│ ├── queries.js （自動生成）
│ ├── schema.json （自動生成）
│ └── subcriptions.js （自動生成）
├── main.js （編集可） Vueのエントリーポイント
├── package.json （自動生成） 依存関係のあるライブラリの一覧
└── router/ （手動生成） ルータコンポーネント
└── index.js （手動生成）