SYSTEM NOTICE

Auto translation by AI. Be sure, accuracy, nuances and authorial intent may not be fully reflected.
見出し画像

The Story of How I Built a Development Environment in One Month Where Web Services Are Completed Just by Talking to AI


It started with frustration over the "tediousness" of development.

"It took another hour to set up the environment..." "What should I write for the commit message..." "It's a pain to investigate why the test failed..."

Every time I developed a microservice on GCP, these small "tedious" tasks would pile up. I wanted to focus on the service features, but I was spending my days on peripheral tasks instead.

"I want to leave all the tasks that can be handled by AI to the AI."

Driven by this thought, I started building a GCP development template foundation and AI workflow from scratch. About a month later, I was finally able to do the following:

make awf FEATURE="ユーザー認証機能を追加して"

With this single command, the AI handles everything from requirements analysis to implementation, testing, and committing.

In this article, I will explain how I built this system, including the technical points.


What I built: The big picture

System architecture

It is a modern microservice development environment running on GCP:

┌─────────────────────────────────────────┐
│   開発者(自然言語で指示)              │
└──────────────┬──────────────────────────┘
               │
               ▼
┌─────────────────────────────────────────┐
│   AIワークフロー(Claude)               │
│   ・要件分析                             │
│   ・設計・実装                           │
│   ・テスト生成・実行                     │
│   ・デバッグ・修正                       │
│   ・コミット                             │
└──────────────┬──────────────────────────┘
               │
               ▼
┌─────────────────────────────────────────┐
│   GCP環境                                │
│   ・Cloud Run(API & ML Service)       │
│   ・Cloud Build(CI/CD)                │
│   ・Firestore / Cloud SQL               │
└─────────────────────────────────────────┘

Distinctive mechanisms

1. High-speed builds with a two-layer Docker structure

I separated the system tool layer, which changes infrequently, from the development tool layer. The build that took 8 minutes the first time now takes 30 seconds from the second time onwards.

2. Time-saving with differential deployment

It automatically detects and deploys only the microservices that have been changed. Even if there are 10 services, if only one service is changed, the deployment is completed in 3 minutes.

3. AI-driven development cycle

From generating commit messages to analyzing the causes of test failures and fixing code, the AI executes tasks autonomously.


History of evolution: v7.x → v11.x

Phase 1: Starting with small automation (v7.x - early v8.x)

I started with a small feature called "automatic commit message generation".

$ git add src/auth/login.ts
$ make ai-commit-dry

生成されたコミットメッセージ:
================================
feat(auth): ログイン機能にリフレッシュトークンを実装

- トークンの有効期限を15分に設定
- リフレッシュトークンで自動再認証を実装
- エラーハンドリングを改善
================================

The time I used to spend worrying about "how should I write this..." every time has vanished. It's small, but it has definitely improved the development experience.

The next thing I added was automated PR reviews. The AI analyzes the changes in a Pull Request and posts review comments from the perspectives of code quality, security, and performance.

Phase 2: AI actively solving problems (late v8.x - v9.x)

The turning point was the integration of Model Context Protocol (MCP) into E2E testing.

Before: Test fails → Read error logs → Investigate cause → Fix (30 minutes)

After improvement: Test fails → AI analyzes screenshots and error logs → Suggests a fix (5 minutes)

Actual analysis example:

原因: セレクタ #login-button が見つかりません
理由: 最近のコミット a1b2c3d でボタンのIDが変更されています
提案: data-testid="login-submit" を使用してください

It was the moment AI changed from a mere tool into a partner that actively solves problems.

During this period, I also added:

  • Integrated upgrade system: Safely migrates templates to new versions (with automatic backups, conflict resolution, and verification)

  • Automatic detection of breaking changes: Automatically checks for API or DB schema changes

  • API compatibility check: Guarantees compatibility between versions

Phase 3: One-click development environment setup (v10.x)

I solved the problem where "it takes half a day to set up the environment when a new member joins."

