CodeCommit をソースとする Amplify アプリを CDK で作成してみた

以下の内容を CDK で作成してみました。

• ソースは CodeCommit
• 単一ブランチと連携する Amplify アプリ
• Amplify アプリ作成後に自動的にデプロイ

前提

• CDK 実行環境は Cloud9
• CDK の言語は TypeScript
• CodeCommit リポジトリは作成済み
  • index.html のみプッシュ済み

事前準備

今から始める CDK 入門 #1
上記ブログを参考に CDK プロジェクトを作成します。

# TypeScript をインストール
$ mkdir -p ~/.npm-global
$ npm config set prefix '~/.npm-global'
$ echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
$ source ~/.bashrc
$ npm install -g typescript
$ tsc -v
Version 5.7.3

# プロジェクトの作成
$ mkdir sample && sample
$ cdk init app --language typescript

コード

以下のようにコードを定義しました。

lib/sample-stack.ts

import * as cdk from 'aws-cdk-lib';
import { Construct } from 'constructs';
import * as iam from 'aws-cdk-lib/aws-iam';
import * as amplify from 'aws-cdk-lib/aws-amplify';
import * as customResources from 'aws-cdk-lib/custom-resources';

export class SampleStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // Amplify アプリ用のサービスロール作成
    const amplifyRole = new iam.Role(this, 'AmplifyServiceRole', {
      assumedBy: new iam.ServicePrincipal('amplify.amazonaws.com'),
      managedPolicies: [
        iam.ManagedPolicy.fromAwsManagedPolicyName('AdministratorAccess-Amplify')
      ]
    });

    // Amplify アプリ作成
    const amplifyApp = new amplify.CfnApp(this, 'AmplifyApp', {
      name: 'cdk-app',
      repository: 'https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/test',
      iamServiceRole: amplifyRole.roleArn,  // 作成した IAM ロールを指定
      enableBranchAutoDeletion: false
    });

    // Amplify アプリにブランチ追加
    const amplifyBranch = new amplify.CfnBranch(this, 'AmplifyBranch', {
      appId: amplifyApp.attrAppId,
      branchName: 'main',
      stage: 'PRODUCTION',
      enablePullRequestPreview: false,
      enableAutoBuild: true,
      enablePerformanceMode: false
    });

    // Amplify アプリ作成後にブランチを追加するよう依存関係を追加
    amplifyBranch.addDependency(amplifyApp);

    // Amplify アプリにブランチ追加後に自動的にデプロイする設定
    const deployTrigger = new customResources.AwsCustomResource(this, 'AmplifyDeployTrigger', {
      onCreate: {
        service: 'Amplify',
        action: 'startJob',
        parameters: {
          appId: amplifyApp.attrAppId,
          branchName: 'main',
          jobType: 'RELEASE'
        },
        physicalResourceId: customResources.PhysicalResourceId.of('AmplifyDeployTrigger'),
      },
      policy: customResources.AwsCustomResourcePolicy.fromSdkCalls({
        resources: customResources.AwsCustomResourcePolicy.ANY_RESOURCE
      })
    });
    
    deployTrigger.node.addDependency(amplifyBranch);
    
  }
}

デプロイ

$ cdk synth

# CDK を初めて実行する場合にはブートストラップも実施
$ cdk bootstrap

# デプロイ
$ cdk deploy

数分でデプロイが完了しました。

Amplify アプリ確認

Amplify コンソールから対象のアプリを確認し、デプロイが完了していれば成功です。

ドメインにアクセスすることで index.html の内容がデプロイされていることも確認できました。

自動デプロイについて

自動デプロイは CDK に組み込みのメソッドがないため、GitHub Issue を参考にカスタムリソースを定義しました。
[aws-amplify] Creating an Amplify app fails to run build, manual intervention needed. · Issue #9479 · aws/aws-cdk

まとめ

今回は CodeCommit をソースとする Amplify アプリを CDK で作成してみました。
どなたかの参考になれば幸いです。

参考資料

• class CfnApp (construct) · AWS CDK
• 今から始める CDK 入門 #1
• [aws-amplify] Creating an Amplify app fails to run build, manual intervention needed. · Issue #9479 · aws/aws-cdk