KINTO Tech Blog
生成AI

インフラエンジニアが生成AI Agentでフロントエンド~バックエンドまで作ってみた

Cover Image for インフラエンジニアが生成AI Agentでフロントエンド~バックエンドまで作ってみた

自己紹介

初めまして!
KINTOテクノロジーズのCloud InfrastructureグループでManagerをやってる辻です

2020年5月に入社している地味に古株な人です
新卒からずっとインフラ(オンプレ/クラウド両方)エンジニアしています

概要

こないだVSCodeでのGitHub Copilot Agent Mode(以降Agent)が正式リリースされましたね(2025/4/16現在)
ちょうどいいのでVSCode Agentを使って何か便利なもんでも作ってみましょう

前提

  • 私は根っからのインフラエンジニアです
    • フロントエンドどころかバックエンドもほぼワカランです
  • その代わりインフラは(特にAWS)はチョットデキル
  • この記事では深いTechなことには触れません

やりたいこと

  • Agentを使ってインフラ以外できないエンジニアがどこまで行けるのか挑戦する
  • 日々の 業務で利用できる実用的なシステムをMVP(Minimum Viable Product) で開発する
  • 絶対にコードは自分で書かない

じゃあ何を作ろうか??

KINTOテクノロジーズのインフラは基本的にすべてIaC(Terraform)で作成/管理されています
terraformを使ったことがある人ならわかると思いますが、planの内容って慣れてないと見づらいですよね?
なので今回はterraformのplanが見やすくなるナニカを作りたいと思います

作りたいもの

  • terraform planを見やすくする
    • どうせなら生成AI使って要約とかしたい
    • Agentが作るんだからちょっとかっこいいフロントエンドも作ってもらう

開発環境

今回使用した開発環境は下記です ※ご参考までに

項目 使ったもの
OS Linux(WSL2)
IDE VSCode(1.99.3)
Agent GitHub Copilot Agent
生成AIモデル Claude 3.7 Sonnet
インフラ AWS

やってみましょう

まず最初にやることはアレですね。そうプロンプトを考えましょう
今回は超ざっくりにやりたいことを↓のプロンプトでAgentに指示しました

terraform planの結果をブラウザで確認する仕組みを実装したいです

AWS構成:Cloudfront+S3+Lambda + Bedrock
案
1.ローカルでterraform plan -out hoge.planを実行し、plan内容をファイルに出力
2.hoge.planをs3に送信
3.lambdaが起動し、terraform show hoge.planを実行し、人が見れる形にしてs3に出力
4.terrafrom showの結果をBedrockが解析し、planの要約を出力
5.ブラウザからアクセスを実施し、要約とplanの内容を人が見る

上記案で実施しようと考えています
もっと良い案があれば提案してください。もしなければ上記を作る手伝いをしてください
コードを作成する必要があるのであれば、/home/mizuki/配下にディレクトリを作成し、そこに出力してください

え?もっといいプロンプトあるって?
細かいことは置いておきましょう
なぜなら私はインフラしかできないエンジニアです

そしたら賢いAgent君は私のやりたいことを300%ぐらいパワーアップさせて対応してくれました

お客様のご要望は、Terraform planの結果をブラウザで確認するシステムの実装についてですね。ご提案いただいた案は実現可能であり、良く練られています。まずはその案を評価し、いくつかの改善点を提案した後、実装のお手伝いをさせていただきます。

# 現在の案の評価

1. ローカルでterraform plan -out hoge.planを実行し、plan内容をファイルに出力
2. hoge.planをS3に送信
3. LambdaがS3のイベントをトリガーに起動し、terraform show hoge.planを実行して人間が読める形式でS3に出力
4. Bedrockがterraform showの結果を解析し、planの要約を生成
5. ブラウザからアクセスして要約とplanの内容を確認

# 考えられる改善点

1. **セキュリティ強化**: S3へのアクセス制限、IAM権限の適切な設定
2. **差分のビジュアル表示**: planの結果をグラフや色付きテキストで可視化
3. **履歴管理**: 過去のplan結果を保存し比較できる機能
4. **通知機能**: 重要な変更がある場合にSlackやメールで通知
5. **インタラクティブな操作**: ブラウザ上でリソースの詳細を展開/折りたたみできる機能

これらを加味した上で、実装を進めていきましょう。まずはディレクトリ構造を作成します。ディレクトリ構造を作成しました。次に、このプロジェクトの各コンポーネントを実装していきましょう。

まず、Terraformの設定ファイルを作成して、必要なAWSリソースを定義します。ディレクトリ構造の作成が完了しました。これから各コンポーネントを実装していきましょう。

まずはTerraformのインフラストラクチャを定義する`main.tf`を作成します。このファイルにはS3バケット、CloudFront、Lambda、IAMロールなどの必要なリソースを定義します。
:
:
略

。。。。君すごいね

Agentの目玉機能であるローカルへの操作もどんどんやってくれます
これは作業ディレクトリ作って、そこにterraformファイルなどを作成してくれている
Input Prompt

その後は作業内容を説明してくれながら、これやっていい??って随時確認してくれます
Input Prompt

私はPythonのことなんてナンモワカランのでとりあえず全部「accept」ボタンを連打します

