Amplify Gen2でフルスタック爆速開発体感

こんにちは～浮田です。 

今回はAmplifyについて少し勉強したので備忘録として記録しておきます。 

AWS Amplifyとは? 

AmplifyはAWSが提供するフルスタック開発プラットフォームです。 

フロントエンドエンジニアでも、バックエンドのインフラを意識せずに本格的なWebアプリが作れる便利なツールです。 

従来は CLI ベースの対話形式で構築する「Gen 1」でしたが、Gen 2 では 
TypeScript 記述中心の IaC（Infrastructure as Code）スタイル に進化しました。

● Amplify を使うメリット 

• バックエンドの構築が不要
• 初心者でもAWSのベストプラクティスが使える 
• CI/CD・セキュリティ設定が標準装備
• アプリを短期間で作れる

Amplifyの特徴は 

「差別化しにくい、でも必須の機能」 を素早く実装できること！ 

認証やファイルアップロード、CRUD操作などなど Amplifyは開発者がインフラやセキュリティの詳細を気にせず ビジネス価値の創造に集中できる環境を提供してくれます 

Node.jsの事前準備  

node -v 

npm -v

１．Amplify CLIのインストール

まずはAmplify CLIをグローバルにインストールします。 

npm install -g @aws-amplify/cli 

インストール確認 
amplify -v 

２．Amplify CLIの初期設定

AWSアカウントと連携させます。（初回のみ） 

amplify configure 

アクセスキーを設定 

必要な情報： 

• AWS Access Key ID 
• Secret Access Key 

Reactのプロジェクトを作成する。 

npx create-react-app amplify-demo 

cd  amplify-demo 

プロジェクトにライブラリをインストール 

npm install aws-amplify @aws-amplify/ui-react 

Amplify プロジェクトの雛形を作る “テンプレ生成コマンド” 

npm create amplify@latest 

エンター押下でOK！ 

すると以下のAmplifyプロジェクトが生成されます 

プロジェクトを初期化します 

npx ampx init 

これで準備は完了です 

本番環境へのデプロイはこのコマンドでできます 

npx ampx deploy 

Amplify Sandbox（サンドボックス）とは？ 

これが、Gen 2 の隠れた主役。 

● サンドボックスとは： 

ローカルでコードを書くだけで、 
Amplify Backend が “一時的に” 自動デプロイされる開発専用クラウド環境。 

これ、めちゃくちゃ便利です。 

起動コマンドはこれ 

npx ampx sandbox 

● サンドボックスの特徴 

• コードを保存すると 即座にローカルでバックエンドを再生成 
• デプロイ不要 → 爆速で試せる 
• 「このスキーマでDBどうなる？」をコード書いた瞬間に確認 
• 認証やAPIの変更も 1秒以内で反映 
• 24時間のアイドルタイムで自動削除 

開発者が削除し忘れてもコストが膨らまない実際のAWSサービスのリソースをしようしているので正確なテストができる！ 

（従量課金はそのまま課金されます） 

 Amplify Gen2 の特徴がここです。 
バックエンドの設定は、resource.ts に書くだけです 

これは認証のバックエンドの例です。 

上記はメール認証を用いてユーザー名の入力も必須にするという設定の例です。 

フロントエンドのファイルには以下のように書きます。 

<Authenticator> 

  {({ signOut, user }) => ( 
    // ここに認証後に表示したいコンテンツ 
  )} 

</Authenticator> 
 

<Authenticator> のタグで認証が必要な部分を囲むだけで以下を実装してくれます。 

裏ではAWSのCognitoが動いてくれているのでセキュリティも安心ですね。 

ログインフォーム 
新規登録フォーム 
メール認証画面 
パスワードリセット画面 

このような画面がこれだけで実装できちゃいます。 

今回作成したミニSNSアプリはこんな感じに作成しました。 

機能 

• ユーザー認証

• 投稿作成 削除(投稿・いいね/コメント)

• 画像アップロード 

技術スタック 

• React＋Amplify UI

• AWSAmplify Gen2

• Cognito/AppSync
  DynamoDB/S3 

構成図はこのように考えました。 

フロントエンドはReactで構築し、裏ではAWSリソースが動いているという構成という形です。 

認証画面 

投稿作成画面 

投稿が一覧でみれるタイムライン

DBやAPIなども　resourse.tsに書くだけで構築できます。 

書くのは２つだけ。 

・何を保存したいか 

・誰がアクセスできるか（認可ルール） 

● Amplify が生成してくれるもの 

DynamoDBテーブル 

AppSync　API　 

Lambda  

IAM 

AmplifyがなぜLambda Resolverを選ぶのか 

Lambda Resolver 

AppSync → Lambda → DynamoDB 

特徴： 

• 柔軟性が高い 
• 複雑な認可ルールが実装できる 

できること： 

// 複雑な認可 　作成者のみ編集や削除可能（allow.owner()） 

 コード

この認可ルールを実装するには... 

❌ Direct Resolverでは不可能 

AppSync → DynamoDB

問題: 

• ownerフィールドの自動設定ができない

• ownerチェックができない

• 認証済みユーザーの読み取り制限ができない 

● Lambda Resolverなら可能 

AppSync → Lambda → DynamoDB

Lambdaで実装: 

1. Cognitoトークンを検証 

2. ownerフィールドを自動設定 
   

3. ownerチェック
   

4. 認証済みユーザーの読み取り制限

開発者は“意図”を書く。インフラは Amplify が全自動。 

● Amplifyがやってくれること 

1. コード解析：コードを解釈 
2. CDK生成：Infrastructure as Codeに変換 
3. CloudFormation生成：AWSが理解できる形式に変換 
4. デプロイ：実際のAWSリソースを作成 

● Gen2 のいいところは：

「対応するファイルのresourse.tsにコードで書くと自動で裏側の AWS が構築される」 

対応ファイルは以下のような感じです。 

• Auth → Cognito 
• Data → DynamoDB + AppSync（GraphQL / Data API） 
• Storage → S3 
• Functions → Lambda 

余談 

AmplifyにはUI　Reactコンポーネントが用意されており、フロントエンドも簡単に構築できます。 

こんな感じのUIコンポーネントが用意されているので気軽にアプリなどを構築できます 

主要コンポーネント紹介

まとめ 

Amplify Gen2 を使ったミニSNSアプリづくりは、フロントとバックエンドを一貫して “コードで管理できる快適さ” を強く感じられる体験でした。 

認証やデータベース、API などの追加もプロジェクト内のコードに書くだけで自動反映されるため、まさに「コードを書く＝クラウドが構築される」という新しい開発スタイルを実感できました。 

Amplifyは“手を動かすと理解が速い”サービス 

だと感じました。 

ぜひ皆さんも爆速開発してみてください。