Webアプリケーション開発において、フロントエンドだけでなくバックエンドも含めたフルスタック開発は複雑になりがちです。
そんな中、AWSが提供するAmplify Gen2は、TypeScriptを使ってフロントエンドからバックエンドまで一貫して開発できる画期的なサービスとして注目を集めています。
この記事では、IT初心者の方でもAmplify Gen2の基本から実際の使い方まで、わかりやすく解説していきます。
Amplify Gen2とは？従来のGen1との違いを理解しよう
AWS Amplifyの基本概念
AWS Amplifyは、Webアプリケーションやモバイルアプリケーションを効率的に開発・デプロイするためのAWSサービスです。
認証、データベース、ファイルストレージなどのバックエンド機能と、静的サイトホスティングなどのフロントエンド機能を統合的に提供します。
Gen1からGen2への進化
現在、Amplifyには「Gen1」と「Gen2」の2つのバージョンが存在します。
Amplify Gen1の特徴：
- Amplify CLIを使用したコマンドベースの開発
amplify init、amplify addなどのコマンドで対話的にリソースを作成- JSONベースの設定ファイル
- Amplify Studioによるビジュアル開発
Amplify Gen2の特徴：
- TypeScriptベースのコードファーストな開発体験
- AWS CDK（Cloud Development Kit）を基盤とした柔軟な拡張性
- リアルタイムでバックエンドが更新されるサンドボックス機能
- 統合された開発者コンソール
なぜGen2が推奨されるのか
2024年5月にGen2が正式リリースされて以降、新規プロジェクトではGen2の使用が強く推奨されています。その理由は以下の通りです：
- 開発効率の向上：TypeScriptで統一された開発体験
- 拡張性の向上：AWS CDKによる柔軟なカスタマイズ
- 安定性の向上：デプロイの失敗が少なく、運用が安定
- チーム開発の最適化：開発者ごとの独立したサンドボックス環境
Amplify Gen2の主要機能とメリット
1. TypeScriptによるフルスタック開発
Gen2では、フロントエンドからバックエンドまでのすべての設定をTypeScriptで記述できます。
これにより、型安全性が保たれ、開発効率が大幅に向上します。
2. サンドボックス機能
開発者ごとに独立したクラウド環境（サンドボックス）を簡単に作成できます。
コードの変更がリアルタイムでクラウド環境に反映されるため、「コードを変更したら即座に反映」という体験が実現できます。
3. 統合されたAmplifyコンソール
新しいAmplifyコンソールでは、以下の機能を一元管理できます：
- ビルド・デプロイ設定
- ユーザー管理
- データベース管理
- 環境変数・シークレット管理
- カスタムドメイン設定
4. Git連携によるCI/CD
GitHubなどのリポジトリと連携することで、コードをプッシュするだけで自動的にビルド・テスト・デプロイが実行されます。
React + Vite + TypeScriptでAmplify Gen2プロジェクトを始める方法
多くの記事ではGitHubテンプレートを使った方法が紹介されていますが、ここでは一から自分でプロジェクトを作成する方法を解説します。
前提条件
以下の環境が必要です：
- Node.js 18.19.0以上
- AWS CLIがインストール・設定済み
- AWSアカウント
ステップ1: React + Vite + TypeScriptプロジェクトの作成
まず、Viteを使ってReactプロジェクトを作成します：
# React + TypeScript + Viteプロジェクトの作成
npm create vite@latest my-amplify-app -- --template react-ts
cd my-amplify-app
# 依存関係のインストール
npm install以下の記事も参考にしてください。
ステップ2: Amplify関連パッケージのインストール
# Amplify関連パッケージのインストール
npm install aws-amplify @aws-amplify/ui-reactステップ3: Amplifyプロジェクトの初期化
既存のReactプロジェクト内でAmplifyを初期化します：
# Amplifyプロジェクトの初期化
npm create amplify@latestこのコマンドを実行すると、amplifyフォルダが作成され、以下のファイルが生成されます：
amplify/backend.ts– バックエンドの定義ファイルamplify/auth/resource.ts– 認証設定amplify/data/resource.ts– データ設定
ステップ4: バックエンドの基本設定
amplify/backend.tsを編集してバックエンドを定義します：
import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { data } from './data/resource';
defineBackend({
auth,
data,
});ステップ5: 認証設定の構成
amplify/auth/resource.tsで認証設定を行います：
import { defineAuth } from '@aws-amplify/backend';
export const auth = defineAuth({
loginWith: {
email: true,
},
});
ステップ6: データベース設定の構成
amplify/data/resource.tsでデータベーススキーマを定義します：
import { type ClientSchema, a, defineData } from '@aws-amplify/backend';
const schema = a.schema({
Todo: a
.model({
content: a.string(),
done: a.boolean(),
})
.authorization([a.allow.owner()]),
});
export type Schema = ClientSchema<typeof schema>;
export const data = defineData({
schema,
authorizationModes: {
defaultAuthorizationMode: 'userPool',
},
});ステップ7: Amplifyの設定をReactアプリに統合
Viteで作成されたReactアプリケーションにAmplifyを統合します。
src/main.tsxを以下のように編集：
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { Amplify } from 'aws-amplify'
import outputs from '../amplify_outputs.json'
// Amplifyの設定
Amplify.configure(outputs)
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)ステップ8: サンドボックス環境の起動
開発用のサンドボックス環境を起動します：
npx ampx sandboxこのコマンドを実行すると：
- AWSにバックエンドリソースが自動作成される
amplify_outputs.jsonファイルが生成される- コードの変更がリアルタイムで反映される
本番環境へのデプロイとGitHub連携
ローカル開発が完了したら、本番環境にデプロイしましょう。
Amplify Gen2では、GitHubリポジトリと連携することで自動的にCI/CDパイプラインが構築されます。
GitHub連携とデプロイの詳細な手順については、こちらの記事をご参照ください：
簡単な流れは以下の通りです：
- プロジェクトをGitHubにプッシュ
- AWSコンソールでAmplifyアプリを作成
- GitHubリポジトリと連携
- 自動ビルド・デプロイの設定
実際の開発で押さえておきたいポイント
1. サンドボックスの活用
サンドボックス機能により、各開発者が独立した環境で作業できます。
他の開発者の作業に影響されることなく、安心して開発・テストが行えます。
2. TypeScriptの型安全性
Gen2では、バックエンドで定義したスキーマから自動的にTypeScriptの型が生成されます。
これによりフロントエンドでもタイプセーフな開発が可能になります。
3. リアルタイム更新
コードを保存すると自動的にクラウド環境に反映されるため、「コードを変更→デプロイ→確認」のサイクルが劇的に短縮されます。
4. CDKによる拡張
標準機能では対応できない要件がある場合、AWS CDKを使って柔軟に拡張できます。
まとめ
Amplify Gen2は、TypeScriptベースのコードファーストな開発体験により、フルスタックアプリケーション開発を大幅に効率化してくれます。Gen1からの大きな進歩により、より柔軟で安定した開発が可能になりました。
特に以下のような場面でAmplify Gen2は威力を発揮します：
- スタートアップでの迅速なプロトタイプ開発
- チーム開発での環境分離
- TypeScriptを活用した型安全な開発
- AWSサービスとの柔軟な統合
これからWebアプリケーション開発を始める方、既存のGen1からの移行を検討している方は、ぜひAmplify Gen2を試してみてください。
コードファーストな開発体験が、あなたの開発効率を劇的に向上させるはずです。