最終的にJavaScriptやCSS及びPythonやTerraformファイルだけじゃなく、Lambdaのビルド用シェルまで作ってくれました
しかもご丁寧に使い方やデプロイ手順や改良案も添えて
Input Prompt

デプロイしてみましょう

作ってくれたのはありがたい
けどほんとに動くの???
とりあえず教えてくれたデプロイ手順を愚直にやってみます

  1. terraform applyしてAWSにS3とかCloudfrontとか作って
  2. ビルドしてLambda用のzip作って
  3. Lambdaをデプロイして
  4. JSとかCSSをS3に配置して

なんのエラーも出ずにデプロイ完了しました
Input Prompt

流石にエラーでました

作ってくれた環境にアクセスしたら、流石にLambdaのエラーが出ました
私はPythonの事わからないのでエラー解析なんてできません
なので、LambdaのログをそのままAgentに渡して調べて貰いましょう

Input Prompt

すると予想通りログを解析して問題点の指摘及び修正までやってくれました
Input Prompt

修正されたファイルをもう一度デプロイしたら今度はうまくいきました

どんなシステムになったのか?

出来上がったシステム構成ははこんな感じです!!
Input Prompt

流れとしては下記となっており

  1. ユーザーがterraform plan結果をS3に送信
  2. イベント駆動でLambdaが起動
  3. LambdaがBedrockへplan結果の解析/要約を依頼
  4. 生成されたplan結果の要約と要約ページのHTMLファイルをS3へ配置
  5. Step FunctionsがCloudFrontのキャッシュを削除

ユーザーはS3へplan結果を配置するだけで全て完了します

実際にアクセスしてみましょう

Input Prompt

めっちゃかっこいいですね
じゃあそもそもの目的であったplan結果の要約はできてるのでしょうか?

Input Prompt
Input Prompt

完璧ですね。。。。
ちょっとインデントがおかしい気もしますが、細かいことは気にするのやめましょう

良いポイントとしては

  • 作成/更新/削除などの件数が画面上部に表示され見やすい
  • 変更されるリソースの変更内容が説明されている
  • リスク評価が記載されており、このplanでのリスクが把握できる
  • 注意点として今後改善したほうが良い内容を教えてくれる

まさに求めていた内容です

細かい要件追加

その後も細かい修正をAgentに指示してやってもらいました

  • 時間がUTCになってるからJSTにして
  • インデントがずれてるから直して
    • スクショを添えて
  • planが生成されたらCloudFrontのキャッシュをクリアして

などなど

上記の細かい要件追加も簡単にやってくれました

やってみた感想

想像以上に簡単にシステムが作れました
1日でこのシステムを作成しましたが、ほとんどの時間がAgentの処理待ちだったので、実作業時間は1時間程度です。私のようにインフラしかできない人間でも、フロントエンド~バックエンドまで1人で構築できました。

ただしPythonコードを見ると素人目でも不要なコードが存在したりしています
まだまだ改善の余地がありますが、これはMVP(Minimum Viable Product)段階での開発としては十分な成果です。今後、必要に応じてコードの最適化や機能の拡張を行っていくことができます。
重要なのは、短時間で機能するシステムを作り上げられたことです。これにより、アイデアを素早く形にし、実際の運用を通じて改善点を見出すことができます。

大事なのは
1人で短時間で簡単に作れた
ってことです

MVP(Minimum Viable Product)でのファーストステップとしてAgentは最適解だと思います

まとめ

Agentだけ使ってエンタープライズなシステムを作るにはまだまだ時間がかかりそうですが、プロンプト初心者の私でも簡単にシステム開発できました
何より驚いたのが「accept」ボタンを押すだけでAgentがサクサクとシステムを構築してくれる点ですね
今までは生成AIに提案された内容をコピペしたりコマンドを自分で実行したりしてましたが、今回はほぼ自分でコマンドを打っていません。「accept」ボタン押しまくっただけです
ボタン押しただけでみんなの工数削減&ミス防止を可能になるシステムが作れたってことです
また、今回作ったシステムは実際に利用しており、運用フローに組み込む予定です

さいごに

私の所属するCloud Infrastructureグループでは一緒に働いてくれる仲間を募集しています。クラウドに自信のある方もこれからクラウドを学びたいと思っている若手の方も大歓迎です。お気軽にお問い合わせください

詳しくは、こちらこちらをご確認ください

また、グループの紹介記事もWantedlyにて掲載されています!
こちらで見ることができるので、ぜひCloud Infrastructureグループについて知ってください!

Facebook

関連記事 | Related Posts

We are hiring!

【クラウドエンジニア】Cloud Infrastructure G/東京・大阪

KINTO Tech BlogWantedlyストーリーCloud InfrastructureグループについてAWSを主としたクラウドインフラの設計、構築、運用を主に担当しています。

機械学習エンジニア(レコメンドシステム)/マーケティングプロダクトG/東京

マーケティングプロダクトグループについてKINTOサービスサイト内で、パーソナライズ/ターゲティング/レコメンドなどのWEB接客系プロダクトを企画、開発、分析まで一貫して担当しています。そのほか、おでかけスポットをAIで提案するアプリ『Prism Japan』を開発・運営しています。

イベント情報

Mobility Night #3 - マップビジュアライゼーション -