2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Kiro x Amplify Gen 2 - AmplifyでWebアプリを作るためのテンプレートを作ってみた

2
Last updated at Posted at 2026-03-28

はじめに

まずは結論から

  • Kiroの仕様駆動開発を最大限活かすためのAmplify Gen 2テンプレートを作成
  • SteeringSkillsを事前定義し、Kiroで開くだけで即開発開始できる状態に
  • Strands AgentsによるAIエージェント機能もオプションで追加可能
  • テンプレートはGitHubに公開

想定される読者

  • Kiro x Amplify Gen 2 の開発体験をすぐ試したい方
  • Kiroで新規プロジェクトを始めるたびに設定するのが面倒だと感じている方

なぜテンプレートを作ったのか

これからKiroちゃんで遊んでみるにあたり、毎回プロジェクトを整えるのは非効率だと思ったので。

最近Amplifyにハマってるので、Kiroと相談しながらAmplify特化型のテンプレート作ってみました。
また、AIエージェントも使いたいので必要に応じて拡張できるように。

とりあえず今回テンプレート化してみましたが、今後開発を進める中で適宜ブラッシュアップしながら使っていきたいです。

テンプレートの全体像

ベースにしたのは、公式で展開されているAmplify Gen 2のQuickstartです。

アーキテクチャ概要

レイヤー 技術
フロントエンド Next.js + TypeScript
バックエンド Amazon Cognito 他(Amplify Gen 2で定義)
ホスティング Amplify Hosting
エージェント(任意) Python 3.10+ / Strands Agents SDK
エージェント実行基盤(任意) Amazon Bedrock AgentCore Runtime
CI/CD GitHub Actions
IDE Kiro

Webアプリが主役で、エージェント機能はオプションの拡張という位置づけです。

ディレクトリ構成

kiro-amplify-template/
├── src/                # Next.js App Router
│   ├── app/            # ページ・レイアウト
│   ├── components/     # UIコンポーネント
│   ├── hooks/          # カスタムReact hooks
│   ├── lib/            # ロジック・ユーティリティ
│   └── types/          # 型定義
├── amplify/            # Amplify Gen 2 定義
│   ├── auth/           # 認証設定
│   └── data/           # データモデル定義
├── agents/             # Strands Agent(任意)
├── .kiro/              # Kiro設定(Steering + Skills)
│   ├── steering/       # ポリシーファイル
│   ├── skills/         # スキル定義
│   └── settings/       # ワークスペース設定
├── .github/            # CI/CD・テンプレート
├── docs/               # ドキュメント
├── AGENTS.md           # エージェント向けガイドライン
└── package.json

AGENTS.md - エージェント向けガイドライン

AGENTS.mdにはベースとなるガイドラインを設定してます。
あまり詳しくないですが、Kiroだけでなく他のコーディング系AIツールでも読まれるみたいですね。
Kiroに守ってほしい基本的な内容を言語化した形。

リポジトリ原則

  • GitをSource of Truth(信頼できる唯一の情報源)とする
  • Feature branchワークフロー必須(mainへの直接編集禁止)
  • 変更はリクエストのスコープに限定し、無関係なリファクタリングを避ける

セキュリティ原則

  • シークレット・トークン・APIキーのハードコード禁止
  • AWS標準の認証・環境変数を優先
  • IAM・CI/CD・認証・デプロイの変更にはレビュー必須

バリデーション原則

  • 最小スコープのバリデーションを先に実行
  • フロントエンドやバックエンド等、各レイヤーへの影響を明示

Steering設定 - Kiroへのポリシー設定

.kiro/steeringにSteeringファイルを配置しています。
テンプレートの核となる部分。うまく機能すればブレない開発体験を得られるはずです。
常時有効なポリシーとフォルダ毎に設定される条件付きポリシーを使い分けています。

常時有効なポリシー(6ファイル)

プロジェクト全体に適用されるポリシー。全般的なルールや方針を定義します。

ファイル 役割
product.md プロダクトの方向性・方針
tech.md 技術標準・スタック
structure.md リポジトリ構成ルール
security.md セキュリティ要件
repo-workflow.md ブランチ戦略・ワークフロー
testing.md テスト基準

条件付きポリシー(4ファイル)

特定のディレクトリを編集しているときだけ発動するポリシー。
対象を絞ることで、不要なコンテキストでKiroを混乱させないようにします。

ファイル トリガー 役割
amplify-backend.md amplify/ 編集時 バックエンド開発ガイダンス
amplify-frontend.md src/ 編集時 フロントエンド開発ガイダンス
strands-agent.md agents/ 編集時 エージェント開発ガイダンス
github-actions.md .github/workflows/ 編集時 CI/CDガイダンス

お試しでエージェントの開発をしてみたら構築にちょっと苦戦したので、エージェント開発ガイダンスは詳しめに指示してあります。デプロイ手順も現状はひと手間掛ける必要があったので、詳細を明記しました。

Skills設定 - 再利用可能なワークフロー

