😸
Amplify Gen2のバックエンドを本番環境にセットアップしてみた

2024/12/27に公開
AWS
 はじめにAWS Amplify Gen2は、AWS Amplifyの次世代バージョンとしてリリースされ、TypeScriptを使ったインフラのコード管理ができるようになりました。フロントエンドからバックエンドまで一貫して構築できるのが特長ですが、ドキュメントにも記載がなく、本番環境でのバックエンドのセットアップに若干戸惑ったので記録に残しておきます。

 前提条件ここで紹介する手順を実行するには、以下の環境やツールが必要です。
AWSアカウント

各種AWSサービスを使うために必要です。
Node.js 18.19.0以上

Amplifyのビルド時に使用します。
AWS CLIがインストール・設定済み

aws configureなどで認証情報が設定されている状態が望ましいです。
Amplify CLIのインストール

下記のようにコマンドを実行して、CLIをグローバルにインストールしてください。
npm install -g @aws-amplify/cli

 プロジェクト構成Amplify Gen2のプロジェクトでは、フロントエンドとバックエンドを同時に管理できます。以下の手順を参考に、シンプルなプロジェクトをセットアップしてみましょう。
# フォルダの作成 & 初期化
mkdir amplify-gen2-sample
cd amplify-gen2-sample
npm init -y

# Amplify関連パッケージのインストール
npm install aws-amplify @aws-amplify/ui-react
Amplifyを初期化すると、amplifyフォルダ配下にTypeScriptの設定ファイルが生成され、CognitoやAppSync、LambdaなどのバックエンドリソースをCDKで管理できるようになります。

 デプロイの準備本番環境にデプロイするには、Amplify Consoleに設定するビルド設定 (amplify.yml) が重要です。ここでは、Node.jsのバージョンやAmplify Gen2特有のコマンドを指定していきます。

 amplify.yml の例version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm install 18.19.0
        - nvm use 18.19.0
        - npm install
        - npx ampx pipeline-deploy --app-id YOUR_APP_ID --branch main
        - npx ampx generate outputs --app-id YOUR_APP_ID --branch main
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - .next/cache/**/*
      - .npm/**/*

 ポイント
Node.jsバージョンの固定化

Amplifyコンソールのビルド環境では、Node.jsのバージョンを明示的に指定することが大切です。

npx ampx pipeline-deploy

Amplify Gen2用のパイプラインをデプロイするコマンドです。

npx ampx generate outputs

CDKで作成したバックエンドの情報（エンドポイントやCognito設定など）をフロントエンドに反映させます。

 必要なIAM権限の設定Amplify Gen2では、CDKを使ってリソースをプロビジョニングするため、CDKブートストラップと必要なIAMロール・ポリシーの準備が欠かせません。

 1. CDKブートストラップの実行まずは、AWSアカウントを「CDKブートストラップ」する必要があります。これにより、CDKが使うS3バケットなどの下準備が行われます。
# 必要に応じてAWSプロファイルを指定
export AWS_PROFILE=your_profile_name

# CDKブートストラップの実行
npx cdk bootstrap aws://YOUR_ACCOUNT_ID/YOUR_REGION

 2. IAM権限の設定Amplifyがバックエンドを作成・更新できるようにするため、IAMロールに適切なポリシーをアタッチします。以下は例ですので、適宜 YOUR_ACCOUNT_ID や YOUR_REGION、YOUR_ROLE_ID などを読み替えてください。
echo '{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:*",
                "cognito-idp:*",
                "cognito-identity:*",
                "appsync:*",
                "dynamodb:*",
                "cloudformation:*",
                "iam:*",
                "ssm:*",
                "lambda:*",
                "sts:AssumeRole"
            ],
            "Resource": "*"
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:*"
            ],
            "Resource": [
                "arn:aws:s3:::cdk-hnb659fds-assets-YOUR_ACCOUNT_ID-YOUR_REGION",
                "arn:aws:s3:::cdk-hnb659fds-assets-YOUR_ACCOUNT_ID-YOUR_REGION/*"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "sts:AssumeRole"
            ],
            "Resource": [
                "arn:aws:iam::YOUR_ACCOUNT_ID:role/cdk-hnb659fds-*"
            ]
        }
    ]
}' > amplify-comprehensive-policy.json

