AWS Amplify 概要 メモ

* AWS Amplify の概要情報をまとめる。

## Amplifyとは

* Webフロントエンド、モバイルアプリを高速開発するためのプラットフォーム。

* AWSを用いたサーバーレスなバックエンドを構築するためのCLIや、バックエンドとの接続用のクライアントライブラリ、Webサイトホスティングの仕組みを持つ。

  

## 利点

### ①ユースケースベースで開発が可能

* 「カテゴリ」と呼ばれる機能単位でアプリケーションに機能を追加することができる。

### ② 最低限の設定で使用可能

* Amplify CLI を使用し、対話形式で各種設定を行う。この際、最低限必要な項目だけを選択することでセットアップが可能。

### ③AWSサービスで簡単に開発可能

* AWSの豊富なサービスと簡単に連携し、、アプリケーションを開発可能。

### ④スケールしやすいサービスを開発しやすい

* プロビジョンするリソースはほとんどがサーバーレスなため、スケーラビリティを担保することが可能になる。
* 最初にスモールスタートした時と同じ構成でプロダクトが成長した後もアクセスを捌くよう設定することができる。



## 構成要素

### Amplify CLI

* 各種AWSサービスを利用してサーバーレスなバックエンドを構築・管理するためのCLIツール。
* クラウドバックエンドの構築や管理のほか、AWSサービスとの連携に必要な設定ファイル、ソースコードを自動生成する。

### Amplify Framework

* ライブラリ、UIコンポーネントを含むOSSのクライアントフレームワーク。
* JavaScript・iOS・Androidに対応。

### Amplify Console

* サーバーレスウェブアプリケーションを公開するための環境を自動で構築するサービス。
* Gitリポジトリを紐付けることで、簡単にデプロイ環境を構築してくれるほか、ホスティングまで自動実行できる。

## Amplifyを用いた開発の流れ

### 1. Amplify CLIを用いたバックエンド構築

**①Amplify CLIインストール**

* CLIインストール

     ```shell
     npm install -g @aws-amplify/cli
     ```

* CLI初期セットアップ

     ```shell
     amplify configure
     ```

     * 利用するリージョン、クレデンシャル情報を選択する。

**②プロジェクトへのAmplify導入**

   * プロジェクトのルートディレクトリで以下を実行する。

     ```shell
     amplify init
     ```

     * プロジェクト設定を選択する。
       * プロジェクト名
       * 環境名(production/staging/develop/test)
       * 使用開発プラットフォーム（プログラミング言語/フレームワーク)
       * プロジェクトが使用するプロファイル情報
       * 使用エディタ
       * ....
     * プロジェクトのルートディレクトリに`amplify`フォルダが作成される。

**③機能(カテゴリ)設定**

   * カテゴリ=バックエンドの設定単位

   * 以下のコマンドを実行

     ```shell
     amplify add <カテゴリ名>
     ```

     * APIバックエンドを構築する場合は、カテゴリ名に`api`を指定する。
       * その他
         * Analytics：ユーザーのセッション/属性の計測
         * Authentication：アプリに認証・認可・フェデレーション機能を組み込む
         * Storage：静的コンテンツ関知
         * Interactions：Deep Learningを活用したBot
         * PubSub：リアルタイムデータのやり取り
         * Notification：プッシュ通知
         * Predictions：AI/MLコンテンツの組み込み。テキスト翻訳、文字読み上げ、物体検出、文章のネガポジ判定に対応。
         * XR：AR/VRコンテンツの組み込み
     * カテゴリに応じた設定を選択する。
   

   * カテゴリのステータス確認
    
     ```shell
     amplify status
     ```

     * Create:新規作成したがバックエンドへの反映未実施
     * Update:更新したがバックエンドへの反映未実施
     * No Change:クラウド同期済み

**④バックエンド構築**

   * 次のコマンドを実行してバックエンドを構築する

     ```shell
     amplify push
     ```

     * バックエンド反映後にエンドポイントの設定ファイルが出力される。
     * アプリはこの設定ファイルを読み込んでバックエンドに接続する。



### 2. Amplify Frameworkを用いたアプリケーション実装

**①Amplify Framework インストール**

   ```shell
   npm install aws-amplify 
   ```

**②Amplify Framework インポート**

   アプリでAmplify Frameworkを使用するために、バックエンド構築時に出力されたバックエンド設定ファイルを読み込む。

   ```javascript
   import Amplify from "aws-amplify";		// Amplify Frameworkの読み込み
   import awsExports from "./aws-exports";	// バックエンド設定の読み込み
   Amplify.configure(awsExports);			// Amplify Frameworkにバックエンド設定を登録
   ```

   

### 3. アプリケーションのデプロイ

**①デプロイ先となるhostingカテゴリを追加**

   ```shell
   amplify add hosting
   ```

**②デプロイ方法を選択**

* <u>Hosting with Amplify Console</u>

  * Amplify Consoleを用いたデプロイ
  * GitHubなどのソースコードリポジトリと連携可能
  * CI/CDを容易に構築できる
  * マネジメントコンソールからの操作可能

* <u>Amazon CloudFront and S3</u>

  * Amplify CLIコマンドラインからデプロイ
  * 以下の場合に適している
    * CI/CD環境が不要なシンプルなデプロイの場合
    * AWS Codepipelineなどでデプロイする場合

  ```shell
  amplify publish
  ```



## 参考情報

* [AWS Amplify　はじめてみる編](https://qiita.com/t_okkan/items/38aca98993bf06598af6)

* [AWS Amplify で始める、サクッとアプリ開発](https://aws.amazon.com/jp/builders-flash/202103/amplify-app-development/?awsf.filter-name=*all)

* [[AWS Black Belt Online Seminar]AWS Amplify](https://d1.awsstatic.com/webinars/jp/pdf/services/20200520_AWSBlackBelt_Amplify_A.pdf)