make env-install

With this single command, Docker, Node.js, Claude CLI, Python (uv), Playwright, and gcloud CLI are automatically installed.

Effect:

  • Before: Manually install each tool → 10-15 minutes

  • After improvement: make env-install → 3-5 minutes

Furthermore, I implemented GCP-specialized release automation. You can consistently execute everything from version updates and Git tag creation to Cloud Build and Cloud Run deployment in an interactive format.

Phase 4: Fully autonomous AI workflow (v11.x)

Finally, the "AI Workflow" that automates the entire development process is complete.

How to use:

make awf FEATURE="ユーザー認証機能を追加してください"

8 Phases executed by AI:

Phase 0.5: 対話で最適化
├─ 「時間予算は?」「品質レベルは?」
└─ 回答に応じてPhase数を自動調整

Phase 1: 要件分析
└─ 自然言語を構造化データに変換

Phase 2: 設計計画
└─ アーキテクチャとファイル構成を決定

Phase 3: 実装
├─ コード生成
├─ 型チェック
└─ 自動修正

Phase 4-6: テスト
├─ 単体テスト生成・実行
├─ 統合テスト
└─ E2Eテスト(失敗時は原因分析して修正)

Phase 7: 品質チェック
├─ Linter
├─ セキュリティスキャン
└─ コードカバレッジ測定

Phase 8: Git操作
├─ コミットメッセージ生成
└─ コミット & プッシュ

Execution example (excerpt):

=== Phase 0.5: ワークフロー最適化 ===
どのくらい時間をかけられますか?
1) 30分以内(クイック実装)
2) 1-2時間(標準実装)
3) 半日以上(高品質実装)
選択 (1-3): 2

求める品質レベルは?
1) MVP(動作確認のみ)
2) プロダクション相当
3) エンタープライズグレード
選択 (1-3): 2

設定完了:
  実行Phase数: 5
  E2Eテスト: 実行
  パフォーマンステスト: スキップ

=== Phase 1: 要件分析 ===
✓ 要件分析完了
  JWTベースのユーザー認証システム

=== Phase 3: 実装 ===
  実装中: services/api/src/routes/auth.ts
  実装中: services/api/src/controllers/auth.controller.ts
  実装中: services/api/src/middleware/auth.middleware.ts
✓ 実装完了

=== Phase 4: 単体テスト ===
  テスト生成中: services/api/src/routes/auth.test.ts
  ✓ 12 tests passed
✓ 単体テスト完了

=== Phase 8: Git操作 ===
コミットメッセージ:
feat(auth): ユーザー認証機能を実装

- JWTベースの認証システム
- ログイン・ログアウトエンドポイント
- 認証ミドルウェア
- パスワードハッシュ化(bcrypt)

Tests: 12 passed
Coverage: 87%

コミットしますか? (y/n)
選択: y
✓ コミット完了

In the morning, I run this command and head to a meeting. When I return, the authentication feature is implemented, tests are passed, and the commit is finished.


Technical points

1. Architecture

Service configuration:

  • API Gateway: TypeScript/Express.js

  • ML Service: Python/FastAPI

  • Data layer: Firestore (real-time), Cloud SQL (transactional), Pub/Sub (asynchronous)

Infrastructure:

  • Cloud Run: Serverless, auto-scaling

  • Cloud Build: CI/CD

  • Secret Manager: Secret management

2. CI/CD improvements

Differential deployment mechanism:

  1. GitHub Actions detects changed files

  2. Build only affected services

  3. Parallel deployment with Cloud Build

  4. Automatic deployment to Cloud Run

Result: 30 minutes for 10 services total → 3 minutes for one service

3. AI Integration Tech Stack

  • Claude CLI: A wrapper for the Anthropic API

  • MCP (Model Context Protocol): Context understanding when tests fail

  • GitHub Actions: Execution environment for automated PR reviews

4. Security Considerations

