Amplifyで構築したバックエンドをCDKで出力して既存のデプロイパイプラインで使用する新機能「エクスポート」のご紹介

この記事は、Export Amplify backends to CDK and use with existing deployment pipelines を翻訳したものです。

AWS Amplifyは、Amplify CLIで生成されたバックエンドをAWS Cloud Development Kit (CDK)スタックとしてエクスポートし、既存のCDKデプロイメント・パイプラインに組み込む機能を発表しました。この新機能により、フロントエンド開発者はアプリのバックエンドを迅速に構築し、リリースの準備毎に、DevOpsチームと連携し本番環境にデプロイすることができます。

注意：これは上級者向けのトピックとなるため、まずAmplify’s getting started guideとAWS CDK’s getting started guideを終えることをお勧めします。このガイドでは、既存のCDKベースのデプロイメントパイプラインの使用に焦点を当てています。また、Amplifyで生成されたバックエンドリソースをCDKでカスタマイズする新機能「オーバーライド」のご紹介や、AWS CDKまたはCloudFormationを使用し、カスタムAWSリソースでAmplifyバックエンドを拡張する新機能「カスタム」のご紹介もご覧ください。

AWS Amplifyは、AWS上でクラウドを活用したモバイルやWebアプリケーションを最速かつ簡単に構築することができます。Amplifyは、フロントエンドのWebおよびモバイル開発者がAWSサービスのパワーを活用して、革新的で機能豊富なアプリケーションを構築できるようにするツールとサービスのセットで構成されています。AWS Amplify CLIは、フロントエンド開発者がクラウド上でアプリのバックエンドを作成するためのコマンドラインツールチェーンです。AWS Cloud Development Kit（AWS CDK）は、使い慣れたプログラミング言語でクラウドインフラストラクチャを定義するための、オープンソースのソフトウェア開発フレームワークです。CDK Pipelinesは、AWS CodePipelineを利用して、CDKアプリケーションの継続的なデプロイメントパイプラインを簡単にセットアップすることができる高レベルコンストラクトライブラリです。

多くの開発者は、既存のDevOpsガイドラインやツールと一緒にAmplifyを使用するための機能を必要としています。例えば、組織によっては、アプリを本番環境にデプロイする際に、組織のDevOpsやセキュリティのガイドラインを遵守しながら既存のデプロイシステムを使用することを求められます。フロントエンドの開発者は、Amplify CLIを使用してアプリのバックエンドに対して迅速にイテレーションを行い、各本番デプロイの前に、amplify export を実行して、既存のデプロイメントシステム用にエクスポートされたAmplifyバックエンドを提供することができます。また、新しい「Amplify Exported Backend」CDKコンストラクトは、DevOpsエンジニアがたった数行のコードで、Amplifyで作成したバックエンドをデプロイステージとして組み込むこともできます。

この記事で学習する内容

Amplifyを使って数分でアプリのバックエンドを構築し、CDKにエクスポートする方法
エクスポートしたAmplifyのバックエンドを、既存のCDKスタックやパイプラインで使用する方法

前提条件

最新のAmplify CLIをインストールされていること。バージョン7以上が必要です。
- ターミナルを開き、npm i -g @aws-amplify/cli を実行します。
Amplify CLIが設定されていること
- まだAmplify CLIを設定していない場合はドキュメントページにある、こちらのガイドに従ってください。

1. Amplifyバックエンドの初期化

初めに、新しいディレクトリを作成し、Amplifyプロジェクトを初期化します。

mkdir mytodoapp
cd mytodoapp
amplify init -y

Amplifyプロジェクトは、アプリのバックエンドを開発するための出発点です。Amplifyプロジェクトが初期化された後、amplify add api というコマンドによってAmazon DynamoDBを利用したGraphQL APIなどのバックエンドリソースを簡単に追加できます。

2. TodoアプリにGraphQL APIバックエンドを追加する

次に、Todoリストのデータをどこかに保存する必要があります。Amplify CLIには、GraphQL APIとその基盤となるリソースを作成するための「APIカテゴリ」が用意されています。amplify add api を実行して、GraphQL APIを作成します。

