0
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?

Claude Code×AWS CDKでWebアプリを開発しECSにデプロイしてみた

Last updated at Posted at 2025-12-30

目次

  1. はじめに
  2. Claude Codeとは
  3. AWS CDKとは
  4. 作成するアプリケーション
  5. 前提条件
  6. サブエージェントの作成
  7. Claude Codeでの開発
  8. AWSへのデプロイ
  9. 遭遇した課題と解決
  10. まとめ

はじめに

2回目の投稿となります!
本記事では、話題のClaude CodeとAWS CDKを組み合わせて、AWS上で動作するToDo管理アプリケーションを構築した件についてアウトプットしてみます。

対象読者

  • AWS CDKに興味がある方
  • Claude Codeに興味がある方
  • クラウドやAI周り全般に興味がある方

開発時間

ゼロの状態からClaude Codeでアプリ・インフラのコードを開発しAWS上にデプロイして動作確認するまでのトータルで約1〜2時間程度で完成しました!
Claude Code恐るべし。


Claude Codeとは

概要

Claude Codeは、Anthropic社が提供するAI駆動の開発支援CLIツールです。ClaudeのSonnetモデルを活用し、自然言語での指示だけでコード生成ができます。
トラブルシューティングなどもAIエージェントらしく自動でやってくれます。
そして何より計画・タスク実行の精度がすごい!


AWS CDKとは

概要

AWS Cloud Development Kit (CDK)は、プログラミング言語を使ってAWSインフラを定義できるInfrastructure as Code (IaC)フレームワークです。

特徴

  • プログラミング言語対応: TypeScript, Pythonなど
  • CloudFormation自動生成: CDKコードからCloudFormationテンプレートを生成
  • 型安全: TypeScriptなどの型システムによる補完とエラー検出

なぜCDKを選んだか

  • TypeScriptで記述できるため可読性が高い
  • 今関わっているプロジェクトがAWS CDKを利用しているため、学びたかったから

(後日Terraformでもやってみたい)


作成するアプリケーション

アーキテクチャ概要

architecture.jpg

※今回Claude Codeで開発したIaCコードをGoogle Geminiに読み込ませて画像生成しました。
 本題ではないので詳細は割愛しますが、少しイケてないところはありつつも、画像生成のクオリティもGeminiのNano Bananaはすごい。

技術スタック

  • フロントエンド: HTML/CSS/JavaScript
  • バックエンド: Python Flask 3.0
  • データベース: SQLite on EFS
  • インフラ: AWS CDK (TypeScript)
  • コンテナ: Docker
  • AWS サービス:
    • VPC
    • ECR
    • ECS(Fargate)
    • Application Load Balancer
    • Amazon EFS

主な機能

シンプルなToDo管理用のWebアプリを構築します!

  • ✅ Todoの作成・表示・削除
  • ✅ タスクの完了マーク
  • ✅ リアルタイム統計表示(総数/未完了/完了)
  • ✅ レスポンシブデザイン

前提条件

本記事はWindows環境での構築を前提としています。

必要なツール

1. Node.js

# Node.js 18.x以上をインストール
# https://nodejs.org/ からダウンロード

# バージョン確認
node --version  # v18.0.0以上
npm --version   # 9.0.0以上

2. AWS CLI

# AWS CLIのインストール
# https://aws.amazon.com/cli/ からダウンロード

# インストール確認
aws --version

# aws loginによりコンソールからログインする
# 参考:https://docs.aws.amazon.com/ja_jp/signin/latest/userguide/command-line-sign-in.html
aws login

3. Docker Desktop for Windows

# Docker Desktop をインストール
# https://www.docker.com/products/docker-desktop/

# インストール確認
docker --version

4. AWS CDK CLI

# CDK CLIをグローバルインストール
npm install -g aws-cdk

# バージョン確認
cdk --version  # 2.140.0以上

# CDKのブートストラップ(初回のみ)
cdk bootstrap

5. Git & GitHub CLI

# Gitのインストール
# https://git-scm.com/download/win からダウンロード

# GitHub CLIのインストール
# https://cli.github.com/ からダウンロード

# GitHub認証
gh auth login

Claude Codeのインストール

  • Claude Code利用にあたり、ClaudeのFreeプランでは利用不可のため、Proプランを事前に契約
  • Claude Codeのインストール方法詳細はこちら
    https://code.claude.com/docs/ja/setup

AWSのIAM権限

今回aws cliで利用するIAMユーザーには、以下のAWSサービスへのアクセス権限が必要です:

  • ECS
  • ECR
  • EFS
  • EC2 (VPC, SecurityGroup)
  • ElasticLoadBalancingV2
  • IAM
  • CloudFormation
  • Logs

サブエージェントの作成

Claude Codeには、特定のタスクに特化した「サブエージェント」機能があります。
今回はAWSのシステムアーキテクト兼IaC開発エンジニアに特化した役割を与えたaws-iac-architectエージェントを構築して利用してみます!