The code examples in this article are intended for a development environment. Please add the following for production environments:

Authentication and Authorization:

  • Configure appropriate authentication for Cloud Run services (--no-allow-unauthenticated)

  • Implement JWT validation or API key authentication in API Gateway

Sensitive Information Management:

  • Manage all sensitive information using Secret Manager

  • Do not write directly into environment variables

Network Security:

  • Base communication within a VPC

  • Allow only the minimum necessary ports and IPs

Regular Scanning:

  • Regular execution of npm audit and pip audit

  • Vulnerability scanning for container images

  • Introduction of static analysis tools (SonarQube, etc.)


Achievements

1. Dramatic improvement in development speed

  • Environment setup: 15 minutes → 5 minutes (67% reduction)

  • Deployment: 10 minutes → 3 minutes (70% reduction)

  • Commit tasks: 2 minutes → 30 seconds (75% reduction)

2. Improvement in quality

  • Test coverage: Maintained at an average of 85% or higher through automatic generation

  • Root cause identification for E2E failures: Manual 30 minutes → AI analysis 5 minutes

  • Security vulnerabilities: Early detection via automated scanning

3. Improvement in developer experience

  • Significant reduction in onboarding time for new members

  • Liberation from routine tasks

  • Increased time available to focus on creative work

Next steps: Toward an Agent and MCP-centric architecture

Currently, with the advent of Claude's plugin functionality (MCP Servers), I am re-architecting the entire template.

New architecture concept:

  1. Elimination of custom scripts

    • Replacing original shell scripts with the MCP standard protocol

    • Moving toward a more versatile and maintainable configuration

  2. Utilizing MCP Servers

    1. mcp-servers/ ├── filesystem/ # File operations ├── git/ # Git operations ├── github/ # GitHub API integration ├── postgres/ # Database operations ├── playwright/ # Browser automation └── custom/ ├── gcp-deploy/ # GCP deployment └── code-quality/ # Quality checks

  3. Integration with Claude Desktop

    • IDE-free development environment

    • Execute everything from file creation to deployment using natural language

    • Utilize project-specific knowledge as context

The Goal:

An "AI pair programmer" environment where developers can complete the entire process from design to deployment just by talking to Claude. By reconstructing the know-how cultivated through traditional templates into the MCP standard, it becomes a more universal development foundation.


Summary

What I learned in this past month:

  1. Start small

    • Started with small automation like commit message generation

    • Gradually expanded the features

  2. Design AI as a 'Partner'

    • Not just a tool, but an entity that actively solves problems

    • Humans focus on creative decisions, while AI handles mechanical tasks

  3. Developer Experience is Paramount

    • Technical superiority alone is not enough

    • 'Ease of use' and 'clarity' are the keys to success

  4. The Importance of Standard Protocols

    • Adopting standards like MCP is more advantageous in the long run than custom implementations

    • You can benefit from the ecosystem

The Future of Development:

As engineers, what we truly want to pour our passion into is not environment setup or writing test code. It should be the creative work of solving user problems.

If AI can take over routine work, we can spend more time on creating essential value.

The template introduced in this article is an attempt to concretely demonstrate the future form of software development where AI and humans collaborate. It is still a work in progress, but I feel the possibilities are infinite.


Related Links:


Tech Stack (Summary):

  • Languages: TypeScript, Python

  • Frameworks: Express.js, FastAPI

  • GCP: Cloud Run, Cloud Build, Firestore, Cloud SQL, Pub/Sub

  • AI: Claude (Anthropic), Model Context Protocol

  • CI/CD: GitHub Actions

  • Testing: Jest, Playwright, k6


I hope this article serves as a reference for engineers working on AI utilization.
If you have any questions or feedback, please let me know in the comments!


💬 For those who want to consult in detail about AI/DX

You can consult for free regarding internal business efficiency and custom AI development.

From the Akio Rising Laboratory.
https://www.akiorizing.com/

いいなと思ったら応援しよう!