amplify add api

(このデモはすべてデフォルトの設定で進めることができます。)
CLIを進めていくと、GraphQLスキーマの編集を求められます。GraphQLスキーマはデータモデルを定義するものであり、Amplifyが生成する基盤となるインフラストラクチャを定義します。

以下のようなGraphQLスキーマが表示されます。

type Todo @model {
  id: ID!
  name: String!
  description: String
}

これで、かなりの準備が整いました。通常であれば、この時点で「amplify push」を実行し、クラウドリソースを作成してデプロイします。

今回のデモでは、amplifyプロジェクトを「エクスポート」して、CDKベースのCI/CDパイプラインでデプロイする機能を紹介したいと思います。

3. CDKベースのCI/CDパイプラインのセットアップ

今回のデモでは、CDKベースのパイプラインを用意していますので、ご利用ください。これを一から作り直す場合、CDK Pipelines: Continuous delivery for AWS CDK applications を読むことを強くお勧めします。このパートの内容は通常DevOpsエンジニアによって管理されているか、組織に一元的なデプロイメントシステムがある場合、同様のものが既に存在しています。

親ディレクトリにディレクトリを変更して、CDKパイプライン用の新しいフォルダをセットアップしましょう。

cd ..

GitHubのリポジトリをフォークして、ローカル環境にクローンします。

Fork renebrandel/mycdkpipeline ⎘

git clone git@github.com:<YOUR_GITHUB_USERNAME>/mycdkpipeline.git
cd mycdkpipeline

次に、プロジェクトが正しくセットアップされるように、必要なすべてのnode依存関係を更新しましょう。

npm install

4. CDKパイプラインコードの理解

CDK pipelinesプロジェクトを見てみましょう。このファイル構造は、パイプラインを初期化するためのもので、その後のGitコミットで、スタックやデプロイメントステージの最新の変更を反映した新しいデプロイメントが自動的に開始されます。

CDKアプリのメインエントリーポイントです。
CDKパイプラインの初期化を行います。
パイプライン内の他のスタックです。
これはAmplifyプロジェクト以外の「その他」のバックエンドリソースが置かれる場所です。
パイプラインは複数の “ステージ “を含みます。
CDKパイプラインは”Source”、”Build”、”UpdatePipeline”、”PublishAssets “ステージを含みます。
ここで独自のステージを定義することもできます。
パイプラインを定義するスタックで、どのステージが割り当てられているかを示します。

(これはパイプラインの一例です。エクスポートされたAmplifyバックエンドは他のCDKの構造と同じ構造をしているので、他のCDKの構造と同じように使うことができます。)私たちが主に注目すべき重要なファイルは2つあります。
a) my-pipeline-stack.ts これはパイプラインのステージを含むパイプライン全体を定義するもので、b) amplify-stage.ts これはAmplifyスタックを含むデプロイメントステージです。

5. CDK パイプラインの設定

my-pipeline-stack.tsでは、新しいパイプラインを作成し、2つのステージを追加しています。20行目のコードスニペットを更新して、GitHubのユーザー名を使用するようにしてください。このユーザー名は、フォークしたリポジトリと同じものでなければなりません。

input: CodePipelineSource.gitHub('<YOUR_GITHUB_USERNAME>/mycdkpipeline', 'main'),

AWS CodePipelineがこのGitHubリポジトリから読み込むためには、AWS Secrets Managerにgithub-tokenという名前でGitHubパーソナルアクセストークンが平文のシークレット（JSONシークレットではない）として保存されている必要があります。手順については、「Tutorial: Create and retrieve a secret」を参照してください。このトークンは repo および admin:repo_hook のスコープを所有している必要があります。

6. AmplifyのバックエンドをCDKプロジェクトにエクスポートする

それでは、Amplifyプロジェクトに戻ってみましょう。

cd ../mytodoapp

そして、AmplifyプロジェクトをCDKにエクスポートします。

amplify export --out ../mycdkpipeline/lib

