AWS Amplifyによるアプリケーション開発とホスティング

AWS Amplifyは、Webやモバイルのアプリケーションを開発し、AWS上のバックエンドと接続して、ビルド・デプロイ・ホスティングするためのツール群とマネージドサービスです。認証、データ、ファイル保存などのバックエンドを用意し、フロントエンドから利用するまでの作業をまとめて進められます。AWSのリソースを個別に設計・構築する作業を減らし、開発者がアプリケーションの機能に集中しやすくします。

Amplifyは静的Webサイトやシングルページアプリケーション（SPA）のホスティングでよく使われます。また、現在のAmplify Hostingは、対応するフレームワークでサーバーサイドレンダリングを行うアプリケーションもホストできます。「小規模な静的サイトだけに使え、大規模なアプリケーションには使えない」と一律に判断するのは適切ではありません。選択時には、必要なフレームワーク機能、バックエンドの構成、可用性や運用要件、サービスのクォータと料金を確認します。

たとえば、地域の天体観測会の予約サイトを作る場合、Amplify Hostingで画面を公開し、フロントエンドライブラリから認証や予約データのバックエンドを利用できます。リポジトリへ変更を反映するたびにビルドとデプロイを行い、ブランチごとのプレビューを使ってリリース前の画面を確認する構成も取れます。

Amplifyを構成する機能

Amplifyはいくつかの機能から成り、それぞれを必要に応じて組み合わせます。バックエンドの構築、フロントエンドとの接続、ホスティングは関連しますが、常に一体で使う必要はありません。

機能	役割	覚えておきたい点
Amplify CLI	コマンドラインからAmplifyのバックエンドやプロジェクトを構成する	従来のGen 1ではamplifyコマンドを使う。Gen 2ではTypeScriptで定義したバックエンドをampxコマンドでデプロイする
Amplify Libraries	Web・モバイルのフロントエンドから認証、データ、ストレージなどのバックエンドを利用する	React、Vueなど複数のフレームワークやモバイル環境向けのライブラリがある。Amplifyで作成したバックエンド以外と連携する用途にも使える
Amplify Hosting	Webアプリケーションをビルド、デプロイ、ホストする	Gitベースの継続的デプロイに対応し、静的配信や対応フレームワークのSSRなどを扱う
Amplify Studio	Gen 1アプリのバックエンドやUIを視覚的に扱う開発環境	画面上でデータモデルやUIコンポーネントを構成できる。Gen 2の中心はコードファーストであり、StudioのUI Builderと同一の操作環境が提供されるわけではない

Amplify Librariesはバックエンドの代わりにアプリケーションをホストする機能ではなく、クライアントコードからAWSのバックエンド機能を利用するためのライブラリです。反対にAmplify Hostingはフロントエンドのデプロイを担います。Amplifyでバックエンドを作らずに、既存のAPIやAWSサービスをフロントエンドから使う構成も可能です。

Gen 1とGen 2の違い

Gen 1とGen 2では、主にバックエンドを定義・デプロイする方法が異なります。Amplify CLIやAmplify Studioという名前だけで、すべての世代に同じ手順や機能が適用できるとは限りません。

観点	Gen 1	Gen 2
バックエンド定義	Amplify CLIやAmplify Studioを中心に構成	TypeScriptのコードでバックエンドを定義する
デプロイ操作	従来のAmplify CLIのバックエンド操作を利用	npx ampxのコマンドを利用する
フロントエンド連携	Amplify Librariesを利用可能	Amplify Librariesを利用可能
UIの視覚的編集	Amplify StudioのUI Builderを利用できる	Gen 1のStudio UI Builderと同じ機能構成ではない。コードを基本とし、Figma連携などのUI制作手段を使う
ホスティング	Amplify Hostingでデプロイできる	Amplify Hostingでデプロイできる

既存のGen 1アプリを保守する場合は、Gen 1のCLIやStudioに関する手順が関係します。一方、Gen 2ではバックエンド定義をコードで管理し、CI/CDではたとえばnpx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_IDを実行します。このコマンドは指定したAmplifyアプリとブランチ向けにバックエンドをデプロイします。フロントエンドのビルドコマンドや出力先は別に設定します。

