AWS Amplify Frameworkとは

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

Amplify Frameworkは、カテゴリベースのプログラミングモデルを採用しており、対話式の設定画面から各カテゴリを追加/編集/削除することができる。

Amplify CLI

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

初期設定

amplify initコマンドを実行することで、フロントエンドの設定確認と初期化、AWS上のバックエンドをセットアップすることができる。このとき、CloudFormation経由で IAMロールやS3バケットの作成 も行われる。

コマンドの実行手順は以下の通り。

バックエンドの環境設定

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

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

カテゴリの追加と削除

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

その他のコマンド

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

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