<p data-line="0" class="code-line">こんにちは 🤖</p>
<p data-line="2" class="code-line">株式会社 Tsuzucle SPRING 開発事業部にフリーランスインフラエンジニアとして参画している はらしゅん です。</p>
<p data-line="4" class="code-line">「ウチの会社ではこんな風に使えた」「使えなかったので、止めた」等々、<br>
話題になっている、自立型 AI エンジニアエージェント <a href="https://devin.ai/" target="_blank" rel="nofollow noopener noreferrer">Devin</a> について。</p>
<p data-line="7" class="code-line">『 Devin 』<br>
(<a href="https://devin.ai/" target="_blank" rel="nofollow noopener noreferrer">https://devin.ai/</a> )</p>
<p data-line="10" class="code-line">とある問題を解決してほしく、<s>丸投げしてみたところ</s> 利用してみたところ、<br>
なんと見事に解決してくれちゃったので、その体験・経験をシェアします。🤖</p>
<h2 id="%E3%81%9D%E3%81%AE%E3%81%A8%E3%81%82%E3%82%8B%E5%95%8F%E9%A1%8C%E3%81%A8%E3%81%AF" data-line="14" class="code-line">
<a class="header-anchor-link" href="#%E3%81%9D%E3%81%AE%E3%81%A8%E3%81%82%E3%82%8B%E5%95%8F%E9%A1%8C%E3%81%A8%E3%81%AF" aria-hidden="true"></a> そのとある問題とは</h2>
<p data-line="16" class="code-line">知人から、以下のようなリクエストがありました。</p>
<ul data-line="18" class="code-line">
<li data-line="18" class="code-line">
<p data-line="18" class="code-line">フロントエンドが React、サーバーサイドを Django でローカルでアプリケーションを開発中</p>
</li>
<li data-line="20" class="code-line">
<p data-line="20" class="code-line">最終的に本番運用環境としては、GCP Cloud Run にデプロイしたい</p>
</li>
<li data-line="22" class="code-line">
<p data-line="22" class="code-line">しかし、ローカルでの Docker Build &amp; Run でも、Cloud Run 上にデプロイしてみても、Django の API エンドポイントも、React の画面表示も、うまく動作しなかった<br>
（※ ローカル開発では動作できてる）<br>
（※ 知人は Docker の知識が浅かった）</p>
</li>
<li data-line="26" class="code-line">
<p data-line="26" class="code-line">私の方で、Django はコンテナ化しても動作するようにできたが、React は知見が浅いこともあり、生成 AI の助けを借りながら数時間格闘するも、画面が表示されず・・</p>
</li>
</ul>
<p data-line="28" class="code-line">⇒ これはもう Devin に任せてみよう、と考えました 🤖</p>
<h2 id="%E3%81%AA%E3%82%93%E3%81%A7-devin-%E3%82%92%E4%BD%BF%E3%81%8A%E3%81%86%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%8B" data-line="31" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AA%E3%82%93%E3%81%A7-devin-%E3%82%92%E4%BD%BF%E3%81%8A%E3%81%86%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%8B" aria-hidden="true"></a> なんで Devin を使おうと思ったのか</h2>
<p data-line="32" class="code-line">つい先日、<code>$ 20</code> から始められる従量課金プランが出現したから。</p>
<p data-line="34" class="code-line">それまでは、最小のTeamプランで、<code>$500</code> からだった。</p>
<p data-line="36" class="code-line">『 <a href="https://dev.classmethod.jp/articles/devin-2-release/" target="_blank" rel="nofollow noopener noreferrer">Devin 2.0がリリースされ$20から利用可能になりました！ | DevelopersIO</a> 』</p>
<p data-line="38" class="code-line">あとは、知人からの <code>$ 10 ACU リファラル</code> があった。</p>
<p data-line="40" class="code-line">↓ ちなみに私のリファラルリンクはこちらになります 🙇<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__eab3c3f44a53a" src="https://embed.zenn.studio/card#zenn-embedded__eab3c3f44a53a" data-content="https%3A%2F%2Fapp.devin.ai%2Finvite%2FS0BmBEAy5HVw8nGh" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://app.devin.ai/invite/S0BmBEAy5HVw8nGh" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://app.devin.ai/invite/S0BmBEAy5HVw8nGh</a></p>
<p data-line="43" class="code-line">ここからアカウントを作っていただくと、あなたにも私にも <code>$ 10 ACU リファラル</code> ボーナスが入ります。</p>
<h2 id="devin-%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97-%EF%BD%9E-%E8%A7%A3%E6%B1%BA%E3%81%BE%E3%81%A7%E3%81%AE%E6%B5%81%E3%82%8C" data-line="45" class="code-line">
<a class="header-anchor-link" href="#devin-%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97-%EF%BD%9E-%E8%A7%A3%E6%B1%BA%E3%81%BE%E3%81%A7%E3%81%AE%E6%B5%81%E3%82%8C" aria-hidden="true"></a> Devin セットアップ ～ 解決までの流れ</h2>
<h4 id="1.-%E3%83%AA%E3%83%95%E3%82%A1%E3%83%A9%E3%83%AB%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%8B%E3%82%89-devin-%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90" data-line="47" class="code-line">
<a class="header-anchor-link" href="#1.-%E3%83%AA%E3%83%95%E3%82%A1%E3%83%A9%E3%83%AB%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%8B%E3%82%89-devin-%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90" aria-hidden="true"></a> 1. リファラルリンクから Devin アカウントを作成</h4>
<p data-line="48" class="code-line">※ 画面キャプチャ省略</p>
<h4 id="2.-%E5%95%8F%E9%A1%8C%E3%81%AE-github-%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%81%A8%E6%8E%A5%E7%B6%9A" data-line="50" class="code-line">
<a class="header-anchor-link" href="#2.-%E5%95%8F%E9%A1%8C%E3%81%AE-github-%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%81%A8%E6%8E%A5%E7%B6%9A" aria-hidden="true"></a> 2. 問題の Github リポジトリと接続</h4>
<p data-line="51" class="code-line">※ 画面キャプチャ省略</p>
<h4 id="3.-%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E6%AC%84%E3%81%AB%E8%8B%B1%E8%AA%9E%E3%81%A7%E3%80%81%E3%80%8C%E7%8F%BE%E7%8A%B6%E3%81%AE%E8%AA%AC%E6%98%8E%E3%80%8D%E3%81%A8%E3%80%8C%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BB%E3%81%97%E3%81%84%E3%81%93%E3%81%A8%E3%80%8D%E3%82%92%E7%AE%87%E6%9D%A1%E6%9B%B8%E3%81%8D" data-line="53" class="code-line">
<a class="header-anchor-link" href="#3.-%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E6%AC%84%E3%81%AB%E8%8B%B1%E8%AA%9E%E3%81%A7%E3%80%81%E3%80%8C%E7%8F%BE%E7%8A%B6%E3%81%AE%E8%AA%AC%E6%98%8E%E3%80%8D%E3%81%A8%E3%80%8C%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BB%E3%81%97%E3%81%84%E3%81%93%E3%81%A8%E3%80%8D%E3%82%92%E7%AE%87%E6%9D%A1%E6%9B%B8%E3%81%8D" aria-hidden="true"></a> 3. チャット欄に英語で、「現状の説明」と「やってほしいこと」を箇条書き</h4>
<p data-line="54" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/c94458c10b60-20250413.png" loading="lazy" class="md-img"><br>
（※ 画面右部のエディター部分は、自分は全く触らず）</p>
<h4 id="4.-%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E6%AC%84%E3%81%A7%E3%80%81%E3%82%8F%E3%82%89%E3%82%8F%E3%82%89%E4%BD%95%E3%81%8B%E8%87%AA%E5%95%8F%E8%87%AA%E7%AD%94%E3%81%97%E5%A7%8B%E3%82%81%E3%80%81%E6%95%B0%E5%88%86%E5%BE%85%E3%81%A3%E3%81%A6%E3%82%8B%E3%81%A8%E3%80%81%E3%83%97%E3%83%AB%E3%83%AA%E3%82%AF%E3%82%92%E8%87%AA%E5%8B%95%E4%BD%9C%E6%88%90%E3%81%97%E3%81%A6%E3%81%8F%E3%82%8C%E3%81%9F" data-line="57" class="code-line">
<a class="header-anchor-link" href="#4.-%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E6%AC%84%E3%81%A7%E3%80%81%E3%82%8F%E3%82%89%E3%82%8F%E3%82%89%E4%BD%95%E3%81%8B%E8%87%AA%E5%95%8F%E8%87%AA%E7%AD%94%E3%81%97%E5%A7%8B%E3%82%81%E3%80%81%E6%95%B0%E5%88%86%E5%BE%85%E3%81%A3%E3%81%A6%E3%82%8B%E3%81%A8%E3%80%81%E3%83%97%E3%83%AB%E3%83%AA%E3%82%AF%E3%82%92%E8%87%AA%E5%8B%95%E4%BD%9C%E6%88%90%E3%81%97%E3%81%A6%E3%81%8F%E3%82%8C%E3%81%9F" aria-hidden="true"></a> 4. チャット欄で、わらわら何か自問自答し始め、数分待ってると、プルリクを自動作成してくれた</h4>
<p data-line="58" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/9393be2f932e-20250413.png" loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/bca623d50114-20250413.png" loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/91d6b2afca5c-20250413.png" loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/4733471b0ac1-20250413.png" loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/4e080c8da53e-20250413.png" loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/211f0a04e006-20250413.png" loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/b62f4648e41c-20250413.png" loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/514e93c6c975-20250413.png" loading="lazy" class="md-img"><br>
（※ Devin は自分で、自分の環境を立ち上げて、開発＆検証をしている模様）</p>
<h4 id="5.-%E4%B8%80%E5%BA%A6%E7%9B%AE%E3%81%AE-devin-%E3%81%AE%E3%83%97%E3%83%AB%E3%83%AA%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%B8%E5%BE%8C" data-line="68" class="code-line">
<a class="header-anchor-link" href="#5.-%E4%B8%80%E5%BA%A6%E7%9B%AE%E3%81%AE-devin-%E3%81%AE%E3%83%97%E3%83%AB%E3%83%AA%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%B8%E5%BE%8C" aria-hidden="true"></a> 5. 一度目の Devin のプルリクマージ後</h4>
<ul data-line="69" class="code-line">
<li data-line="69" class="code-line">
<code>/</code> にアクセスすると React の画面が表示されるようになった🎉</li>
<li data-line="70" class="code-line">しかし <code>/user</code> や <code>/shop</code> といったパスの画面はまた表示されなかった ...</li>
</ul>
<h4 id="6.-%E4%BA%8C%E5%BA%A6%E7%9B%AE%E3%81%AE-devin-%E3%81%AE%E3%83%97%E3%83%AB%E3%83%AA%E3%82%AF" data-line="72" class="code-line">
<a class="header-anchor-link" href="#6.-%E4%BA%8C%E5%BA%A6%E7%9B%AE%E3%81%AE-devin-%E3%81%AE%E3%83%97%E3%83%AB%E3%83%AA%E3%82%AF" aria-hidden="true"></a> 6. 二度目の Devin のプルリク</h4>
<ul data-line="73" class="code-line">
<li data-line="73" class="code-line">
<code>/user</code> や <code>/shop</code> とかも表示されるように直してと依頼<br>
<img src="https://storage.googleapis.com/zenn-user-upload/53a8ed8713f6-20250413.png" loading="lazy" class="md-img">
</li>
<li data-line="75" class="code-line">無事表示されるように 💡</li>
</ul>
<h4 id="7.-github-dependabot-%E3%81%AE%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%83%E3%83%97%E3%82%92%E5%8F%96%E3%82%8A%E5%85%A5%E3%82%8C%E3%81%9F%E3%82%89%E3%80%81%E7%94%BB%E9%9D%A2%E3%81%8C%E8%A6%8B%E3%81%88%E3%81%AA%E3%81%8F%E3%81%AA%E3%81%A3%E3%81%9F%E3%83%BB%E3%83%BB" data-line="78" class="code-line">
<a class="header-anchor-link" href="#7.-github-dependabot-%E3%81%AE%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%83%E3%83%97%E3%82%92%E5%8F%96%E3%82%8A%E5%85%A5%E3%82%8C%E3%81%9F%E3%82%89%E3%80%81%E7%94%BB%E9%9D%A2%E3%81%8C%E8%A6%8B%E3%81%88%E3%81%AA%E3%81%8F%E3%81%AA%E3%81%A3%E3%81%9F%E3%83%BB%E3%83%BB" aria-hidden="true"></a> 7. Github Dependabot のライブラリバージョンアップを取り入れたら、画面が見えなくなった・・</h4>
<ul data-line="79" class="code-line">
<li data-line="79" class="code-line">直してと依頼<br>
<img src="https://storage.googleapis.com/zenn-user-upload/d615d28d235f-20250413.png" loading="lazy" class="md-img">
</li>
<li data-line="81" class="code-line">これまた無事表示されるように 💡</li>
</ul>
<h4 id="8.-%E6%B6%88%E8%B2%BB%E3%81%97%E3%81%9F%E3%81%AE%E3%81%AF%E3%80%813.89-acus-%EF%BC%881200%E5%86%86%E3%81%90%E3%82%89%E3%81%84%EF%BC%9F%EF%BC%89" data-line="83" class="code-line">
<a class="header-anchor-link" href="#8.-%E6%B6%88%E8%B2%BB%E3%81%97%E3%81%9F%E3%81%AE%E3%81%AF%E3%80%813.89-acus-%EF%BC%881200%E5%86%86%E3%81%90%E3%82%89%E3%81%84%EF%BC%9F%EF%BC%89" aria-hidden="true"></a> 8. 消費したのは、3.89 ACUs （1200円ぐらい？）</h4>
<p data-line="84" class="code-line">→ 使用量は、『 <a href="https://app.devin.ai/settings/usage" target="_blank" rel="nofollow noopener noreferrer">Usage &amp; Limits</a> 』で確認できます</p>
<p data-line="86" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/acff1bec6905-20250413.png" loading="lazy" class="md-img"></p>
<p data-line="88" class="code-line">→ 実働 30分～40分としては、思ったより ACU を消費したなという印象だが、これで数時間格闘していた問題が解決したので、<s>知人からも解決の御駄賃貰えたので</s> 満足してます</p>
<h2 id="%E7%A7%81%E3%81%AE%E3%83%AA%E3%83%95%E3%82%A1%E3%83%A9%E3%83%AB%E3%83%AA%E3%83%B3%E3%82%AF" data-line="91" class="code-line">
<a class="header-anchor-link" href="#%E7%A7%81%E3%81%AE%E3%83%AA%E3%83%95%E3%82%A1%E3%83%A9%E3%83%AB%E3%83%AA%E3%83%B3%E3%82%AF" aria-hidden="true"></a> 私のリファラルリンク</h2>
<p data-line="92" class="code-line">↓ （繰り返しになりますが）私のリファラルリンクはこちらになります 🙇<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f955fe89a8044" src="https://embed.zenn.studio/card#zenn-embedded__f955fe89a8044" data-content="https%3A%2F%2Fapp.devin.ai%2Finvite%2FS0BmBEAy5HVw8nGh" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://app.devin.ai/invite/S0BmBEAy5HVw8nGh" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://app.devin.ai/invite/S0BmBEAy5HVw8nGh</a></p>
<p data-line="95" class="code-line">ここからアカウントを作っていただくと、あなたにも私にも <code>$ 10 ACU リファラル</code> ボーナスが入ります。💵</p>


Devin に GCP Cloud Run のデバッグを完全に任せてみた

なんで Devin を使おうと思ったのか

Devin セットアップ ～ 解決までの流れ

django

github

Discussion