これで、mycdkpipeline/lib/amplify-export-mytodoappにエクスポートされたAmplifyに関するファイル群が表示されます。これらのファイルには、Amplifyが生成したリソースのCloudFormationテンプレート、GraphQLリゾルバのコードや関数のコードなどのアセットが含まれています。

CDKアプリケーション内で簡単に利用できるようにする場合、AmplifyExportedBackendの構造を使ってアプリに組み込むことができます。stages/amplify-stage.ts を開き、CDKのコンストラクトをインポートし、新しいAmplifyスタックを作ります。編集後、amplify-stage.ts ファイルは以下のようになります。

import { CfnOutput, cfnTagToCloudFormation, Construct, Stage, StageProps } from '@aws-cdk/core';
import { AmplifyExportedBackend } from '@aws-amplify/cdk-exported-backend';
import * as path from 'path'
import * as cdk from '@aws-cdk/core'

export class AmplifyStage extends Stage {
  
  constructor(scope: Construct, id: string, props?: StageProps) {
    super(scope, id, props);
    
    // ADD AMPLIFY EXPORTED BACKEND STACK HERE
    const amplifyStack = new AmplifyExportedBackend(this, "amplifyexportedbackend", {
      path: path.resolve(__dirname, '..', 'amplify-export-mytodoapp'),
      amplifyEnvironment: "dev"
    })
  }
}

7. CDK パイプラインのデプロイ

CDK パイプラインの変更をすべて git にコミットし、GitHub にプッシュします。

git add .
git commit -a -m "Initial commit"
git push

CDKパイプラインを初めてセットアップする場合は、最初のデプロイメントの前に環境（AWSアカウントIDとリージョンの組み合わせ）をブートストラップする必要もあります。CDKのブートストラップについてはこちらをご覧ください。

Bootstrapping – AWS Cloud Development Kit (CDK)

npx cdk bootstrap --profile default # REPLACE WITH YOUR PROFILE

次に、パイプラインをクラウドに展開します。

npx cdk deploy

デプロイが完了すると、AWS CodePipelineコンソールに新しいCDKパイプラインが表示されます。

AWS CodePipeline screenshot

8. Amplifyプロジェクトの開発が進んだ後に、もう一度エクスポートを行う

開発が進んだ後にもAmplify CLIを使い続けることができます。これはOne-way Doorではありません! “Export “は “eject “ワークフローではありません! フロントエンド開発者はAmplify CLIをアプリケーションの開発イテレーションの中で早く使用し続けることができ、DevOpsチームに渡すか、中央管理型のデプロイメントパイプラインに送信する準備ができ次第、いつでもamplify exportを実行できます。

それでは、Amplifyのバックエンドに認証リソースを追加してみましょう。

amplify add auth

(このデモはすべてデフォルトの設定で進めることができます。)

スタックを再びCDKパイプラインにエクスポートします。

amplify export --out ../mycdkpipeline/lib/

新しいビルドを開始するには、変更内容をGitにコミットするだけでビルドを開始することができます。CI/CDパイプラインが自動的にその変更を受け取り、デプロイをするため、コードの変更は必要ありません。

git add .
git commit -a -m "Added Amplify auth"
git push

CodePipelineのコンソールでデプロイの進捗状況を確認することができます。

AWS CodePipeline screenshot

🥳 成功

このブログ記事ではAmplifyのバックエンドをデプロイするCI/CDパイプラインを構築しました。フロントエンドチームは、Amplify CLIを利用してGraphQL APIのクライアントサイドコードを生成し、ローカルで迅速にイテレーションを行い、必要に応じてリリースの準備ができたバックエンドをDevOpsに引き渡すことができます。

詳細は以下のドキュメントをご確認ください。

Export Amplify project to CDK

フィードバックがあればGitHubで共有するか、Discordのコミュニティに参加してください！

翻訳はTechnical Solutions ArchitectのTakuya Setakaが担当し、Developer Relations Engineer（Mobile/Web）のDaijiro WachiとISV/SaaS Solutions ArchitectのKoya Kimuraが監訳しました。

Amazon Web Services ブログ