主な機能

  • AWSサービスの選定とアーキテクチャ設計
  • CloudFormation/CDK/Terraformコードの生成
  • セキュリティベストプラクティスの適用
  • コスト最適化の提案
  • マルチリージョン設計のサポート

使用例

  1. スラッシュコマンド/agentよりエージェントを作成する
    01_agents.png

  2. "Create new agent"より新規エージェントを作成する
    02_create_agent.png

  3. 今回は利用マシンのグローバルで使えるようにしたいため、Personalを選択
    03_personal.png

  4. Claudeにエージェントの役割を定義してもらうか自分で定義するか。基本は1でよい
    04_generate.png

  5. 自然言語でサブエージェントの役割を支持する
    05_agent.png

  6. 細かいオプションを選択後、作成完了すると、サブエージェント定義のmdファイルが作成される
    09_aws-iac-architect.png

今後このサブエージェントを呼び出してプロンプトを実行することにより、aws-iac-architectエージェントが:

  1. 要件分析
  2. アーキテクチャ設計
  3. CDKコード生成
  4. セキュリティ設定
  5. ドキュメント作成

を自動的に実行します!


Claude Codeでの開発

いよいよここから実際の開発フローを順を追って説明します。
…といっても、ほぼ自動で構築されるので開発しているというよりは、気づいたら終わってる感覚に近いと思います。

サブエージェントを呼び出して、アプリ&インフラのIaCコードを作成

# Claude Codeへのプロンプト指示
AWSアーキテクトのエージェントを利用して、下記に従ってアプリケーションをAWSに構築するためのCDK(TypeScript)を利用したIaCコードを作成して。
・SQLiteを利用した簡易的なToDo機能のあるWebアプリを構築したい
・実行環境はコンテナがいい
・今回はテスト用なので、利用者は少ないためスケーリング設定などは不要だがセキュアに構築したい
・まずはミニマムで構築したい

これだけで、Python(Flask)を利用したWebアプリとAWS CDKのコードが作成されました!
ついでにドキュメントもかなり手厚く作成してくれています。
それも、若手エンジニアレベルのものではなく、熟練のエンジニアが書いたと思わせるクオリティ!

自動生成されたドキュメント
下記のドキュメントが自動生成されました!
今回のサブエージェントを構築時、これらの内容のドキュメントを作成するような指示が自動で定義されていた影響だと思います。

  • README.md: プロジェクト概要
  • ARCHITECTURE.md: アーキテクチャ詳細
  • DEPLOYMENT.md: デプロイ手順
  • SECURITY.md: セキュリティ考慮事項
  • QUICKSTART.md: クイックスタート

AWSへのデプロイ

デプロイ前の準備

1. 依存関係のインストール

npm install

2. CloudFormationテンプレート確認

# TypeScript→CloudFormaton Templateファイルに変換しcdk.outディレクトリに格納
cdk synth

デプロイ実行

cdk deploy

デプロイ結果の確認

AWSマネジメントコンソールよりCloudFormationのスタックを開くと、数分後「CREATE_COMPLETE」となっており、デプロイが完了している!
15_cfn.png

動作確認

  1. AWSマネジメントコンソールでALBのページにアクセス
    16_ALB.png

  2. "DNS名"をコピーし、ブラウザのURLに貼り付けると、Todoアプリケーションが表示されることを確認
    17_ToDoApp.png

  3. Todoの作成・削除をテスト
    19_list.png


遭遇した課題と解決

Flaskモジュールが見つからないエラー

エラー内容

ModuleNotFoundError: No module named 'flask'

初回デプロイ時、ECSタスクのログで上記エラーが発生し、コンテナが起動しませんでした。

原因

Dockerfileのpip installがうまくいっておらず、flask含むPythonパッケージのインストールに失敗していた

Claude Codeの対応

下記のようなプロンプトを投げたら自動で修正してくれました。

"ECSタスクで ModuleNotFoundError: No module named 'flask' というエラーが出ています"
修正してください。

再デプロイ後、一回の修正でうまく動くようになりました!


まとめ

プロジェクトの成果

本プロジェクトでは、Claude CodeとAWS CDKを組み合わせることで:

  • ✅ 1〜2時間でAWSのインフラを自動構築
  • ✅ AWS IaCエンジニアエージェントによるWell-Architected Frameworkを参考にしたベストプラクティスを適用
  • ✅ ドキュメントを自動生成
  • ✅ トラブルシューティングの自動解消(今回はシンプルな構成だったのもあり、1回のやり直しですべて動きました)

を実現できました。

最後に

この記事を下記ながら、私が9年ちょっと程前のSIerの新卒研修でJavaの数十行のプログラムを書くのに苦戦していたことをふと思い出しました。
この時の私は、まさか9年後にAIがすべて自動でアプリやインフラまで構築してくれるだなんて夢にも思ってませんでした笑
それぐらい進化の早い領域なんだなと改めて実感。。

これでもAIエージェントの時代もまだ黎明期です。
今後もAWSやAIエージェント領域などを中心にいろいろキャッチアップしつつ、アウトプットも勉強と思い発信していければと思います!

ここまで読んでいただきありがとうございました!

0
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
0
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?