フルスタック TypeScript 開発環境

AWS Amplify Gen 2 をグラレコで解説

2024-11-01

AWS グラレコ解説

Author : 米倉裕基 (監修 : 木村公哉)

はてブ »

本記事では、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 の料金体系

それでは、項目ごとに詳しく見ていきましょう。

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 の主要な違い

2024 年 5 月に、Amplify Gen 2 の一般提供を開始しました。Amplify Gen 2 は、従来の Amplify Gen 1 からさらに進化を遂げ、TypeScript によるフロントエンドとバックエンドのより一貫したフルスタック開発が可能になりました。

Gen 1 と Gen 2 の主な相違点

Gen 2 になり、バックエンドの設定を TypeScript と AWS CDK (Cloud Development Kit) を使ってコード化できるようになったことで、Gen 1 に比べてより開発者フレンドリーかつコードファーストな環境が実現しています。

機能	Amplify Gen 1	Amplify Gen 2
バックエンド構築	Amplify CLI を用いた設定	AWS CDK と TypeScript を使用したコードファーストアプローチ
カスタマイズ性	基本的なカスタマイズ機能	AWS CDK を活用した高度なバックエンドカスタマイズ
CI/CD	基本的な CI/CD パイプラインをサポート	ブランチベースのデプロイや環境別設定が可能
サンドボックス環境	チーム間で共有のサンドボックス	開発者ごとに独立したクラウドサンドボックス環境
UI コンポーネント	基本的な UI コンポーネントを提供	新しい React UI コンポーネントライブラリが追加
セキュリティ	標準的の認証・認可機能	強化された認証とアクセス制御

Amplify Gen 2 は、TypeScript と AWS CDK を活用したコード化アプローチにより、Gen 1 からのフロントエンドとバックエンドの統合開発を支援する設計思想を継承しつつ、型安全性とカスタマイズ性をさらに高めています。

その他、Amplify Gen 1 と Amplify Gen 2 の相違点について詳しくは、Amplify Documentation の「Gen 2 for Gen 1 customers」をご覧ください。

Amplify Gen 2 の主要機能

Amplify Gen 2 には、主に以下のような機能を提供します。

統合管理コンソール
Amplify コンソールで、ビルド、ホスティング設定、デプロイ済みリソース、環境変数・シークレットを一元管理できます。データ、認証、ストレージなどの主要カテゴリに関しては、Amplify コンソール上で詳細な操作が可能です。
TypeScript ベースのフルスタック開発
Amplify Gen 1 では、Amplify Studio や CLI を使ってインフラをプロビジョニングしていましたが、Amplify Gen 2 では、TypeScript を使ってバックエンドインフラをコード化できます。データモデル、API、認証などを TypeScript で宣言的に定義するだけで、対応する AWS リソースが自動的にプロビジョニングされます。
高速なローカル開発環境
Amplify Gen 2 では、開発者ごとに分離されたクラウドサンドボックス環境を用意できます。各開発者は独立した環境で変更をテストでき、他の開発者の環境に影響を与えることがありません。
Git ベースのフルスタック環境
本番、ステージングなどの共有環境は、Git リポジトリの各ブランチに対応します。フィーチャーブランチでプレビューでき、本番へマージする前に検証できます。バックエンドリソースはコード化されているので、ブランチ間での再現性と移植性が確保されています。

その他、Amplify Gen 2 の概要について詳しくは、製品ページの「概要」ページをご覧ください。

フルスタック TypeScript 開発

Amplify Gen 2 の核となる特徴として、TypeScript をフロントエンド、バックエンドの共通言語として利用し、フルスタック開発を実現できる点が挙げられます。

TypeScript とは

TypeScript は、静的型付け機能を備えた JavaScript の拡張言語です。コード内の変数やオブジェクト、関数の引数や戻り値などにデータ型を明示的に宣言することで、コンパイル時にエラーをチェックし、型の不整合を検出できます。TypeScript は現在、Angular、React、Vue.js などの人気フレームワーク・ライブラリでも広く採用されています。

const number: number = 42; // 数値型を明示
const isTrue: boolean = false; // 論理型を明示

console.log(number + isTrue); // 型の不一致によりエラー発生

Amplify Gen 2 では、TypeScript でフロントエンド/バックエンドで型定義を共有でき、コードの再利用性が高まります。さらに、コード補完、自動リファクタリングなど高度なツール支援により、開発者の生産性が大幅に向上します。

フルスタック構成

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 install

2. ローカル環境の設定
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 を含む必要なパッケージが指定されています。マニュアルインストールで環境を構築する際は、以下のコマンドを実行して必要なパッケージをインストールします。

