クロスアカウントデプロイメント

このガイドでは、AWS Amplify Gen 2を使用して構築されたアプリケーション用のトランクベース、マルチリージョンデプロイメントパイプラインを作成する方法について説明します。このガイドではAmazon CodeCatalystとAWS Amplify Hostingを使用しますが、任意のCI/CDプロバイダーを選択できます。

ステップ1: Amazon CodeCatalystスペースをセットアップする

Amazon CodeCatalystのガイドを参照して、スペースをセットアップするための詳細なステップバイステップの説明をご覧ください。

ステップ2: フルスタックAmplify Gen 2アプリをデプロイする

• Next.jsスターターテンプレートを使用して、GitHubアカウントにリポジトリを作成します。
• AWSマネジメントコンソールにサインインします。
• Amplifyコンソールに移動し、新しいアプリを作成を選択します。
• next-pages-templateリポジトリを選択し、次へを選択します。
• Gitリポジトリを作成ページの詳細を確認し、保存してデプロイを選択します。
• 完了です。フルスタックGen 2アプリのデプロイに成功しました。Amplifyコンソールでアプリのデプロイステータスを確認できます。

ステップ3: ビルド仕様を更新する

npx ampx generate outputs --branch $AWS_BRANCH --app-id $AWS_APP_IDコマンドをビルド仕様に追加し、npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_IDコマンドをコメントアウトします。ampx pipeline-deployはバックエンド更新をデプロイするためのスクリプトを実行し、ampx generate outputsは指定された環境の最新のamplify_outputs.jsonを取得します。

ステップ4: ブランチの自動ビルドを無効にする

Amplifyを設定して、コードコミットのたびに自動ビルドを無効にできます。Amplifyコンソールでアプリに移動します。アプリ設定でブランチ設定を選択します。ブランチセクションからブランチを選択し、アクションドロップダウンメニューから自動ビルドを無効にするを選択します。

ステップ5: 受信Webhookを作成する

受信Webhookをセットアップして、Gitリポジトリへのコードコミットなしでビルドをトリガーできます。Amplify Consoleを使用して、受信Webhookを作成します。

アプリに移動し、ホスティング > ビルド設定でWebhookを作成を選択します。Webhookの名前を指定し、受信Webhookリクエストでビルドするためのターゲットブランチを選択します。

次に、Webhookを選択し、アプリのビルドをトリガーするために使用されるcurlコマンドをコピーします。

ステップ6: 新しいAmazon CodeCatalystプロジェクトを作成する

Amazon CodeCatalystのガイドを参照して、新しいプロジェクトを作成するための詳細なステップバイステップの説明をご覧ください。

ステップ7: 別のターゲットAWSアカウントにリソースをセットアップする

クロスアカウントデプロイメントを実現するには、このガイドで前に説明したステップ1～6を別のAWSアカウント(例えば、productionアカウント)で実装する必要があります。

ステップ8: ターゲットAWSアカウントをCodeCatalystスペースに追加する

ステップ1で作成したCodeCatalystスペースに移動し、設定を選択してからAWSアカウントを選択します。ターゲットAWSアカウントID(ステップ7)を追加し、AWSアカウントを関連付けるを選択します。

staging環境がproduction環境でアクションを実行してリソースをデプロイするために想定されるIAMロールをターゲットAWSアカウントに作成する必要があります。ベストプラクティスとして、AmplifyBackendDeployFullAccessAWSマネージドポリシーをIAMロールにアタッチすることをお勧めします。このポリシーには、アカウントにGen 2リソースをデプロイするために必要なすべての権限が含まれています。CodeCatalystのドキュメントで、アカウント接続にIAMロールを追加する方法の詳細について学習できます。

ステップ9: Amazon CodeCatalystプロジェクトにワークフローを作成する

ワークフローは、継続的インテグレーションと継続的デリバリー(CI/CD)システムの一部として、コードをビルド、テスト、デプロイする方法を説明する自動化手順です。ワークフローの詳細については、Amazon CodeCatalyst User Guideを参照できます。

• CodeCatalystプロジェクト内で、CI/CD機能に移動し、ワークフローを選択します。
• ワークフローを作成を選択します。
• ドロップダウンメニューからnext-pages-template GitHubリポジトリとブランチmainを選択します。
• 次に、作成を選択します。

ワークフローを作成すると、CodeCatalystコンソールにyamlエディターが表示されます。

コンソールのエクスペリエンスをビジュアルエディターに切り替えます。アクションボタンを選択して、ワークフローに追加できるワークフローアクションのリストを表示します。

ビルドアクションをワークフローに追加し、入力セクションの変数を追加ボタンを選択します。以下の環境変数を追加します:

• AWS_APP_ID_STAGING: stagingアプリのamplifyアプリID
• AWS_APP_ID_PRODUCTION: productionアプリのamplifyアプリID
• AWS_BRANCH: gitブランチ名

別のビルドアクションをワークフローに追加し、入力セクションの依存先ボタンを選択します。ドロップダウンメニューから前のビルドアクションの名前を選択して、パイプラインをセットアップします。

次に、設定セクションを選択し、各ビルドアクションに以下の情報を追加します:

• 環境情報(オプション): staging、productionなど
• AWSアカウント接続: アカウント接続
• ロール: アカウント接続でセットアップしたロール

次に、各ビルドアクションに以下のシェルコマンドを追加する必要があります:

// このCIの環境以外でpipeline-deployコマンドを実行するために必要な環境変数です
- Run: export CI=1

// 依存関係のクリーンインストールを実行します
- Run: npm ci

// Amplify Gen 2アプリのバックエンドをデプロイします
- Run: npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID

// 受信Webhooksを使用してフロントエンドビルドをトリガーします
- Run: if [ $AWS_BRANCH = "main" ]; then curl -X POST -d {} "`webhookUrl`&operation=startbuild" -H "Content-Type:application/json"; fi

検証を実行して、ワークフロー定義のyamlファイルが有効であることを確認できます。最後に、コミットを選択して変更を保存します。

次に、実行タブからワークフロー実行の結果を確認できます:

完了です。Amplify Gen 2を使用して構築されたアプリ用のカスタムクロスアカウントパイプラインをセットアップして、フロントエンドとバックエンドをデプロイできるようになりました。要約すると、このカスタムパイプラインにより、CodeCatalystワークフローでampx pipeline-deployを使用してstaging環境でバックエンドを最初にデプロイでき、ampx generate outputsはmainブランチのamplify_outputs.jsonファイルを生成します。Amplify Hostingはビルドの一部としてバックエンドリソースをデプロイせず、代わりにmainブランチからデプロイされたバックエンドリソースを使用します。staging环境が正常にデプロイされると、別のAWSアカウントでproduction環境をデプロイするために、同様のプロセスが実行されます。