# ポリシーをロールにアタッチ
aws iam put-role-policy \
  --role-name AmplifySSRLoggingRole-YOUR_ROLE_ID \
  --policy-name AmplifyComprehensiveAccess \
  --policy-document file://amplify-comprehensive-policy.json

 デプロイの実行Amplifyコンソールでアプリケーションを作成

Amplifyコンソールから「新しいアプリを作成」を選び、アプリを追加します。
GitHubリポジトリと連携

デプロイしたいリポジトリを選び、対象のブランチ（例: main）を指定します。
ビルド設定を行う

amplify.yml の内容をAmplifyコンソールのBuild settingsに貼り付け、保存します。
デプロイを実行

デプロイを開始すると、Amplifyがフロントエンドのビルドとバックエンド（CDK）のデプロイを一括で実行してくれます。

 デプロイ後の確認
 1. 動作確認
Amplifyコンソールでステータスを確認

ビルドログにエラーがないかをチェックします。

生成されたURLにアクセス

正常にホスティングされているかをブラウザで確認します。

CloudWatchログを確認

Lambdaなどのバックエンドが想定通り動いているかも調べると安心です。

 2. モニタリング設定
CloudWatchアラーム

CPU使用率やエラー数など、監視したい指標に対してアラームを設定できます。

エラー通知

SNSなどと連携することで、アラーム発生時に通知を受け取り、問題を早期に発見・対応できます。

 トラブルシューティング
 1. 権限エラーCDKAssetPublishError: CDK failed to publish assets
IAMロールまたはポリシーの権限が不足していると発生します。先述のポリシー設定を見直しましょう。

 2. Node.jsバージョンエラーEBADENGINE Unsupported engine
Amplifyコンソール側で設定されているNode.jsのバージョンが合わないと発生します。 amplify.yml の nvm use 18.19.0 などを見直してみてください。

 3. CDKブートストラップエラーBootstrapNotDetectedError
CDKブートストラップが未実行だと起こるエラーです。
npx cdk bootstrap aws://YOUR_ACCOUNT_ID/YOUR_REGION
を再度実行したうえでデプロイを試してください。

 ベストプラクティス
環境変数の管理
機密情報はAmplifyコンソールの「Environment variables」で管理
開発・ステージング・本番など、環境ごとに変数を切り替える


CI/CDの設定
ブランチ戦略をしっかり立て、develop でテストしてから main へマージするなどの運用を取り入れる
Pull Request時の自動テスト設定で品質を高める


セキュリティ考慮
IAMロールやポリシーは「最小権限の原則」を徹底
定期的にアクセス権を見直して、不要な権限は削除する


 まとめAmplify Gen2を使って本番環境を構築・デプロイするには、以下の点が肝になります。

CDKブートストラップの実行

事前にCDKが利用するリソース（S3バケットなど）を用意する

IAMロールの適切な権限設定

Amplifyがバックエンドリソースを作成・更新できるように権限を付与

Amplify Consoleでのビルド設定（amplify.yml）

Node.jsのバージョンやAmplify Gen2用のコマンドを正しく指定
これらを設定すれば、フロントエンドとバックエンドをシームレスに連携しながら、本番アプリケーションを運用できるはずです。
はじめに

前提条件

プロジェクト構成

デプロイの準備

amplify.yml の例

ポイント

必要なIAM権限の設定

1. CDKブートストラップの実行

2. IAM権限の設定

デプロイの実行

デプロイ後の確認

1. 動作確認

2. モニタリング設定

トラブルシューティング

1. 権限エラー

2. Node.jsバージョンエラー

3. CDKブートストラップエラー

ベストプラクティス

まとめ

Discussion
