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 バケットが自動構築されます。amplify sandbox コマンドで開発者ごとの独立したバックエンド環境を起動でき、チーム開発での環境競合を防止します。
カスタムドメインと SSR
Amplify Hosting はカスタムドメインの設定と SSL 証明書の自動発行を提供します。 Route 53 のドメインを接続すると DNS 設定が自動構成されます。 SSR (Server-Side Rendering) は Next.js と Nuxt をサポートし、 Lambda@Edge でサーバーサイドレンダリングを実行します。プルリクエストごとにプレビュー環境が自動生成され、レビュー後にマージすると本番環境に自動デプロイされます。環境変数はブランチごとに設定でき、開発・ステージング・本番で異なる API エンドポイントを使い分けられます。 Web ホスティングについて体系的に学びたい方は、関連書籍 (Amazon)も参考になります。
Amplify の料金
Amplify Hosting のビルド料金は 1 分あたり約 0.01 ドルで、ホスティングは 1 GB あたり月額約 0.023 ドル、リクエストは 100 万リクエストあたり約 0.15 ドルです。SSR のリクエストは Lambda@Edge の料金が追加されます。無料枠は月間 1,000 ビルド分、15 GB のホスティング、5 GB のデータ転送です。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 の柔軟性を両立できます。amplify sandbox を起動すると、開発者ごとに隔離されたクラウド環境が用意され、ローカルのコード変更が数秒でクラウドのリソースに反映されます。チーム開発での環境競合を避けながら、本番に近い構成で検証できます。
ビルドとブランチ戦略のベストプラクティス
Amplify のビルド手順は amplify.yml で宣言的に定義します。preBuild・build・postBuild の各フェーズにコマンドを指定し、依存パッケージのインストールやテスト実行を組み込めます。ブランチ戦略では、本番ブランチとステージングブランチを分け、プルリクエストのプレビュー環境でレビューしてからマージするフローが定番です。環境変数はブランチ単位で設定し、API エンドポイントやフィーチャーフラグを環境ごとに切り替えます。モノレポ構成の場合はアプリのルートディレクトリを指定して対象を絞り込み、ビルドキャッシュを有効にすると依存パッケージの再取得を避けてビルド時間を短縮できます。
他のホスティング方式との使い分け
AWS 内でも Web ホスティングの選択肢は複数あります。静的サイトやシンプルな SPA で、CI/CD を自前で組んでも構わない場合は、S3 と CloudFront の構成が最も低コストで細かな制御が利きます。一方、コンテナで動く API サーバーを常時稼働させたい場合は App Runner や ECS が適し、これらは Amplify の責務範囲外です。Amplify が最も輝くのは、フロントエンドのデプロイ自動化とバックエンドのコード定義をワンストップで欲しい場合です。要件が静的配信だけなら S3 と CloudFront、サーバーサイドのロジックが中心なら Lambda や App Runner、というように、アプリの性質に応じて使い分けるのが合理的です。
まとめ
Amplify は Web アプリケーションのフロントエンドホスティングとバックエンド構築を統合するサービスです。Git リポジトリとの連携でブランチごとの自動デプロイ環境を構築し、Next.js の SSR にも対応します。Backend Gen 2 でコードベースのバックエンド定義を実現し、フルスタック開発の生産性を大幅に向上させます。