AWS Amplify Framework（1）Amplifyの概要

eiji

6年前

AWS Amplify Frameworkとは

AWS Amplifyは、モバイルアプリやウェブアプリの実装を容易にするフレームワークで、AWS上のバックエンドをプロビジョニングし、iOS、Android、Web、React Native上などのフロントエンドと簡単に統合することが可能なライブラリ、UIコンポーネント、CLIなどを提供する。バックエンドのサービスを設定可能なAmplify CLIや、Web上に展開するAmplify JSなどのリソースがGitHub上で提供されており、認証や解析、プッシュ通知、ボットなどの機能を実装することが可能である。

AWS Black Belt Online Seminar AWS Amplify from Amazon Web Services Japan

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                  （手動生成）