Amplify Gen2 を CodeCatalyst と Amazon Q（生成AI）を使って理解していく

はじめに

AWS Summit Japan 2024 に参加してきました。久しぶりにオンラインではなく現地参加で技術情報を浴びてきましたので手を動かさずにはいられないと思い記事を執筆します。

今年の AWS Summit は生成AI祭りでした。Amazon Bedrock の話を中心に、個人的に刺さったキーワードが CodeCatalyst, Amazon Q, Amplify Gen2 です。

それでは、実際に手を動かしながら理解していきたいと思います。
CodeCatalyst で開発環境を作り、Amazon Q に開発支援をしてもらいながら、Amplify Gen2 でフロントは React アプリケーション、バックエンドは DynamoDB という構成にしたいと思います。

おそらく後日アーカイブ動画が出ると思いますが、本記事を書くきっかけになったセッションは以下の２つです。

• AWS Amplify と Amazon Q Developer を活用した生成 AI アプリケーションの作り方
• Amazon CodeCatalyst と Amazon Q で開発者の生産性を向上！ - AI アシスタントの活用方法 -

CodeCatalyst とは、使い始める

CodeCatalyst の概要は以下の公式ページをご覧ください。開始するを押してセットアップしていきます。ここから先のキャプチャーは Amazon CodeCatalyst 及び AWS 上の画面キャプチャを引用しています。

（出典）https://aws.amazon.com/jp/codecatalyst/

Sign in with AWS Builder ID でログインします。AWS Builder ID は個人のアカウントです。

次に AWS アカウント ID を入力して CodeCatalyst の環境を作ります。

以下の表示が出たら CodeCatalyst に戻ります。

Create your first project を押して CodeCatalyst のプロジェクトを作ります。

３種類から選べます。テンプレート（ブループリント）から始める、既存の Git リポジトリを持ってくる、ゼロからスクラッチで始める。といったところでしょうか。

今回は Start with a blueprint でテンプレートから選びます。

テンプレートを選択すると説明が表示されるのでご自身の用途に合わせて選択してください。今回は Single-page application で進めます。

次にプロジェクト設定をします。

Project details では名前を決めて Git リポジトリを選択します。今回は CodeCatalyst で進めます。

選択したテンプレートによって内容は変わると思いますが、フレームワークや CI/CD ワークフローを選択できるようです。

AWSアカウントIDはプロジェクト作成時に選択したものが表示されているはずです。CodeCatalyst 用の IAM role を作成し、付与します。

Trust policy

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "CodeCatalyst",
      "Effect": "Allow",
      "Principal": {
        "Service": [
          "codecatalyst-runner.amazonaws.com",
          "codecatalyst.amazonaws.com"
        ]
      },
      "Action": "sts:AssumeRole"
    }
  ]
}

Inline policy

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "amplify:*",
        "cloudformation:*",
        "ecr:*",
        "ssm:*",
        "s3:*",
        "iam:Get*",
        "iam:PassRole",
        "iam:CreateRole",
        "iam:DeleteRole",
        "iam:TagRole",
        "iam:UpdateRole",
        "iam:AttachRolePolicy",
        "iam:DetachRolePolicy",
        "iam:PutRolePolicy",
        "iam:CreatePolicy",
        "iam:DeletePolicy",
        "iam:CreatePolicyVersion",
        "iam:DeletePolicyVersion",
        "iam:PutRolePermissionsBoundary",
        "iam:DeleteRolePermissionsBoundary",
        "sts:AssumeRole",
        "sts:GetCallerIdentity"
      ],
      "Resource": "*"
    }
  ]
}

リージョンを選択します。2024/06/22 時点では日本のリージョンは選択できません。早く来てほしいですね。今回は us-west-2（オレゴン）にしておきます。

その他、テンプレートのシステム構成だったり、生成するプロジェクトのプレビューを見られたりします。

CodeCatalyst の環境準備が整ったら Create project を押してプロジェクトを作成しましょう。

CodeCatalyst で開発をしてみる

まずはリポジトリを手元に持ってきます。

Clone repository を押して Git の HTTPS clone URL をコピーしてローカルPCのコマンドラインで実行します。パスワードを問われますので Personal access token（PAT） を生成してコピーしパスワードとして入力してください。

local:~/dev/prac$ git clone https://[ユーザー名]@git.us-west-2.codecatalyst.aws/v1/[ユーザー名]/[CodeCatalystプロジェクト名]/[リポジトリ名]
Cloning into '[リポジトリ名]'...
Password for 'https://[ユーザー名]@git.us-west-2.codecatalyst.aws':

remote: Counting objects: 41, done.
Unpacking objects: 100% (41/41), 25.94 KiB | 171.00 KiB/s, done.

Dev Environments（開発環境） を利用すればローカルに開発環境を準備せずとも AWS Cloud9 を使って開発することもできるようです。今回はローカルで開発します。

次に Issue を切ってブランチを作成し、ソースコード修正したものを PR 提出します。

