AWS Amplify Framework(1)Amplifyの概要

AWS Amplify Frameworkとは

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

提供される機能の例 AWSサービス 内容
Analytics Congito/Pinpoint ユーザのセッションや属性などを計測
API Lambda + API Gateway REST/GraphQL APIの利用
Aythentication 認証APIとpre-build UI component
Storage S3 + Cloudfront 静的コンテンツの管理
Interactions Botの構築
PubSub リアルタイムデータのやりとり
Notification プッシュ通知
XR AR/VR

Amplify CLI

Amplify CLIを用いることでバックエンドを簡単に設定することができる。バックエンドのカテゴリごとにカテゴリプラグインや、プロバイダープラグインフロンドエンドプラグインなど様々なプラグインが用意されている。これらのリソースの状況は、amplify statusコマンドで確認することができる。

実行順序 コマンド 内容
1 amplify configure AWSユーザや認証情報の設定
2 amplify init プロジェクトの作成
3 amplify add カテゴリの追加
4 amplify push バックエンドのデプロイ

初期設定

amplify initコマンドを実行することで、フロントエンドの設定確認と初期化、AWS上のバックエンドをセットアップすることができる。1つのプロジェクトは設定の異なる複数のバックエンド(=Env)を持つことが可能で、amplify envコマンドを用いてこれらのバックエンドを切り替えることが可能。Gitのブランチと組み合わせることも可能で、masterブランチ上のプロジェクトはprod環境のバックエンド上にデプロイ、developブランチ上のプロジェクトはdevelop環境のバックエンド上にデプロイするなどの設定を行うことができる。万が一、AWS上のCloudFormationを削除してしまった状態のままデプロイした場合はエラーとなるので、この場合はamplify initコマンドでバックエンドの再生成が必要となる。

コマンド 実行内容
amplify env add ENV_NAME バックエンドを追加
amplify env remove ENV_NAME バックエンドを削除
amplify env pull ENV_NAME –restore AWS上のバックエンド設定を参照して上書き
amplify env list バックエンドの一覧を表示

AWS Amplify Console等の外部サービスでAmplifyをデプロイしたあとに、amplify pushコマンドを用いて開発環境上でデプロイを実行すると、バックエンドのデプロイ状態に差異が生じているためにデプロイに失敗する。上記のamplify env pullコマンドによって、AWS上の最新のバックエンド情報を取得することで、この問題は解決する。

カテゴリの追加と削除

上述のようにAmplify Frameworkは、認証解析などの様々な機能を有している。これらの機能(=カテゴリ)を自身のプロジェクトに追加したり削除したりするのが、amplify add/update/remove CATEGORY_NAMEコマンドである。

その他のコマンド

その他よく使うコマンドは以下の通り。

コマンド 実行内容
amplify codegen AWSからGraphQL Schemaを取得しJSファイルを生成
amplify delete Amplify プロジェクトをすべて削除
amplify status Amplify プロジェクトのステータスを表示
amplify push Amplify プロジェクトをAWS上でデプロイ

Amplifyプロジェクト

Amplifyプロジェクトは、以下のようなディレクトリ構成となっている。

.
├── amplify/
|├── backend/
||     ├─── api
||     |  └── schema.graphql   (編集可)    GraphQLのスキーマ
||     ├── amplify-meta.json   (自動生成)   AWSリソースの設定情報を格納 
||     └── awscloudformation   (自動生成)   CloudFormationのルートスタック
|├── .config/                   (自動生成)   クラウドの構成とユーザー設定/設定を保存
|└── #current-cloud-backend     (自動生成)  直近に取得したクラウド構成
└── src/
    ├── App.vue                  (編集可)     Vueの単一コンポーネントファイル     
    ├── graph/                   (自動生成)    GraphQL statement
    ├── main.js                  (編集可)      Vueのエントリーポイント      
    └── aws-exports.js           (自動生成)    AWSリソースのエンドポイント等の情報を格納