// npmの場合
npm install @aws-amplify/ui-react aws-amplify
// yarnの場合
yarn add @aws-amplify/ui-react aws-amplify

@aws-amplify/ui-react パッケージを JSX コード内でインポートすることで、様々な UI コンポーネントを利用できます。

画像をクリックすると拡大します

Primitive components

Primitive components には、ボタン、入力フィールド、レイアウトグリッドなど、レイアウトに関連する UI パターンを実装したコンポーネントが多数揃っています。

主な UI コンポーネントは以下の通りです。

カテゴリー	説明	コンポーネント
基本コンポーネント	区切り線やアイコンなどの基本的な UI 要素	Divider、Heading、Icon、Image、ScrollView、Text、View
フィードバックコンポーネント	ユーザーへの警告やローディング状況などのフィードバックを提供	Alert、Loader、Message、Placeholder
ナビゲーションコンポーネント	リンクやタブ、メニューなどでアプリ内の移動を支援する UI 要素	Breadcrumbs、Link、Menu、Tabs
入力コンポーネント	ボタンやチェックボックス、入力フィールドなどでデータ入力を行う UI 要素	Autocomplete、Button、CheckboxField、DropZone、Fieldset など
レイアウトコンポーネント	アコーディオンやカード、グリッドなどで UI の配置を制御	Accordion、Card、Collection、Flex、Grid、Pagination、Table
データ表示コンポーネント	アバターやバッジ、レイティングなどでデータを表示	Avatar、Badge、Rating
ユーティリティコンポーネント	ハイライトやスクリーンリーダー対応などの補助的な機能を提供	HighlightMatch、VisuallyHidden

アイコンや、ボタン、ナビゲーションなど豊富なレイアウト UI パターンを揃えています。開発者はこれらのコンポーネントを自在に組み合わせることで、多彩なニーズに対応した UI を素早く構築できます。

Connected components

Connected components は、UI コンポーネントから AWS サービスの機能を直接呼び出すことができます。サービス連携コンポーネントを使うことで、認証・認可、チャット、サブスクリプションなどの機能に対応する AWS サービスを呼び出す UI を簡単に実装できます。

主なサービス連携コンポーネントは以下の通りです。

カテゴリー	説明	コンポーネント	連携サービス
認証	ユーザー認証フローの UI/ ロジックを提供。登録、サインイン、MFA に対応。	Authenticator	Amazon Cognito
アカウント管理	アカウント設定を管理する UI。パスワード変更、アカウント削除など。	AccountSettings	Amazon Cognito
生体認証	Amazon Rekognition Face Liveness と連携し、なりすましユーザーを検出。	FaceLivenessDetector	Amazon Rekognition
Geo	対話型の地図 UI と位置検索機能を提供。	MapView、LocationSearch	Amazon Location Service
ストレージ	ユーザーコンテンツを Amazon S3 で管理するための UI。	StorageImage、FileUploader	Amazon S3
メッセージング	アプリ内メッセージングの UI を提供。アプリ内でメッセージを表示。	InAppMessagingProvider、InAppMessageDisplay	Amazon Pinpoint

サービス連携コンポーネントを使えば、開発者は AWS サービスの詳細を意識せずに、UIコンポーネントからクラウドの機能を活用できます。UIとバックエンドの分離が実現し、開発効率が大幅に向上します。

コンポーネントの実装

UI コンポーネントやサービス連携コンポーネントの実装は、一般的な React コンポーネントと同じく、該当のコンポーネントをインポートして JSX で記述します。

// Reactをインポート
import React from 'react';
// AWS Amplifyをインポート
import { Amplify } from 'aws-amplify';

// Authenticator コンポーネントとスタイルをインポート
import { Authenticator, Heading, Button } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

// aws-exportsファイルからAWS設定をインポート
import awsExports from './aws-exports';
Amplify.configure(awsExports);

export default function App() {
  return (
    // Authenticatorコンポーネントを使用
    <Authenticator>
      {/* Authenticatorの子コンポーネントとしてレンダリング */}
      {/* signOutとuserプロパティを受け取る */}
      {({ signOut, user }) => (
        <main>
          {/* ユーザー名を表示 */}
          <Heading level={1}>Hello {user.username}</Heading>
          {/* サインアウトボタンを表示 */}
          {/* クリックするとsignOut関数が呼び出される */}
          <Button onClick={signOut}>Sign out</Button>
        </main>
      )}
    </Authenticator>
  );
}

上記のコード例では、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 では、開発者ごとに独立した一時的な「クラウドサンドボックス環境」を作ることができます。このサンドボックス環境は、本番環境とは切り離された実験的な環境で、フロントエンド/バックエンドの本番と同等のリソース構成が含まれています。

