- 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インストール
npm install -g @aws-amplify/cli -
CLI初期セットアップ
amplify configure- 利用するリージョン、クレデンシャル情報を選択する。
②プロジェクトへのAmplify導入
-
プロジェクトのルートディレクトリで以下を実行する。
amplify init- プロジェクト設定を選択する。
- プロジェクト名
- 環境名(production/staging/develop/test)
- 使用開発プラットフォーム（プログラミング言語/フレームワーク)
- プロジェクトが使用するプロファイル情報
- 使用エディタ
- ....
- プロジェクトのルートディレクトリに
amplifyフォルダが作成される。
- プロジェクト設定を選択する。
③機能(カテゴリ)設定
-
カテゴリ=バックエンドの設定単位
-
以下のコマンドを実行
amplify add <カテゴリ名>- APIバックエンドを構築する場合は、カテゴリ名に
apiを指定する。- その他
- Analytics：ユーザーのセッション/属性の計測
- Authentication：アプリに認証・認可・フェデレーション機能を組み込む
- Storage：静的コンテンツ関知
- Interactions：Deep Learningを活用したBot
- PubSub：リアルタイムデータのやり取り
- Notification：プッシュ通知
- Predictions：AI/MLコンテンツの組み込み。テキスト翻訳、文字読み上げ、物体検出、文章のネガポジ判定に対応。
- XR：AR/VRコンテンツの組み込み
- その他
- カテゴリに応じた設定を選択する。
- APIバックエンドを構築する場合は、カテゴリ名に
-
カテゴリのステータス確認
amplify status- Create:新規作成したがバックエンドへの反映未実施
- Update:更新したがバックエンドへの反映未実施
- No Change:クラウド同期済み
④バックエンド構築
-
次のコマンドを実行してバックエンドを構築する
amplify push- バックエンド反映後にエンドポイントの設定ファイルが出力される。
- アプリはこの設定ファイルを読み込んでバックエンドに接続する。
2. Amplify Frameworkを用いたアプリケーション実装
①Amplify Framework インストール
npm install aws-amplify
②Amplify Framework インポート
アプリでAmplify Frameworkを使用するために、バックエンド構築時に出力されたバックエンド設定ファイルを読み込む。
import Amplify from "aws-amplify"; // Amplify Frameworkの読み込み
import awsExports from "./aws-exports"; // バックエンド設定の読み込み
Amplify.configure(awsExports); // Amplify Frameworkにバックエンド設定を登録
3. アプリケーションのデプロイ
①デプロイ先となるhostingカテゴリを追加
amplify add hosting
②デプロイ方法を選択
-
Hosting with Amplify Console
- Amplify Consoleを用いたデプロイ
- GitHubなどのソースコードリポジトリと連携可能
- CI/CDを容易に構築できる
- マネジメントコンソールからの操作可能
-
Amazon CloudFront and S3
- Amplify CLIコマンドラインからデプロイ
- 以下の場合に適している
- CI/CD環境が不要なシンプルなデプロイの場合
- AWS Codepipelineなどでデプロイする場合
amplify publish