Issue を作成すると、、、

Issues のボードに並びました。 Todo > In progress > In review > Done というステータスで管理できます。

Atlassian の Jira / Bitbucket のようにチケットからブランチが切れるかと思いましたがどうやらできないようなのでローカルで isssue/1 というブランチを切ります。簡単な修正をして Push します。ここで少し手間だなと思ったのが前述のパスワード（PAT）を都度生成してコピー＆ペーストしないといけないことです。SSH 鍵おけたりしないんでしょうかね。後日調べてみてできそうなら追記します。

さて、ローカル作業が終わったので CodeCatalyst に戻るとブランチが作られています。

Pull request を提出してみます。

差分も表示されています。

本来はここでレビューなどを行いますが今回は PR を Fast forward merge でマージします。

そうすると CI/CD パイプラインが PR をきっかけに動いています。これはテンプレートが準備してくれているものです。ビルドとテストが実行されています。

onPullRequestBuildAndTest.yaml

Name: onPullRequestBuildAndTest
SchemaVersion: "1.0"
Triggers:
  - Type: PULLREQUEST
    Branches:
      - main
      - develop
    Events:
      - OPEN
      - REVISION
Actions:
  BuildAndTest:
    Compute:
      Type: Lambda
      Fleet: Linux.x86-64.Large
    Identifier: aws/build@v1
    Inputs:
      Sources:
        - WorkflowSource
    Outputs:
      Artifacts:
        - Name: build
          Files:
            - build/**/*
      AutoDiscoverReports:
        ReportNamePrefix: Test
        IncludePaths:
          - coverage/**
          - reports/**
    Configuration:
      Steps:
        - Run: npm install
        - Run: npm test -- --coverage --watchAll=false --testResultsProcessor="jest-junit"
        - Run: npm run build
Compute:
  Type: Lambda
  Fleet: Linux.x86-64.Large

左メニューの Reports からテストカバレッジも確認でき、便利そうですね。

Amazon Q（生成AI）を使ってみる

Amazon Q を有効にする

CodeCatalyst の目立つ位置に Add with Amazon Q というボタンがあるのでクリックしてください。右側にチャットが出てきて生成AIと対話できます。今は英語ですが先日の AWS Summit Japan 2024 のキーノートで Amazon Q が日本語対応すると発表されていたので近い内に日本語で使えると思います。楽しみですね。

次に Issue を元に Amazon Q（生成AI）がソースコードの作成をしてくれる機能を使ってみます。Issue を作成する際に Assigners で Assign to Amazon Q を選びます。しかし、CodeCatalyst スペースの生成AIへのアクセス権の設定をしていないと利用できません。

Your space doesn't have access to the generative AI features of Amazon CodeCatalyst. Only users with the Space administrator role can enable access to these features.
スペースには、Amazon CodeCatalyst の生成 AI 機能へのアクセス権がありません。スペース管理者ロールを持つユーザーのみが、これらの機能へのアクセスを有効にできます。

CodeCatalyst スペースの生成AIへのアクセス権の設定ページへ CodeCatalyst のトップページ > Settings > Generative AI でたどり着きます。

You can grant access to the generative AI features in Amazon CodeCatalyst for users in this space who have Amazon Q Developer subscriptions. For more information, see Pricing . Generative AI features require the use of services in other AWS Regions and, if applicable, will require that your data is sent to another AWS Region. By enabling generative AI features in Amazon CodeCatalyst, you consent to such cross-Region calls.
Amazon Q Developer サブスクリプションを持つこの分野のユーザーに、Amazon CodeCatalyst の Generative AI 機能へのアクセスを許可できます。詳細については、「料金表」を参照してください。Generative AI 機能を使用するには、他の AWS リージョンのサービスを使用する必要があり、該当する場合は、データを別の AWS リージョンに送信する必要があります。Amazon CodeCatalyst で Generative AI 機能を有効にすると、このようなクロスリージョン呼び出しに同意したことになります。

（参考）
https://aws.amazon.com/jp/q/developer/pricing/
https://codecatalyst.aws/explore/faq

CodeCatalyst で Issues を立てて Amazon Q で Amplify Gen2 のソースコードを自動生成します

さて、本題です。Amazon Q（生成AI）に Amplify Gen2 のソースコードを作ってもらおうと思います。依頼内容は以下です。英語に翻訳して Issue を切ります。

Amplify Gen2の設定ファイルを作成する

1. フロントエンドは React で Amplify Hosting を利用する
2. バックエンドは DynamoDB を利用し API で通信する

Issue を作成すると Amazon Q がプログラムを開発し始めました。

今回は Amazon Q と対話しながらタスクを進めるようにしていますので一歩づつ進んでいきます。

タスクの背景を説明したり、

具体的な作成方針を説明してくれます。

Reply で生成AIに細かい指示を出すこともできます。今回はこのまま進めるので Proceed を押します。

しばらくすると、ソースコードが生成されて Pull Request が作られています。素晴らしいですね。

はたしてこれは正しいソースコードなのでしょうか？

生成AIは必ずしも正しいアウトプットを出すとは限りません。ここからは人の目で判断をしていくしか無いと思います。

ここからは CodeCatalyst と Amazon Q の話からは路線を変えて、Amplify Gen2 の話をしていきます。

AWS Amplify Gen2 とは

Amplify Gen2（第二世代）はフルスタック TypeScript になった

2024/5/6 に Amplify Gen2 が一般提供（GA）されました。
Gen2 とは Generation2（第二世代）のことであり、これまでの Amplify が進化したよ、ということです。

これまでの Gen1 はバックエンドの構築は CLI ベースでしたが Gen2 では バックエンドを TypeScript の CDK をベースにコードファーストでの開発ができるようになります。私は Amplify Gen1 を使うときはフロントエンドのホスティングと認証は利用しつつも、バックエンドは Amplify Gen1 で未対応の機能を実装しようとすると手詰まりしてしまうので別物として開発していました。

Gen2 ではフロントエンドもバックエンドも両方とも TypeScript で開発できるということで期待をしておりました。AWS Summit Japan 2024 でも Amplify Gen2 の話をたくさん聞きまして、早く使ってみたいという気持ちが高まりました。

（出典）https://aws.amazon.com/jp/amplify/

※参考までに過去 Amplify Gen1 について書いた記事も貼っておきます。

さて、ここからは実際に手を動かして Amplify Gen2 の理解を深めたいと思います。

公式チュートリアルを元に進めていきます。

先程まで作っていた CodeCatalyst のテンプレートを一度破棄します。チュートリアルの Create repository from templete にソースコードを置き換えます。先ほどまでは Create React App（CRA）でしたが、Gen2 のテンプレートは Vite になっています。

AWS Amplify にデプロイします。CodeCatalyst のリポジトリを選択したいのですが選択肢にありませんでした。（2024/06/22時点）

仕方ないので GitHub や Bitbucket にリポジトリを引っ越します。本記事ではやりませんが CodeCatalyst からソースコード連携するパイプラインなどを組めば自動化できると思いますが今回は手動のお引越しです。残念。

Git リポジトリを Amplify とつなげます。

アプリのデプロイが開始します。

Amplify にデプロイされました。フロントエンドは Vite / React で裏側は DynamoDB となっている Todo アプリです。

Amplify Gen2 のテンプレートソースコードを眺めてみます

Gen2 ではバックエンドは amplify フォルダ配下に配置されています。

Amplify Gen2 のバックエンドを定義するファイルです。
認証やデータアクセスのリソース定義を auth や data 配下に resource ファイルを作り管理しています。

backend.ts

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { data } from './data/resource';

defineBackend({
  auth,
  data,
});

データアクセスのリソース管理を行うファイルです。Gen1 と比べて TypeScript のコードで記述されているため圧倒的にわかりやすいですね。ここの型定義をフロントエンドでも使えるということで Gen2 の注目機能はここだと思っています。

data/resource.ts

import { type ClientSchema, a, defineData } from "@aws-amplify/backend";

const schema = a.schema({
  Todo: a
    .model({
      content: a.string(),
    })
    .authorization((allow) => [allow.publicApiKey()]),
});

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: "apiKey",
    // API Key is used for a.allow.public() rules
    apiKeyAuthorizationMode: {
      expiresInDays: 30,
    },
  },
});

Cognito のメール認証の設定は以下のようになります。かんたんですね。

auth/resource.ts

import { defineAuth } from '@aws-amplify/backend';

/**
 * Define and configure your auth resource
 * @see https://docs.amplify.aws/gen2/build-a-backend/auth
 */
