本記事では、AWS が提供するフルスタック Web・モバイル開発プラットフォーム「AWS Amplify Gen 2」の機能と特徴について解説します。
AWS Amplify Gen 2 (以降、Amplify Gen 2) は、TypeScript を活用したフルスタックの開発環境です。フロントエンドとバックエンドの開発を一体化し、Web・モバイルアプリを迅速に構築できます。Amplify Gen 2 はコーディングからクラウドリソースのプロビジョニング、ホスティングまで、アプリ開発のライフサイクル全体を一元的に管理する環境を提供します。
本記事では、Amplify Gen 2 の以下の主要機能について詳しく解説していきます。
AWS Amplify Gen 2 とは
フルスタック TypeScript 開発
Amplify Gen 2 の導入方法
UI コンポーネントの活用
バックエンド開発の効率化
開発体験を重視した機能
堅牢なセキュリティ対策
Amplify Gen2 の料金体系
それでは、項目ごとに詳しく見ていきましょう。
builders.flash メールメンバー登録
AWS Amplify Gen 2 とは
近年のアプリケーション開発では、フロントエンドとバックエンドの両方でますます高度な専門性が求められるようになっています。
フロントエンド
Angular、React、Vue.js などのモダンな Web フレームワークの習得が必須となり、コンポーネント設計、ステート管理、パフォーマンスチューニングなど高度なスキルが求められます。バックエンド
クラウドサービスの活用、認証機能、データベース、API、ストレージ、サーバーレスなど、さまざまなサービスやアーキテクチャの組み合わせを検討する必要があります。シングルページアプリケーション (SPA) や サーバーサイドレンダリング (SSR) などモダンな Web サイトやアプリケーションのホスティング先の選定やデプロイ方法の検討も重要な課題となります。
ユーザーに優れた体験を提供するためには、UI/UX デザインからクラウドインフラ構築まで幅広い知識と経験が必要です。しかし、フロントエンドとバックエンドの両方に精通したフルスタックエンジニアを確保するのは容易ではありません。
このような課題に対し、Amplify Gen 2 はフロントエンドエンジニアであっても TypeScript ベースでのフロントエンド/バックエンドのフルスタック開発を可能にするプラットフォームです。UI コンポーネントから必要な AWS リソースを自動生成でき、バックエンド知識が乏しくてもクラウドベースの Web アプリやモバイルアプリを効率的に開発できます。
Gen 1 と Gen 2 の主要な違い
Amplify Gen 2 の主要機能
フルスタック TypeScript 開発
Amplify Gen 2 の核となる特徴として、TypeScript をフロントエンド、バックエンドの共通言語として利用し、フルスタック開発を実現できる点が挙げられます。
TypeScript とは
TypeScript は、静的型付け機能を備えた JavaScript の拡張言語です。コード内の変数やオブジェクト、関数の引数や戻り値などにデータ型を明示的に宣言することで、コンパイル時にエラーをチェックし、型の不整合を検出できます。TypeScript は現在、Angular、React、Vue.js などの人気フレームワーク・ライブラリでも広く採用されています。
Amplify Gen 2 では、TypeScript でフロントエンド/バックエンドで型定義を共有でき、コードの再利用性が高まります。さらに、コード補完、自動リファクタリングなど高度なツール支援により、開発者の生産性が大幅に向上します。
TypeScript での型宣言の例
コード内の変数やオブジェクト、関数の引数や戻り値などにデータ型を明示的に宣言することで、コンパイル時にエラーをチェックし、型の不整合を検出できます。
const number: number = 42; // 数値型を明示
const isTrue: boolean = false; // 論理型を明示
console.log(number + isTrue); // 型の不一致によりエラー発生フルスタック構成
Amplify Gen 2 では、以下のように TypeScript を活用してフルスタックの開発を行います。
フロントエンド開発
Angular、React、Vue.js などの人気フレームワークと連携し、型安全なコンポーネントを TypeScript で構築できます。バックエンド開発
データモデル、GraphQL スキーマ、認証ロジックなどを TypeScript で宣言的に定義すると、対応する AWS リソースが自動生成されます。インフラストラクチャの構築
AWS CDK などを活用し、クラウドインフラを TypeScript で記述した Infrastructure as Code (IaC) で構築・管理できます。
開発の各工程を TypeScript 一つで記述できるため、アプリケーション全体のデータ構造やロジックの一貫性が保たれ、フロントエンド・バックエンドが密に連携できます。
TypeScript による宣言的定義
Amplify Gen 2 では、以下のようなバックエンド要素を TypeScript で宣言的に定義できます。
- データモデル：アプリケーションで扱うデータ構造を型安全に定義
- API：GraphQL API のスキーマやリゾルバロジックを TypeScript で記述
- 認証・認可：Amazon Cognito を使ったユーザー認証、アクセス権限ルールをコード化
- ストレージ：ファイルアップロード・ダウンロードの処理ロジックを定義
- 関数：サーバーレス関数 (Lambda) のロジックを実装
これらの定義に基づき、必要な AWS リソース (Amazon DynamoDB、AWS AppSync、Amazon Cognito など) が自動プロビジョニングされます。開発者はコーディングで要件を宣言するだけで、バックエンド実装が自動化されるため、生産性が大きく向上します。
TypeScript の静的型付けとツール支援を最大限活用しながら、フルスタックの開発を効率的に行えるのが Amplify Gen 2 の大きな強みです。例えば、フロントエンドとバックエンドで型定義を共有できるため、コードの再利用性が高まり、開発の手戻りが減少します。また、コード補完や自動リファクタリングなどの機能により、開発者の生産性が大幅に向上します。
Amplify Gen 2 のバックエンド開発について詳しくは、本記事の「バックエンド開発の効率化」セクションをご覧ください。
Amplify Gen 2 の導入方法
従来の Amplify Gen 1 では、開発環境の構築にあたり、各種ライブラリのインストールやバックエンドリソースの設定を手動で行う必要がありました。しかし、Amplify Gen 2 では、マニュアルインストールに加え、クイックスタートが新たに提供されるようになりました。
- クイックスタート：GitHub で Amplify のスターターテンプレートからリポジトリを作成し、Amplify コンソールでそのリポジトリを選択してデプロイするだけで、フルスタックアプリの開発環境が自動構築されます。
- マニュアルインストール：Amplify CLI を使って手作業で開発環境を構築します。
事前準備
クイックスタートを利用する場合、以下の環境が必要です。
- Node.js：v18.17 以上
- npm：v9 以上
- git：v2.14.1 以上
- AWS アカウント：AWS Amplify の無料利用枠を利用可能なアカウント
- GitHub アカウント：スターターアプリの管理
利用するフレームワークや言語によっては、上記以外の環境が必要になる場合があります。詳しくは、各クイックスタートページの「Prerequisites」セクションをご覧ください。
スターターアプリのデプロイ
本記事では、クイックスタートを使った Amplify Gen 2 の開発環境構築手順を解説します。
フレームワークの選択
公式ドキュメントから、使用するフレームワーク (React、Next.js、Angular、Vue など) のクイックスタートページを開きます。GitHub リポジトリの作成
利用している GitHub アカウントと紐付けてあらかじめ用意された Todo アプリ用のリポジトリを作成します。スターターアプリのデプロイ
リポジトリ作成後、Amplify でデプロイを実行します。GitHub アカウントへのアクセス許可を行い、リポジトリとブランチを選択します。デプロイ時に「新しいサービスロールを作成して使用」を選ぶと、必要な IAM ロールが自動で作成されます。デプロイ済みアプリの確認
デプロイが完了したら、Amplify コンソールからデプロイ済み URL にアクセスしてテンプレートの ToDo アプリを確認できます。テンプレートでは、すでに API、データベース、認証機能がバックエンドに構築されているため、ブラウザ上の操作で ToDo アイテムの追加が可能です。
上記の手順に従い、スターターアプリのデプロイが完了します。
フロントエンドのカスタマイズ
スターターアプリのデプロイが完了したら、次にローカル環境でカスタマイズし、変更内容をデプロイできるようにします。
1. GitHub リポジトリのクローン
最初に、デプロイ済みの GitHub リポジトリをローカル環境にクローンして、npm install でパッケージ類をインストールします。
# React の場合
git clone https://github.com/<github-user>/amplify-vite-react-template.git
cd amplify-vite-react-template && npm install2. ローカル環境の設定
Amplify コンソールから amplify_outputs.json ファイルをダウンロードし、プロジェクトのルートディレクトリに配置します。amplify_outputs.json ファイルには、デプロイされたバックエンドリソースへの接続情報が含まれます。
3. フロントエンドのカスタマイズ
src/App.tsx ファイルを編集し、ローカル環境でアプリケーションのフロントエンド部分をカスタマイズします。必要に応じてコンポーネントを追加・変更し、新しい機能を実装します。
4. 変更内容の確認
プロジェクトディレクトリで npm run dev コマンドを実行してローカルサーバー (デフォルトでは、http://localhost:5173) を起動し、変更内容を確認します。フロントエンドの変更が問題なく反映されていることを確認します。
以上で、フロントエンドのカスタマイズが可能です。GitHub にプッシュすることで、Amplify の CI/CD 機能によってクラウドに反映されます。
バックエンドのカスタマイズ
1. AWS 認証情報の設定
バックエンドの更新を行うため、AWS 認証情報が必要になります。まだ AWS 認証情報を持っていない場合は、新しく作成する必要があります。
2. バックエンドのカスタマイズ
data/resource.ts ファイルを編集し、バックエンド部分をカスタマイズします。データモデルの変更や、認証ルールの設定など、要件に合わせてバックエンドを調整します。
3. クラウドサンドボックス をデプロイ
npx ampx sandbox コマンドを実行することで、開発者ごとに独立したバックエンド環境であるクラウドサンドボックスをデプロイできます。これにより、本番環境に影響を与えずにバックエンドの変更を安全にテストできます。
4. 変更をデプロイ
フロントエンドとバックエンドの変更が問題なければ、変更をコミットして GitHub にプッシュします。これにより、本番環境のアプリとバックエンドが更新されます。
git commit -am "Updates to frontend and backend"
git push構築完了
以上で、Amplify Gen 2 の開発環境を構築し、フロントエンドおよびバックエンドのカスタマイズが可能になります。クイックスタートを使わず、スクラッチで Amplify 環境を構築する場合や、既存のプロジェクトを Amplify と統合する場合は、マニュアルインストールを実行します。
Amplify Gen 2 のクイックスタートについて詳しくは、Amplify Documentation の「Quickstart」をご覧ください。
UI コンポーネントの活用
モダンな Web・モバイルアプリケーションでは、優れた UX を実現するための UI 構築が重要です。しかし、UI パターンを一から実装するのは大変な作業です。Amplify Gen 2 は、この課題を解決するため、Amplify UI ライブラリを提供しています。
Amplify UI は、React ベースの UI コンポーネントライブラリです。基本的な UI パターンを提供する「Primitive components」と、AWS サービスと連携してクラウド機能を提供する「Connected components」の2種類があります。
Amplify UI のインストール
Amplify UI を利用するには、UI コンポーネントライブラリの @aws-amplify/ui-react パッケージと aws-amplify 本体をインストールします。
クイックスタートで環境を構築した場合は、すでに Amplify UI を含む必要なパッケージが指定されています。マニュアルインストールで環境を構築する際は、以下のコマンドを実行して必要なパッケージをインストールします。
マニュアルインストールで環境を構築
@aws-amplify/ui-react パッケージを JSX コード内でインポートすることで、様々な UI コンポーネントを利用できます。
// npmの場合
npm install @aws-amplify/ui-react aws-amplify
// yarnの場合
yarn add @aws-amplify/ui-react aws-amplifyPrimitive components
Primitive components には、ボタン、入力フィールド、レイアウトグリッドなど、レイアウトに関連する UI パターンを実装したコンポーネントが多数揃っています。
主な UI コンポーネントは以下の通りです。
カテゴリー |
説明 |
コンポーネント |
基本コンポーネント |
区切り線やアイコンなどの基本的な UI 要素 |
|
フィードバックコンポーネント |
ユーザーへの警告やローディング状況などのフィードバックを提供 |
|
ナビゲーションコンポーネント |
リンクやタブ、メニューなどでアプリ内の移動を支援する UI 要素 |
|
入力コンポーネント |
ボタンやチェックボックス、入力フィールドなどでデータ入力を行う UI 要素 |
|
レイアウトコンポーネント |
アコーディオンやカード、グリッドなどで UI の配置を制御 |
|
データ表示コンポーネント |
アバターやバッジ、レイティングなどでデータを表示 |
|
ユーティリティコンポーネント |
ハイライトやスクリーンリーダー対応などの補助的な機能を提供 |
アイコンや、ボタン、ナビゲーションなど豊富なレイアウト UI パターンを揃えています。開発者はこれらのコンポーネントを自在に組み合わせることで、多彩なニーズに対応した UI を素早く構築できます。
Connected components
Connected components は、UI コンポーネントから AWS サービスの機能を直接呼び出すことができます。サービス連携コンポーネントを使うことで、認証・認可、チャット、サブスクリプションなどの機能に対応する AWS サービスを呼び出す UI を簡単に実装できます。
主なサービス連携コンポーネントは以下の通りです。
カテゴリー |
説明 |
コンポーネント |
連携サービス |
認証 |
ユーザー認証フローの UI/ ロジックを提供。登録、サインイン、MFA に対応。 |
||
アカウント管理 |
アカウント設定を管理する UI。パスワード変更、アカウント削除など。 |
||
生体認証 |
Amazon Rekognition Face Liveness と連携し、なりすましユーザーを検出。 |
||
Geo |
対話型の地図 UI と位置検索機能を提供。 |
||
ストレージ |
ユーザーコンテンツを Amazon S3 で管理するための UI。 |
||
メッセージング |
アプリ内メッセージングの UI を提供。アプリ内でメッセージを表示。 |
サービス連携コンポーネントを使えば、開発者は AWS サービスの詳細を意識せずに、UIコンポーネントからクラウドの機能を活用できます。UIとバックエンドの分離が実現し、開発効率が大幅に向上します。
コンポーネントの実装
UI コンポーネントやサービス連携コンポーネントの実装は、一般的な React コンポーネントと同じく、該当のコンポーネントをインポートして JSX で記述します。
コードの説明
上記のコード例では、Authenticator コンポーネントをインポートした後、App 関数内で <Authenticator> タグを記述することで、認証済みコンテンツを表示しています。また、Heading と Button コンポーネントを使用し、ユーザー名の表示とサインアウトボタンをスタイリングされた状態で表示しています。
Amplify UI について詳しくは、Amplify Documentation の「Amplify UI Library」をご覧ください。
バックエンド開発の効率化
従来の Web アプリケーション開発では、バックエンド構築が大きな負担となっていました。Amplify Gen 2 は、この課題を解決するため、TypeScript と AWS CDK を活用してバックエンド開発を効率化する機能を提供しています。
バックエンドのデータモデル定義
Amplify Gen 2 では、バックエンドのデータモデルを TypeScript で宣言的に定義します。データモデルとは、アプリケーションで扱うデータの構造を定義するものです。例えば、チームメンバーの管理アプリケーションであれば、以下のように Member と Team の 2 つのモデルを定義することが考えられます。
const schema = a.schema({
// Memberモデル
Member: a.model({
name: a.string().required(),
// Teamとの1対多のリレーション
teamId: a.id(),
team: a.belongsTo('Team', 'teamId'),
}),
// Teamモデル
Team: a.model({
mantra: a.string().required(),
// Memberとの1対多の逆リレーション
members: a.hasMany('Member', 'teamId'),
}),
})
// 公開APIキーによる認可
.authorization((allow) => allow.publicApiKey());コードの説明
上記の例では、Member と Team の 2 つのモデルが定義され、1 対多のリレーションシップが設定されています。また、公開 API キーによる認可ルールも設定されています。
バックエンドリソースの自動生成
上記のデータモデル定義から、Amplify Gen 2 は以下のリソースを自動生成します。
DynamoDB テーブル：データを永続化するための DynamoDB テーブルが作成されます。
GraphQL スキーマ：データモデル定義に基づいた GraphQL スキーマが生成されます。
AppSync API：生成された GraphQL スキーマに基づき、AWS AppSync が GraphQL API を自動構築します。
TypeScript 型定義：データモデルに対応した TypeScript の型定義が生成されます。
これらのリソースは、AWS CDK を使ってクラウド構成としてコード化されます。
AWS CDK による AWS リソースのプロビジョニング
AWS CDK は、AWS リソースをコードで定義し、プロビジョニングするためのフレームワークです。Amplify Gen 2 では AWS CDK を活用し、データモデル定義から AWS リソースを自動生成するコードを出力します。具体的には、Amplify Gen 2 はTypeScript でデータモデルを定義すると、そのデータモデル定義に基づいて CDK コードを自動生成します。この CDK コードには、DynamoDB テーブル、AppSync API、データソース、リゾルバーなど、必要な AWS リソースの定義が含まれています。
生成された CDK コードは、CDK のデプロイメント機能を使って AWS に自動的にデプロイされます。つまり、開発者はデータモデルを宣言的に定義するだけで、Amplify Gen 2 が CDK コードを自動生成し、そのコードから AWS リソースがプロビジョニングされます。
GraphQL ベースのデータ操作
上記で自動生成された AppSync API は、AWS がマネージドで提供するサーバーレス GraphQL サービスです。この API をホスティングし、フロントエンドからの GraphQL クエリ/ミューテーションを実行します。
データクライアントを生成してデータ操作
フロントエンドから GraphQL でクエリ/ミューテーションを行う際は、以下のようにデータクライアントを生成してデータ操作を行います。
const client = generateClient<Schema>();
// Teamデータの作成
const { data: newTeam } = await client.models.Team.create({ mantra: 'Go Team!' });
// Memberデータの作成
const { data: newMember } = await client.models.Member.create({ name: 'John Doe' });
// Teamデータの取得
const { data: team } = await client.models.Team.get({ id: newTeam.id });
// Memberデータの更新
await client.models.Member.update({ id: newMember.id, name: 'Jane Doe' });バックエンドリソースの自動生成
このように、Amplify Gen 2 では TypeScript ベースでデータモデルを宣言するだけで、対応するバックエンドリソースが自動生成されます。GraphQL と AppSync の活用により、バックエンド開発が格段に効率化されています。
さらに、Amplify Gen 2 では認証やストレージなど他の AWS サービスも GraphQL API と連携して統合的に構成できます。データモデル定義の宣言のみで、バックエンド開発のコアの部分を自動化できます。
開発体験を重視した機能
Amplify Gen 2 は、開発者がストレスなく生産的に開発できるよう、高度なホスティング機能、クラウドサンドボックス環境、フルスタックワークフローなど、開発体験の向上につながる様々な機能を提供しています。
Amplify Hosting によるホスティング
Amplify Hosting は、静的および動的ウェブアプリケーション向けのフルマネージド型ホスティングサービスです。最新のフロントエンドフレームワークである React、Angular、Vue.js、Next.js、Nuxt などをサポートしており、Amazon CloudFront の CDN を活用してグローバルに高速配信が可能です。
ホスティング可能なウェブサイト/アプリ
Amplify Hosting は、利用するフレームワークやツールを限定されずに、多くの主要な「サーバーサイドレンダリング (SSR) フレームワーク」、「シングルページアプリケーション (SPA) フレームワーク」、「静的サイトジェネレーター (SSG)」をサポートしています。
SSR フレームワーク
- Next.js
- Nuxt
- Astro (コミュニティ提供のアダプター使用)
- SvelteKit (コミュニティ提供のアダプター使用)
- 任意の SSR フレームワーク (カスタムアダプター使用)
SPA フレームワーク
- React
- Angular
- Vue.js
- Ionic
- Ember
静的サイトジェネレーター
- Eleventy
- Gatsby
- Hugo
- Jekyll
- VuePress
その他の主要な特徴
Amplify Hosting は、利用するフレームワークやツールを限定されない多彩なサポートに加え、以下のような開発者の生産性向上につながる機能を提供しています。
機能 |
説明 |
継続的デプロイ |
GitHub などのリポジトリと連携し、コード変更時に自動ビルド & デプロイ |
環境分離 |
本番環境とステージング環境を 1 つのリポジトリで管理可能 (モノレポ構成) |
プレビューデプロイ |
プルリクエスト作成時に変更内容をプレビューできる URL が自動生成 |
グローバル CDN |
高速なウェブサイト配信を実現するグローバル CDN 配信 |
カスタムドメイン |
カスタムドメインの設定が簡単で、SSL/TLS 証明書も自動発行 |
Amplify Hosting について詳しくは、「AWS Amplify ホスティング ユーザーガイド」をご覧ください。
クラウドサンドボックス環境
フルスタックワークフロー
Amplify Gen 2 では、フロントエンドとバックエンドの変更を一元的に管理する Git ベースのフルスタックワークフローが提供されています。
CI/CD ワークフロー
Amplify Gen 2 では、Git のフィーチャーブランチを使った並行開発が可能で、プルリクエストを作成し、レビューを受けられます。プルリクエストが承認されると、ステージング環境にフルスタックでデプロイされます。ステージング環境でのテストが問題なければ、本番ブランチにマージすると自動的に本番環境に反映されるなどのワークフローが可能になります。
ブランチベースのデプロイ
環境分離 (本番 / ステージングなど)
プレビューデプロイ (プルリクエスト時)
自動ビルド・テスト・デプロイ
モノレポ (Monorepo) ワークフロー
Amplify Gen 2 では、モノレポワークフローがサポートされています。モノレポとは、複数のパッケージやコンポーネントを 1 つのリポジトリに含める手法です。これにより、共有ライブラリやコンポーネントの個別デプロイが不要になり、デプロイプロセスが簡略化されます。 モノレポを活用すると、1 つの Git リポジトリにフロントエンドコード、バックエンドコード、インフラ構成を含めることができ、アプリ全体の変更を一元的に管理できます。バックエンドアプリとフロントエンドアプリは個別に Amplify コンソールに接続し、フロントエンドアプリのビルドコマンドにはバックエンドアプリの App ID を指定する必要があります。
npx ampx generate outputs --branch main --app-id BACKEND-APP-IDフルスタックなアプリ開発効率化
Git ブランチとデプロイ環境を関連付けることで、開発サイクル全体を通じてフルスタックなアプリ開発が効率化されます。継続的な統合とデプロイが実現でき、開発の手戻りを最小限に抑えながらアプリの品質を高められます。
Amplify Gen 2 のフルスタックワークフローとして他にも多くの機能を提供しています。詳しくは、Amplify Documentation の「Fullstack workflows」をご覧ください。
堅牢なセキュリティ対策
Amplify Gen 2 を使って Web/ モバイルアプリを開発する際、適切なセキュリティ対策を講じることが重要です。Amplify Gen 2 では、アプリケーションレベルでのセキュリティ対策の実装に加え、AWS サービスが提供するセキュリティ機能を活用できます。
アプリケーションレベルのセキュリティ対策
Amplify Gen 2 では、アプリケーションレベルで堅牢なセキュリティ対策を実装できます。
認証・認可機能
Amazon Cognito ユーザープールを利用したユーザー認証、ID プールによる認可付与と適切なリソースアクセス制御を実現します。リソースアクセス制御
AWS リソースへのアクセスを必要最小限の IAM ポリシーで制御します。ブランチデプロイでは AmplifyBackendDeployFullAccess ポリシーが自動付与され、サンドボックスではローカル認証情報にこのポリシーを手動で割り当てる必要があります。カスタム認証チャレンジの実装
通常の認証フローに加え、独自の認証チャレンジロジックを実装できます。CUSTOM_WITH_SRP または CUSTOM_WITHOUT_SRP フローを、Lambda 関数トリガーを定義することで実装できます。
AWS サービスによる包括的なセキュリティ
Amplify Gen 2 は、AWS が提供する高度なセキュリティサービスと緊密に統合されています。アプリケーション開発時から運用に至るまで、AWS のセキュリティベストプラクティスを包括的に適用し、堅牢なセキュリティ対策を実現できます。
データの保護
保管時のデータは自動で暗号化され、暗号化キーの管理には AWS Key Management Service (KMS) が利用されます。また、アプリケーションと AWS サービス間の通信は HTTPS 経由で行われ、転送中のデータを強力な暗号化で保護します。SSL/TLS 証明書の管理には AWS Certificate Manager が利用されています。インフラストラクチャの保護
Amplify Gen 2 はマネージドサービスのため、AWS グローバルネットワークセキュリティによる包括的な保護を受けています。AWS が提供する DDoS 防御、監視、自動保護などのサービスにより、インフラストラクチャが多層的に保護されています。ログ記録・モニタリング
Amplify Gen 2 では、Amazon CloudWatch、AWS CloudTrail、Amazon EventBridge などの AWS サービスと連携することで、包括的なログ監視と不正検知を実現しています。Amplify コンソールのモニタリングメニューからアプリのパフォーマンスメトリクスを一元監視できます。
Amplify Gen 2 では、アプリケーションレベルでのセキュリティ対策の実装、および AWS サービスレベルの多層的セキュリティが施されます。開発者は高い機能性とセキュリティを兼ね備えたWeb/モバイルアプリを、安全でスケーラブルな環境で提供できます。
Amplify Gen 2 の料金体系
Amplify Gen 2 自体は無料で利用できます。一方で、Amplify Hosting や Amplify Gen 2 がバックエンドで利用する AWS リソースには料金が発生します。
Amplify Hosting の基本的な料金モデルは従量課金制です。使用したリソース分のみ課金され、固定の月額料金はかかりません。開発の規模に合わせてコストを柔軟に最適化できるのが特長です。また、新規ユーザー向けの無料利用枠が用意されているため、プロジェクトの立ち上げ時から一定期間は実質的にコストがかからず、安心して利用を開始できます。
Amplify Hosting および Amplify Gen 2 が利用する AWS サービス の利用料金は以下のとおりです。
Amplify Hosting
Amplify Gen 2
バックエンドで利用する AWS サービスの料金
Amplify Hosting の料金
Amplify Gen 2 のバックエンドリソース料金
まとめ
最後に、本記事で紹介した機能の全体図を見てみましょう。
本記事でご紹介したように、TypeScript によるフロントエンド / バックエンド統合開発、データモデルや認証・認可ルールの宣言的定義、必要な AWS リソースの自動プロビジョニングなど、Amplify Gen 2 には開発の生産性を大幅に向上させる多くの機能が備わっています。
Amplify Gen 2 を実際に利用してみたい方は、製品ページや Amplify Docuumentation も併せてご覧ください。TypeScript の力を最大限に活用し、よりイノベーティブでスケーラブルなアプリケーションを迅速に開発できるよう、Amplify Gen 2 をぜひご活用ください。
全体図
筆者・監修者プロフィール
筆者プロフィール
米倉 裕基
アマゾン ウェブ サービス ジャパン合同会社
テクニカルライター・イラストレーター
日英テクニカルライター・イラストレーター・ドキュメントエンジニアとして、各種エンジニア向け技術文書の制作を行ってきました。
趣味は娘に隠れてホラーゲームをプレイすることと、暗号通貨自動取引ボットの開発です。
現在、AWS や機械学習、ブロックチェーン関連の資格取得に向け勉強中です。
監修者プロフィール
木村 公哉
アマゾン ウェブ サービス ジャパン合同会社
スタートアップソリューションアーキテクト
香川県出身のソリューションアーキテクトです。普段は ISV/SaaS なお客様の技術支援を担当しています。好きなサービスは AWS Amplify と AWS Lambda、Amazon Kinesis です。好きな食べ物はうどんです。
Did you find what you were looking for today?
Let us know so we can improve the quality of the content on our pages