Amplify Hostingのデプロイ

Amplify HostingはGitリポジトリと接続し、ブランチへの変更を契機にアプリケーションをビルドして配信できます。ブランチごとに開発・検証・本番の環境を運用したり、プルリクエストのプレビューを確認してから本番ブランチへ反映したりできます。カスタムドメインやTLS証明書の設定、配信時のキャッシュ管理などもAmplify Hosting側で扱えます。

アプリケーションの構成に応じて、Amplifyはフロントエンドだけをビルドすることも、バックエンドのデプロイとフロントエンドのビルドを一続きに実行することもできます。バックエンドの変更を伴わないブランチではバックエンド更新を行わない構成も可能です。どの操作をビルドパイプラインに含めるかは、Gen 1／Gen 2の違いとアプリの環境構成に合わせて決めます。

ホスティング対象が静的なHTML・CSS・JavaScriptであれば、ビルド後のファイルを配信します。SSRを使う場合は、フレームワークのビルド出力をAmplify Hostingが扱える形式にしてサーバー側処理を実行するため、静的ファイルの配置だけで完結するホスティングとは構成が異なります。フレームワークと機能の対応範囲を確認してから、デプロイ方式を選択します。

amplify.ymlでビルド手順を定義する

Amplify Hostingのビルド仕様は、YAML形式のamplify.ymlで記述できます。リポジトリのルートに置いたファイルがある場合、そのビルド設定がコンソールに保存した設定より優先されます。設定をコードとして管理すると、ブランチやアプリケーション間でビルド手順を再現しやすくなります。

ビルド仕様には、バックエンド、フロントエンド、テストの処理を定義できます。Gen 1のバックエンドではAmplify CLIのコマンドでリソースをプロビジョニングしたり、Lambda関数やGraphQLスキーマを更新したりします。Gen 2ではバックエンドのコードをデプロイするampxコマンドを使う構成があります。フロントエンドではReactやNext.jsなどのアプリケーションをビルドし、必要ならテストコマンドも実行します。

次は、観測会の予約ページをビルドする構成例です。バックエンドのコマンドはGen 2でブランチごとにバックエンドをデプロイする場合を示しています。バックエンドを使わないアプリではbackendセクションを省略でき、Gen 1ではそのバックエンドに対応したCLIコマンドを設定します。

version: 1
backend:
  phases:
    build:
      commands:
        - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run test:unit
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*
      - .npm/**/*
test:
  phases:
    preTest:
      commands:
        - npm run test:e2e

この例では、フロントエンドのpreBuildで依存パッケージをインストールし、buildで単体テストと本番用ビルドを実行します。バックエンドを含める場合はバックエンド側の処理も定義できます。テスト用の設定はtestセクションに分ける方法があり、どこで実行するかはテストの目的やCIでの結果の扱いに合わせます。postBuildには、ビルド後に実施したいコマンドを置きます。

フェーズの役割

バックエンドとフロントエンドの各処理には、preBuild、build、postBuildのフェーズを設定できます。実行するコマンドは各フェーズ内に順に並べます。

フェーズ	役割	例
preBuild	ビルド本体の前に行う準備	依存パッケージのインストール、ビルドに必要な設定の準備
build	バックエンドまたはフロントエンドのビルド処理	バックエンドのプロビジョニング、ソースのコンパイル、単体テスト
postBuild	ビルド後の処理	成果物に対する後処理、追加の検査や整理

これらは異なる処理のまとまりであり、フェーズ名を任意の名前に変更するものではありません。preBuildは依存関係の準備など、ビルド実行前に必要な処理を置く段階です。バックエンドとフロントエンドのどちらのセクションに書いたかによって、コマンドの対象が変わります。

成果物、キャッシュ、環境変数

フロントエンドのビルド後にデプロイするファイルは、artifactsで指定します。baseDirectoryにはビルド出力が作られるディレクトリを設定し、filesで対象ファイルを選びます。例のdistはアプリケーションのビルドツールが出力先にしている場合の指定です。フレームワークやビルド設定によって出力先は異なるため、baseDirectoryが実際の成果物ディレクトリと一致している必要があります。たとえばAmplify HostingへデプロイするNext.js SSRアプリでは.nextを指定する構成があります。

