AWS Amplifyフルスタック開発ガイド【SES案件対応】

「AWSを使ったフルスタック開発をやってみたいが、バックエンドの設定が複雑で手が出せない」——そんな悩みを持つフロントエンドエンジニアは少なくありません。また、SES案件でAWS経験を積みたいけれど、何から始めれば良いかわからないという声もよく聞きます。

AWS Amplify Gen2なら、TypeScriptでバックエンドを定義し、認証・API・ストレージをフロントエンドエンジニアが主導で構築できます。 この記事では、Gen2の実践的な使い方と、SES案件での活かし方を解説します。

AWS Amplify Gen2とは

AWS Amplifyは、AWSのバックエンドサービス（Cognito・AppSync・S3・Lambda等）をフロントエンドから簡単に使えるようにするフルスタック開発フレームワークです。2024年にリリースされた**Gen2（第2世代）**では、開発体験が大きく刷新されました。

Gen1からの進化ポイント

Gen1では amplify init から始まるCLI主導の設定が中心でしたが、Gen2ではすべてTypeScriptのコードとして定義します。

比較項目	Gen1	Gen2
バックエンド定義	CLIウィザード + JSON	TypeScriptコード
型安全性	△ 弱い	◎ 完全な型推論
ローカル開発	△ クラウド依存	◎ Sandboxで高速
カスタマイズ	△ 複雑なオーバーライド	◎ CDKと直接統合
デプロイ管理	amplify push	Git連携で自動

AWS公式ブログでも「Gen2はコードファーストアプローチにより、チームコラボレーションとCI/CDの親和性が大幅に向上した」と説明されています（AWS Amplify Gen2 公式ドキュメント）。

TypeScript-firstなバックエンド定義

Gen2のバックエンド定義は amplify/ ディレクトリ配下に置きます。例えば認証の設定はこのように書けます。

---

プロジェクトセットアップ

Next.js / React / Vueとの初期連携

Amplify Gen2は主要なフレームワークに対応しています。

初期化後に生成される amplify/ ディレクトリ構造:

• amplify/auth/resource.ts — Cognito認証の定義
• amplify/data/resource.ts — AppSync GraphQL APIの定義
• amplify/storage/resource.ts — S3ストレージの定義
• amplify/backend.ts — 全リソースのエントリポイント

Amplify Sandboxによるローカル開発

Gen2最大の改善点の一つがAmplify Sandboxです。npx ampx sandbox を実行すると、開発者専用のAWSリソースがクラウドに自動作成され、コード変更が即座にリアルタイムで反映されます。

Sandboxのメリット:

• チームメンバーそれぞれが独立した開発環境を持てる
• amplify.ts の変更を検知して自動デプロイ
• ローカル開発でも本番同等のAWSサービスをテスト可能
• 開発終了時に npx ampx sandbox delete でリソースを一括削除

---

認証（Cognito）の実装

ソーシャルログインとMFA設定

Amplify Gen2では、Cognitoのソーシャルログインをコード数行で実装できます。

対応ソーシャルプロバイダー:

• Google
• Facebook
• Apple（Apple Sign In）
• Amazon

defineAuth() の loginWith オプションに各プロバイダーの設定を追加するだけで、OAuthフローが自動で構成されます。MFA（多要素認証）もSMS・TOTPアプリの両方に対応しており、セキュリティ要件に応じて選択できます。

カスタム認証フローの構築

標準フローでは対応できない要件には、Lambdaトリガーを使ったカスタム認証フローを構築します。

詳しい認証設計パターンについては AWS Cognito認証ガイド もあわせてご覧ください。

---

APIの構築（AppSync / REST）

GraphQL APIのスキーマ定義と自動生成

Amplify Gen2のData機能では、defineData() でGraphQLスキーマをTypeScriptのモデル定義として記述します。スキーマからフロントエンド向けの型定義・クエリ関数が自動生成されるため、型安全なデータアクセスが実現します。

自動生成されるもの:

• TypeScript型定義（モデルの型、クエリ・ミューテーションの引数/戻り値）
• CRUD操作のクライアント関数（list / get / create / update / delete）
• リアルタイムサブスクリプションのフック（React向け）

モデル定義に authorization を追加するだけで、所有者ベース・グループベース・パブリックなどのアクセス制御を細かく設定できます。

Lambda関数との連携パターン

GraphQLだけでは対応できない複雑なビジネスロジックはLambda関数と連携します。

詳しいLambda連携パターンは AWS Lambdaサーバーレスガイド で解説しています。

---

ストレージとファイル管理（S3）

ファイルアップロードUIの実装

Amplify StorageはS3をバックエンドとしたファイル管理機能を提供します。@aws-amplify/ui-react-storage パッケージを使えば、ドラッグ&ドロップ対応のファイルアップローダーをコンポーネント一つで実装できます。

StorageManagerコンポーネントの主な機能:

• マルチファイルアップロード（並列処理対応）
• アップロード進捗のリアルタイム表示
• ファイルタイプ・サイズのバリデーション
• アップロード前のファイルプレビュー表示
• 画像のリサイズ・圧縮処理（オプション）

アクセス制御と署名付きURL

S3ファイルへのアクセスは、3段階のアクセスレベルで細かく制御できます。

アクセスレベル	用途	URL有効期限
guest	公開コンテンツ（画像・PDF等）	無期限
protected	他のユーザーも参照可能なファイル	署名付きURL
private	アップロードしたユーザーのみ	署名付きURL（デフォルト15分）

機密ファイルの共有には署名付きURLを生成し、有効期限を設定することでセキュアなファイル共有が実現します。詳細は AWS S3ストレージガイド をご参照ください。

---

ホスティングとCI/CD

Amplify Hostingの設定

Amplify Hostingは、フロントエンドアプリのビルド・デプロイ・CDN配信を一元管理するサービスです。

対応するホスティング形式:

• SSG（静的サイト生成）: Next.js / Gatsby / Astro等
• SSR（サーバーサイドレンダリング）: Next.js App Router対応
• SPA（シングルページアプリ）: React / Vue / Angular

CloudFront CDN経由で全世界に配信されるため、高いパフォーマンスと可用性を確保できます。カスタムドメイン・SSL証明書の自動発行も標準で対応しています。

ブランチ別環境の自動デプロイ

GitHubリポジトリとAmplify Hostingを接続すると、ブランチへのプッシュをトリガーに自動でビルド・デプロイが走ります。PRごとにプレビュー環境URLが自動生成されるため、レビュアーがブランチをローカルに取り込まなくても動作確認できます。

---

SES案件でAmplifyスキルを活かすには

需要の高い案件パターン

AWS Amplifyのスキルは、以下のような案件で特に重宝されます。

特に「フロントエンドエンジニアだがバックエンドも触れる」という人材は、Amplifyスキルを軸にフルスタックポジションへのシフトが狙いやすくなっています。

スキルシートへの記載例

SES案件の商談では、Amplifyの経験を具体的に記載することが重要です。

「AWS経験あり」と記載するより、具体的なサービス名・期間・実装内容を記載することで、案件マッチング率が大きく向上します。

---

まとめ

AWS Amplify Gen2によるフルスタック開発のポイントをまとめます。

• TypeScript-first: バックエンドをコードで定義することで型安全性とgit管理を実現
• Sandbox開発: クラウドリソースをローカル変更に連動させた高速な開発体験
• 認証: Cognitoによるソーシャルログイン・MFA・カスタムフローを簡単実装
• API: AppSync GraphQLで型安全なデータアクセスとリアルタイム通信
• ストレージ: S3のアクセス制御と署名付きURLで安全なファイル管理
• CI/CD: ブランチ連動デプロイとプレビュー環境で開発速度を向上

Amplifyはフロントエンドエンジニアがフルスタックに踏み出す最良の入り口です。SES案件でも需要が高く、スキルを持つことで案件の幅と単価を広げられます。