サンドボックス環境の利点は、npm run dev で起動したローカルホストの開発環境での変更をリアルタイムでサンドボックスに反映でき、実践的な環境で安全に検証できる点にあります。他のメンバーの作業に影響を与えずに自由に変更を加えられます。

サンドボックスの作成と利用

サンドボックス環境の作成後、ローカル開発環境とサンドボックス環境を併用しながら開発を進めます。ローカル環境でフロントエンドの変更を行い、その変更内容をサンドボックス環境のバックエンドリソースで確認するのが一般的な利用方法です。

サンドボックス作成
ローカルの Amplify プロジェクトディレクトリで、ターミナルから npx ampx sandbox コマンドを実行します。
プロビジョニング
amplify/ フォルダ下の各種設定に基づき、AWS CloudFormation スタックがプロビジョニングされ、サンドボックス環境が作成されます。
ローカル開発環境の起動
プロジェクトディレクトリで npm run dev を実行し、アプリをローカルホストで起動します。
バックエンドの変更
amplify/ フォルダ内のアプリケーションコードやバックエンド定義ファイルを変更します。
リアルタイムで反映
変更を保存すると、ホットスワップ機能により、npm run dev で起動したローカルホストの開発環境での変更がリアルタイムでサンドボックス環境に反映されます。また、バックエンド設定を含む amplify_outputs.json ファイルも更新されます。
サンドボックスの終了
Ctrl+C でサンドボックス環境を終了できます。終了時に、リソースを保持するか削除するかを選択できます。

クラウドサンドボックス環境で、開発者は安全にフルスタックアプリの構築、テスト、反復作業を行えます。他のメンバーの作業に影響を与えることなく、自由に変更を加えられます。

サンドボックスには、フロントエンドのホスティング環境に加えて、データベース、API、ストレージなどのバックエンドリソースが含まれています。開発中の変更をローカル環境だけでなく、クラウド上の分離された実践的な環境で検証できるため、本番環境への影響を最小限に抑えられます。

Amplify Gen 2 のクラウドサンドボックス環境について詳しくは、Amplify Documentation の「Cloud sandbox environments」をご覧ください。

フルスタックワークフロー

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 Hosting では、新規ユーザーを対象に以下の無料利用枠が提供されています。

利用期間 12 ヶ月間無料
新規の Amplify Gen 2 ユーザーは、アカウント作成から 12 ヶ月間、基本的な利用料金が無料になります。この期間中は開発環境の構築や、小規模なアプリの運用などを実質的にコストをかけずに行えます。
ビルド・デプロイ月間 1,000 ビルド分まで無料
アプリのビルド・デプロイ作業について、月間 1,000ビルド分までは無料で行えます。ビルド時間に上限はなく、1,000 ビルドを超えた分のみ従量課金の対象となります。

従量課金対象の項目

無料利用枠の範囲を超えた場合に、以下の項目で従量課金で料金が発生します。

項目	無料利用枠	従量課金料金	補足事項
アプリデプロイ	12 か月間無料	使用リソース分の料金	Amplify Gen 2 で使用する AWS リソースの種類と量に応じて決まります。
ビルド・デプロイ時間	月 1,000 ビルド分まで	1 分あたり 0.01 ドル	ビルド・デプロイ時間の無料利用枠は、ビルド 1 回あたりの時間に上限はありません。
データストレージ (CDN)	月 5GB まで	1GB あたり 0.023 ドル	Amplify Hosting を利用した際の CDN ストレージ分に対して課金されます。
データ転送 (OUT)	月 15GB まで	1GB あたり 0.15 ドル	データ転送 (OUT) の料金は、ユーザーから CDN への転送データ量には課金されません。CDN から外部へ転送されたデータ量のみが対象です。
リクエスト数 (SSR)	月 50 万件まで	100 万リクエストあたり 0.30 ドル	月間 50 万件を超えた場合、100 万リクエストあたり 0.30 ドルが課金されます。
リクエスト期間 (SSR)	月 100GB 時間まで	1 時間あたり 0.20 ドル	サーバーサイドレンダリング処理に要した時間の合計に対して行われます。

想定外のコスト発生を防ぐために、無料利用枠を超えた場合の従量課金ルールを確認し、想定コストを予測することが重要です。

その他、Amplify Hosting の料金について詳しくは、「AWS Amplify の料金」をご覧ください。

Amplify Gen 2 のバックエンドリソース料金

Amplify Gen 2 のフロントエンドアプリは、Amplify Hosting だけでなく Amazon Cognito、AWS AppSync、Amazon DynamoDB、AWS Lambda など、様々な AWS サービスと連携できます。これらのサービス利用には、それぞれの料金体系に基づく課金が別途発生します。