export const auth = defineAuth({
  loginWith: {
    email: true,
  },
});

フロントエンドは src 配下にあります。ここは大きく変わらないかなと思いますが、バックエンドの型定義とフロントエンドの型定義を同一ソースコード内で管理できるのは良いですね。

他にも UI ライブラリやストレージなども進化している

本日の記事としては以上としますが UI ライブラリも進化しているようで React のコンポーネントと Amplify を組み合わせてかんたんに開発ができるようになってきているみたいです。この辺りも触ってみたら記事を書こうかなと思います。

おわりに

AWS Summit Japan 2024 に現地参加し、刺激を受けた２日間でした。生成AIのセッションが目白押しで、生成AIの技術情報のシャワーを浴びることができました。聞けなかったセッションのアーカイブ動画も見ていきたいと思います。

久しぶりにワクワクしたので熱が冷めない内に手を動かしてみて生成AIの手触り感・解像度が少しだけ上がりました。結局 Amplify Gen2 と CodeCatalyst, Amazon Q をつなげることができなかったので、本稿では別々に理解を進めることになってしまいましたがどちらも技術の進化を感じました。キーノートでは Amazon Q の日本語対応という発表もありましたので、これからはますます生成AIを使っていきたいです。

来年の AWS Summit も楽しみですね。ではまた。