テクニカルタイムアウト

AWS Amplify Framework(1)Amplifyの概要

AWS Amplify Frameworkとは

AWS Amplifyは、モバイルアプリやウェブアプリの実装を容易にするフレームワークで、AWS上のバックエンドをプロビジョニングし、iOSAndroidWeb、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                  (手動生成) 
モバイルバージョンを終了