サービス	関連機能	内容
Amazon Cognito	認証	Amplify Gen 2 のユーザー認証機能で利用します。
AWS AppSync	API	Amplify Gen 2 のバックエンド API の構築に利用します。
Amazon DynamoDB	データベース	Amplify Gen 2 のデータ永続化に利用します。
AWS Lambda	サーバーレス関数	Amplify Gen 2 のカスタムロジックの実装に Lambda 関数が利用します。
Amazon S3	ストレージ	Amplify Gen 2 のコンテンツ配信などに S3 のストレージが利用します。

Amplify Gen 2 自体に料金はかからないものの、本格的な利用時には Amplify Hosting の料金とバックエンドで利用する AWS サービスの料金を含めてトータルコストを予測する必要があります。

なお、本記事の各種料金は、2024 年 11 月現在のものです。今後変更になる可能性がありますので、最新の料金情報は製品ページの「AWS Amplify の料金」を確認することをお勧めします。

まとめ

最後に、本記事で紹介した機能の全体図を見てみましょう。

画像をクリックすると拡大します

本記事でご紹介したように、TypeScript によるフロントエンド / バックエンド統合開発、データモデルや認証・認可ルールの宣言的定義、必要な AWS リソースの自動プロビジョニングなど、Amplify Gen 2 には開発の生産性を大幅に向上させる多くの機能が備わっています。

Amplify Gen 2 を実際に利用してみたい方は、製品ページや Amplify Docuumentation も併せてご覧ください。TypeScript の力を最大限に活用し、よりイノベーティブでスケーラブルなアプリケーションを迅速に開発できるよう、Amplify Gen 2 をぜひご活用ください。

AWS グラレコ解説のその他の記事はこちら

builders.flash メールメンバーへ登録することで
AWS のベストプラクティスを毎月無料でお試しいただけます

メンバー特典を受け取る »

筆者プロフィール

米倉裕基
アマゾンウェブサービスジャパン合同会社
テクニカルライター・イラストレーター

日英テクニカルライター・イラストレーター・ドキュメントエンジニアとして、各種エンジニア向け技術文書の制作を行ってきました。
趣味は娘に隠れてホラーゲームをプレイすることと、暗号通貨自動取引ボットの開発です。
現在、AWS や機械学習、ブロックチェーン関連の資格取得に向け勉強中です。

監修者プロフィール

木村公哉
アマゾンウェブサービスジャパン合同会社
スタートアップソリューションアーキテクト

香川県出身のソリューションアーキテクトです。普段は ISV/SaaS なお客様の技術支援を担当しています。好きなサービスは AWS Amplify と AWS Lambda、Amazon Kinesis です。好きな食べ物はうどんです。

X ポスト »

はてブ »

AWS を無料でお試しいただけます

AWS 無料利用枠の詳細はこちら ≫

5 ステップでアカウント作成できます

無料サインアップ ≫

ご不明な点がおありですか?

日本担当チームへ相談する

AWS Amplify Gen 2 をグラレコで解説

X ポスト »

シェア »

はてブ »

AWS Amplify Gen 2 とは

Gen 1 と Gen 2 の主要な違い

Gen 1 と Gen 2 の主な相違点

Amplify Gen 2 の主要機能

フルスタック TypeScript 開発

TypeScript とは

フルスタック構成

TypeScript による宣言的定義

Amplify Gen 2 の導入方法

事前準備

スターターアプリのデプロイ

フロントエンドのカスタマイズ

バックエンドのカスタマイズ

UI コンポーネントの活用

Amplify UI のインストール

Primitive components

Connected components

コンポーネントの実装

バックエンド開発の効率化

バックエンドのデータモデル定義

バックエンドリソースの自動生成

AWS CDK による AWS リソースのプロビジョニング

GraphQL ベースのデータ操作

開発体験を重視した機能

Amplify Hosting によるホスティング

ホスティング可能なウェブサイト/アプリ

その他の主要な特徴

クラウドサンドボックス環境

サンドボックスの作成と利用

フルスタックワークフロー

CI/CD ワークフロー

モノレポ (Monorepo) ワークフロー

堅牢なセキュリティ対策

アプリケーションレベルのセキュリティ対策

AWS サービスによる包括的なセキュリティ

Amplify Gen 2 の料金体系

Amplify Hosting の料金

無料利用枠

従量課金対象の項目

Amplify Gen 2 のバックエンドリソース料金

まとめ

AWS グラレコ解説のその他の記事はこちら

筆者プロフィール

監修者プロフィール

X ポスト »

シェア »

はてブ »

Internet Explorer のサポートの終了