ハッピーバイブコーディング！週100回PoCをデプロイできるインフラ作っちゃいました 🚀

こんにちは、ENECHANGEの石橋です。

昨日の柏木統括部長の記事で語られた「AIエージェントによる組織変革」。
まさにその具体例として、デザイナー5人が週100回※だってPoCをデプロイできるインフラを作っちゃいました！🎉

※週100回は「それくらいのペースでデプロイしてやるぞ！」という私たちの気合いを表しています。

🚀 ENECHANGE 2.0 への挑戦

このインフラは単なる技術プロジェクトではありません。
ENECHANGE 2.0 の実現に向けた意欲的な一歩です。

全社員がアイデアを形にできる力を持てば、イノベーションの速度は格段に上がります。デザイナー、ビジネスサイド、エンジニア、全員が一丸となって新しい価値を創造する。

この「バイブコーディング」インフラで、デザイナーがPoCを爆速で作り、経営陣が即レビュー、開発チームが即プロダクト化というサイクルの実現を目指しています：

PoCの質・量ともに最大化: アイデアをすぐに形にできるようになり、より多くのチャレンジが可能に
失敗からの高速学習: 「作って終わり」ではなく、すぐにフィードバックを得て次に活かせる環境を整備
アイデアから市場投入までのリードタイム短縮: 組織全体のイノベーション速度向上を狙う

本記事では、技術知識がなくてもAIと対話するだけでプロダクトが作れる「バイブコーディング」を実現するために構築したインフラの技術的な工夫について紹介します。

前回の記事は、こちらからご覧いただけます。

tech.enechange.co.jp

🤖 バイブコーディングとは

「バイブコーディング」とは、Cursorなどの AI 搭載エディタに自然言語で指示を出すだけでプログラムを作成する開発スタイルです。「このボタンを青くして」といった日常的な言葉で指示すると、AIがコードを生成してくれます。

この開発スタイルにより、（少なくともPoCレベルでは）プログラミング経験がないデザイナーでもWebアプリケーションの開発が可能になりました。

🏗 技術構成

インフラ構成はシンプルかつ効果的です：

GitHub Actions: ワンクリックでプロジェクトを選択してデプロイ
AWS S3 + CloudFront: 静的サイトホスティングで高速配信
認証機能: PoCを安全に共有できる仕組み

技術的な詳細よりも、デザイナーが迷わずに使えることを最優先に設計しました。

開発体験の統一

create-new-poc.shスクリプトの工夫

単にプロジェクトを作成するだけでなく、GitHub Actionsのワークフローも自動で更新する仕組みを実装しました。

# 新しいプロジェクトをGitHub Actionsの選択肢に追加
# workflowファイルを自動で書き換える
sed -i.bak "/options:/a\\
          - $project_name" \
  .github/workflows/deploy-to-s3.yml

この自動化により、デザイナーは新しいPoCを作成後、すぐにデプロイが可能になりました。DevOpsチームのサポートを待つ必要がなくなり、開発速度が大幅に向上しています。

$ ./create-new-poc.sh
プロジェクト名を入力してください: cafe-search
✅ プロジェクト cafe-search を作成しました
✅ GitHub Actions ワークフローを更新しました
✅ 準備完了！早速コーディングを始めましょう！

# 作成されたファイル構成
cafe-search/
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   └── components/
├── package.json
├── vite.config.ts
└── tsconfig.json

Viteを採用した理由

ビルドツールにはViteを採用しました。選定理由は以下の通りです：

高速なHMR (Hot Module Replacement): コード変更が即座にブラウザに反映され、開発体験が向上
優れたTypeScriptサポート: AIが生成するコードの型安全性を担保
高速なビルド: 待ち時間を最小化し、イテレーション速度を向上

デプロイフローの設計

インフラの再利用性を最大化

先ほどのcreate-new-poc.shスクリプトが自動でワークフローを更新するため、一つのワークフローで複数のプロジェクトを管理できるようになります。

on:
  workflow_dispatch:
    inputs:
      project:
        description: 'Deploy project'
        required: true
        type: choice
        options:
          - haccp-ui
          - cafe-search
          # 新しいプロジェクトはここに自動追加される

この仕組みにより、GitHubのワークフローでプロジェクトをドロップダウンから選択するだけで、同じインフラ環境を使い回してデプロイできます：

新しいPoCごとにインフラを再構築する必要がない
一度構築したCI/CDパイプラインを全プロジェクトで共有
運用コストを最小限に抑制しながら開発速度を最大化

デザイナーは技術的な設定を気にすることなく、プロジェクト名を選ぶだけで本格的なデプロイができるようになりました。

CloudFrontキャッシュの最適化

PoCは頻繁に更新されることを考慮し、CloudFrontのTTLを0に設定しました。

この設定により、デプロイ後すぐに最新のコンテンツが表示されるようになり、「デプロイしたのに反映されない」という問題を回避できます。

default_cache_behavior {
  target_origin_id = aws_s3_bucket.poc_bucket.id
  viewer_protocol_policy = "redirect-to-https"
  
  min_ttl     = 0
  default_ttl = 0
  max_ttl     = 0
}