cacheには、次回のビルドで再利用する依存パッケージなどのパスを指定します。初回ビルドでは指定したパスがキャッシュされ、次回以降は同じ場所へ復元されます。キャッシュパスはプロジェクトルートからの相対パスです。プロジェクトルート外のファイルや絶対パスを指定しても、意図したキャッシュにならない場合があります。キャッシュはビルド時間を短縮する補助機能であり、アプリケーションの成果物そのものを指定するartifactsとは用途が異なります。

環境変数はamplify.ymlのenvセクションまたはAmplifyコンソールで設定でき、ビルドコマンドからブランチ名やアプリ設定などを参照できます。APIキーやパスワードなどの秘密情報をリポジトリ内のYAMLへ平文で記載しないでください。秘密情報には適切なシークレット管理機能を使い、ビルドログへ値を出力しないようにします。

Amplifyが適する場面と確認事項

Amplifyは、Web・モバイルアプリのフロントエンドとAWSバックエンドをすばやくつなぎ、リポジトリから継続的にデプロイしたい場合に候補になります。認証、データ、ファイル保存などの機能とフロントエンド用ライブラリを組み合わせ、チームが独自にビルドサーバーや静的サイト配信基盤を構築・保守する負担を減らせます。

ただし、Amplifyを選ぶとアプリケーションの規模や複雑さに関係なく設計作業が不要になるわけではありません。必要な実行時機能がAmplify Hostingの対応範囲に入るか、バックエンドがどのAWSサービス上に作られるか、ブランチごとの環境をどう管理するか、IAM権限やシークレットをどう扱うかを確認します。独自のデプロイパイプラインや細かなインフラ制御が必要であれば、Amplify Hostingと他のAWSサービスを組み合わせる方法も検討します。

料金はビルド・デプロイの実行時間、配信データ量、保存量、SSRの要求数や実行時間など、使う機能と使用量によって変わります。バックエンドとして利用するCognito、AppSync、DynamoDB、Lambda、S3などの料金も個別に発生し得ます。金額はリージョンや利用条件で変わるため、最新の料金表で確認してください。

試験で押さえるポイント

• AmplifyはWeb・モバイルアプリ開発を支援する機能群であり、バックエンドの構築、フロントエンドライブラリ、ビルド、デプロイ、ホスティングを目的に応じて組み合わせます。
• Amplify CLIやAmplify Studioのビジュアルなバックエンド／UI開発はGen 1で使われてきた手段です。Gen 2ではTypeScriptでバックエンドをコードとして定義し、ampxでデプロイします。
• Amplify Hostingは静的WebサイトやSPAに加え、対応するSSRフレームワークのアプリケーションもホストします。Amplifyを「単純で小規模なサイト専用」とみなさず、必要な実行時機能が対応しているかを確認します。
• amplify.ymlのbackendセクションはバックエンドのプロビジョニングや更新、frontendセクションはフロントエンドのビルドコマンドを定義します。テスト用のtestセクションも設定できます。
• preBuild、build、postBuildは準備、本体処理、後処理のフェーズです。バックエンドとフロントエンドでそれぞれ設定できます。
• artifactsは配信対象ディレクトリとファイル、cacheは次のビルドで再利用する依存関係などを指定します。キャッシュのパスはプロジェクトルート内に設定します。
• envやコンソールからビルド環境変数を設定できますが、秘密情報をリポジトリへ平文で保存してはいけません。
• amplify.ymlがリポジトリにある場合はコンソール設定より優先されます。出力先のbaseDirectoryも含めて、ファイル内の設定が実際のビルド出力と合うようにします。

公式ドキュメント

• AWS Amplify Hostingの概要
• Amplify Hostingのビルド仕様リファレンス
• Amplifyアプリケーションのビルド設定
• Amplify HostingでNext.js SSRアプリケーションをデプロイする
• Amplify Gen 2の仕組み
• Amplify Gen 2 CLIコマンド
• AWS Amplifyの料金