AWS Amplify で始めるフルスタック Web アプリ開発 - Git 連携デプロイとバックエンド構築
GitHub 連携でブランチごとの自動デプロイ環境を構築し、Backend Gen 2 で認証 / API / ストレージを TypeScript で定義する。Next.js の SSR にも対応します。
Amplify の概要
Amplify はフルスタック Web / モバイルアプリケーションの構築とホスティングを統合するサービスです。Amplify Hosting は Git リポジトリと連携した CI/CD とグローバル CDN ホスティングを提供し、Amplify Backend (Gen 2) は認証、API、ストレージなどのバックエンドリソースを TypeScript と CDK で定義 / デプロイします。Vercel や Netlify と比べた場合の違いの一つは、AWS サービスとのネイティブ統合 (Cognito、AppSync、DynamoDB) です。React、Next.js、Vue、Nuxt、Angular など主要フレームワークに対応し、SSR と SSG の両方をサポートします。
Hosting と Backend
Amplify Hosting に GitHub リポジトリを接続すると、ブランチごとに自動デプロイの環境が用意されます。main ブランチは本番環境、develop ブランチはステージング環境として運用できます。Amplify Backend は TypeScript でバックエンドリソースを定義します。認証は Cognito User Pool、API は AppSync (GraphQL) または API Gateway (REST)、ストレージは S3 バケットが自動構築されます。npx ampx sandbox コマンドで開発者ごとの独立したバックエンド環境を起動でき、チーム開発での環境競合を防止します。
カスタムドメインと SSR
Amplify Hosting はカスタムドメインの設定と SSL 証明書の自動発行を提供します。 Route 53 のドメインを接続すると DNS 設定が自動構成されます。 SSR (Server-Side Rendering) は Next.js と Nuxt に対応しています。プレビューを有効にしたブランチでは、プルリクエストごとにプレビュー環境が作られ、レビュー後にマージすると本番環境に自動デプロイされます。環境変数はブランチごとに設定でき、開発 / ステージング / 本番で異なる API エンドポイントを使い分けられます。
Amplify の料金
Amplify Hosting のビルド料金は 1 分あたり約 0.01 ドルで、ホスティングは 1 GB あたり月額約 0.023 ドル、SSR のリクエストは 100 万リクエストあたり約 0.30 ドルです (2026 年 10 月時点)。SSR では、リクエストの数に加えて処理時間 (GB 時間) にも料金がかかります。AWS 無料利用枠の対象になる範囲は、アカウントの作成時期と枠の種類で変わります。Amplify Backend (Gen 2) は使用する AWS サービス (AppSync、DynamoDB、Cognito、S3) の個別料金が適用されます。ビルドキャッシュを使うとビルド時間が短くなり、ビルド料金を抑える助けになります。
代表的なユースケース
Amplify が特に向くのは、フロントエンドとバックエンドを一体で素早く立ち上げたいケースです。React や Next.js の SPA / Jamstack サイトを Git への push だけで公開する用途では、CDN 配信と CI/CD がセットで手に入ります。認証付きの会員サイトやダッシュボードのようなフルスタックアプリでは、Cognito による認証と AppSync の GraphQL API を TypeScript の定義から構築できます。スタートアップの MVP 開発や、社内向けツールの短期構築のように、インフラ構築の工数を抑えたい場面でも使いやすい選択肢です。
Backend Gen 2 の開発スタイル
Backend Gen 2 は、バックエンドリソースを TypeScript のコードとして宣言します。defineAuth、defineData、defineStorage といった関数でリソースを定義すると、内部で CDK に変換されてデプロイされます。標準機能で足りない部分は CDK のコンストラクトを直接記述して拡張できるため、Amplify の手軽さと CDK の柔軟性を両立しやすくなります。npx ampx sandbox を起動すると、開発者ごとに隔離されたクラウド環境が用意され、ローカルのコード変更がクラウドのリソースに反映されます。チーム開発での環境競合を避けながら、本番に近い構成で検証できます。
ビルドとブランチ戦略のベストプラクティス
Amplify のビルド手順は amplify.yml で宣言的に定義します。preBuild / build / postBuild の各フェーズにコマンドを指定し、依存パッケージのインストールやテスト実行を組み込めます。ブランチ戦略では、本番ブランチとステージングブランチを分け、プルリクエストのプレビュー環境でレビューしてから本番ブランチへ取り込む進め方があります。環境変数はブランチ単位で設定し、API エンドポイントやフィーチャーフラグを環境ごとに切り替えます。モノレポ構成の場合はアプリのルートディレクトリを指定して対象を絞り込み、ビルドキャッシュを有効にすると依存パッケージの再取得を避けてビルド時間を短縮できます。
他のホスティング方式との使い分け
AWS 内でも Web ホスティングの選択肢は複数あります。静的サイトやシンプルな SPA で、CI/CD を自前で組んでも構わない場合は、S3 と CloudFront の構成が、費用を抑えやすく細かな制御も利きます。一方、コンテナで動く API サーバーを常時稼働させたい場合は ECS か、既に利用している場合は App Runner (新規顧客の受け付けを終了) が候補になり、これらは Amplify の責務範囲外です。Amplify は、フロントエンドのデプロイ自動化とバックエンドのコード定義をワンストップで扱いたい場合に合います。要件が静的配信だけなら S3 と CloudFront、サーバーサイドのロジックが中心なら Lambda、App Runner を既に利用していればそれも、というように、アプリの性質に応じて使い分けるのが合理的です。
まとめ
Amplify は Web アプリケーションのフロントエンドホスティングとバックエンド構築を統合するサービスです。Git リポジトリとの連携でブランチごとの自動デプロイ環境を構築し、Next.js の SSR にも対応します。Backend Gen 2 ではバックエンドをコードで定義でき、フルスタック開発の生産性の向上に役立ちます。
参考資料 (AWS 公式)
本ページの一次情報は AWS 公式サイトと公式ドキュメントです。最新の仕様と料金は次の公式ページで確認できます。
本ページと公式ドキュメントの記述が食い違う場合は、公式ドキュメントを正としてください。