.kiro/skillsにスキル毎にフォルダを切って配置します。
Skillsはよく行う開発作業を手順化したものです。
Kiroと相談しながら、テンプレートには4つのスキルを用意しました。

amplify-feature

Amplify Gen 2ベースの機能実装手順。
バックエンド(データモデル、認証等)からフロントエンドまでの一連の実装フローを定義しています。

pr-deploy-readiness

PRのサマリー作成とデプロイ準備の確認。フロントエンド・バックエンド・エージェント・CI/CDの各レイヤーへの影響を確認します。

strands-agent-implementation

Strands Agentsを使ったエージェントコードの開発手順。
新規エージェント作成、ツール追加、AgentCore Runtime 向けエントリーポイント定義、ローカルスモークテストの準備に使います。

mcp-tool-onboarding

新しいMCPツールの導入評価。ツールの機能を評価し、プロジェクトへの組み込み方を検討します。
(これもKiroのおすすめで入れたけど、そんなに出番ないかも。必要に応じて活用してください)

MCPサーバー設定

ワークスペースとして以下2つを設定。
グローバルで既に設定済みの場合は消してください。

aws-mcp

AWS関連の作業を幅広くサポートするMCPサーバー。
最新ドキュメントを確認したり、デプロイエラー時のログ調査や各種リソースの設定状況を確認したり。

drawio

draw.ioの図をチャットから直接作成・表示できるMCPサーバー。
設計後にAWSアーキテクチャ図を書き起こしてもらうことでシステム構成全体を把握する。

HooksとPowers

HooksとPowersはテンプレートに設定なし。

  • Hooks:開発進める中で必要になったら作ればOK。
  • Powers:グローバル設定と同じように設定するので、テンプレートに含めない。

使い方(クイックスタート)

1. GitHubリポジトリ作成

以下よりGitHubテンプレートにアクセスします。

画面右上のUse this templateを選択
KiroTemplateGitHub.png

Create a new repositoryをクリック。
KiroTemplateGitHubCreate.png

ご自身のGitHubアカウントでリポジトリを作成します。

  • Repository Name:リポジトリ名を設定。
  • Visibility:Public or Private を選択。自分だけで使うならPrivateに変える。
    KiroTemplateCreateRepository.png

これでテンプレートを使ったリポジトリが作成できます。

2. ローカル環境にクローン

作成したリポジトリからクローンするためのURLを取得します。
KiroTemplateCloneURL.png

ローカル環境の任意の場所で次のコマンドを実行。
git clone <取得したURL>
KiroTemplateClone.png

Kiroでプロジェクトを開くと、Steeringが自動で読み込まれます。
KiroTemplateOpenKiro.png

MCPサーバーはEnable MCPをクリックで有効化します。
KiroTemplateMCPEnable.png

自分の環境だと何故か最初はSkillsが読み込まれませんでした。
Kiroでプロジェクトを開き直したら、読み込まれました。

KiroTemplateSkills.png

3. Powersの設定

以下3つのPowerを設定します。既に端末に設定済みの場合は作業不要。

  • aws-amplify:amplify/ のバックエンド定義やデータモデル、認証周りの作業を最新ドキュメントに基づき実施
  • strands-agent:agents/ 配下のエージェント開発で、SDKの使い方やツール定義のガイダンスを取得
  • aws-agentcore:エージェントをAgentCore Runtimeにデプロイする際の設定やワークフローをサポート

Powersを開いて、AVAILABLEから対象のPower(Build full-stack apps with AWS Amplify)を選択します。
KiroTemplatePowers.png

Installを実行で、Kiroの環境に取り込まれます。
KiroTemplatePowersInstall.png

このように追加されました。
KiroTemplatePowersAdd.png

残りの2つもインストールします。
Build an agent with Strands SDK
Build an agent with Amazon Bedrock AgentCore
KiroTemlatePowersRemain.png

追加したPowerはMCPサーバーのボックス内に表示されます。
KiroTemplatePowersAfter.png

Powersは以下のサイトでもご確認いただけます。

これで環境が整ったので、お好きなアプリケーションを開発できます。

まとめ

今後、色んなアプリケーションを作成するため、元となるテンプレートを作成してみました。
Kiroの仕様駆動開発を最大限活かすには、SteeringとSkillsの設計が鍵になります。
今回は以下を中心にテンプレート化を進めてみました。

  • 10のSteeringファイル(常時有効6 + 条件付き4)でプロジェクトのルールを網羅
  • 4つのSkillsで頻出ワークフローを手順化
  • AGENTS.mdでAIツール全般のガイドラインを定義

これから実際に使ってみる中で、より使いやすいようにブラッシュアップしていければと思います。
GitHubでのテンプレートの作り方など、色々と学びも有りました。

テンプレートからリポジトリを作ることですぐに仕様駆動開発を始められますので、ぜひ使ってみてください。

関連記事

  • サンプルプログラムの利用手順

参考リンク

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?