<p data-line="0" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/32e236ce5525-20251127.png" alt="" class="md-img" loading="lazy"><br>
<em>Development with devcontainers</em></p>
<hr data-line="3" class="code-line">
<h2 id="%E5%8F%96%E3%82%8A%E7%B5%84%E3%81%BF%E3%81%AE%E8%83%8C%E6%99%AF" data-line="5" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%96%E3%82%8A%E7%B5%84%E3%81%BF%E3%81%AE%E8%83%8C%E6%99%AF" aria-hidden="true"></a> 取り組みの背景</h2>
<p data-line="7" class="code-line">僕はサービスアーキテクチャを担当する基盤チームで働いています。役割のひとつとして、開発者や近年ではAIツールが、安全かつ一貫した形でコードベースに関わるための仕組みを設計しています。</p>
<p data-line="9" class="code-line">その中で、次のような課題が繰り返し発生していました。</p>
<ul data-line="11" class="code-line">
<li data-line="11" class="code-line">オンボーディングに時間がかかりすぎる</li>
<li data-line="12" class="code-line">マシンごとに環境が乖離していく</li>
<li data-line="13" class="code-line">プロジェクトの切り替えが煩雑</li>
<li data-line="14" class="code-line">AIコーディングアシスタントが過剰な権限を持ってしまう</li>
</ul>
<p data-line="16" class="code-line">これらを解決するため、私たちは devcontainer の構築に着手しました。本記事では、導入した内容とその背景について紹介します。</p>
<hr data-line="18" class="code-line">
<h2 id="%E7%9B%AE%E6%A8%99" data-line="20" class="code-line">
<a class="header-anchor-link" href="#%E7%9B%AE%E6%A8%99" aria-hidden="true"></a> 目標</h2>
<ul data-line="22" class="code-line">
<li data-line="22" class="code-line">誰でも同じように使える標準化された開発環境</li>
<li data-line="23" class="code-line">作業を失うことなく安全にリセットできる仕組み</li>
<li data-line="24" class="code-line">AIエージェントをホストマシンから隔離</li>
<li data-line="25" class="code-line">新メンバーがすぐに生産的になれる環境</li>
</ul>
<hr data-line="27" class="code-line">
<h2 id="%E6%A7%8B%E7%AF%89%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E5%86%85%E5%AE%B9" data-line="29" class="code-line">
<a class="header-anchor-link" href="#%E6%A7%8B%E7%AF%89%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E5%86%85%E5%AE%B9" aria-hidden="true"></a> 構築している内容</h2>
<h3 id="%E4%B8%80%E8%B2%AB%E3%81%97%E3%81%9F%E7%92%B0%E5%A2%83" data-line="31" class="code-line">
<a class="header-anchor-link" href="#%E4%B8%80%E8%B2%AB%E3%81%97%E3%81%9F%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 一貫した環境</h3>
<p data-line="33" class="code-line">バグ報告があった際に、誰でもすぐ再現できる状態を保ちたいと考えています。　個々の環境設定の違いをデバッグすることに時間を使いたくありません。AIエージェントも同様で、環境が予測可能であればあるほど、安定した動作が期待できます。</p>
<p data-line="35" class="code-line">Devcontainer はワンクリックでセットアップ可能です。リポジトリをクローンし、VS Codeで開いて「Attach to Running Container」をクリックするだけで、全員が同じツール・同じバージョンの環境を利用できます。</p>
<p data-line="37" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/5f1f4072bcae-20251127.png" alt="" class="md-img" loading="lazy"><br>
<em>VS Code prompts you to select which devcontainer to attach</em></p>
<p data-line="40" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/090b276a76b5-20251127.png" alt="" class="md-img" loading="lazy"><br>
<em>Connected to container - pink title bar indicates which environment you're in</em></p>
<hr data-line="43" class="code-line">
<h3 id="%E8%87%AA%E5%8B%95%E5%8C%96%E3%81%95%E3%82%8C%E3%81%9F%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97" data-line="44" class="code-line">
<a class="header-anchor-link" href="#%E8%87%AA%E5%8B%95%E5%8C%96%E3%81%95%E3%82%8C%E3%81%9F%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97" aria-hidden="true"></a> 自動化されたセットアップ</h3>
<p data-line="46" class="code-line">私たちの環境では、コンテナ起動時に必要なものがすべて自動でインストールされます。</p>
<ul data-line="48" class="code-line">
<li data-line="48" class="code-line">zsh / oh-my-zsh</li>
<li data-line="49" class="code-line">バージョン管理ツール（anyenv、aqua）</li>
<li data-line="50" class="code-line">CLIツール（GitHub、Google Cloud）</li>
<li data-line="51" class="code-line">標準のVS Code拡張機能</li>
</ul>
<p data-line="53" class="code-line">依存関係は毎回同じ順序でインストールされ、再現性が保たれます。何か問題が起きても、リセットすれば既知の状態に戻せます。また、他の作業に影響を与えることなく、個別にバージョンアップの検証も可能です。</p>
<p data-line="55" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/9985060ab01c-20251127.png" alt="" class="md-img" loading="lazy"><br>
<em>Workspace ready with zsh, terminal, and VS Code Extensions</em></p>
<hr data-line="58" class="code-line">
<h3 id="%E3%83%AA%E3%82%AB%E3%83%90%E3%83%AA%E3%83%BC%E5%89%8D%E6%8F%90%E3%81%AE%E8%A8%AD%E8%A8%88" data-line="60" class="code-line">
<a class="header-anchor-link" href="#%E3%83%AA%E3%82%AB%E3%83%90%E3%83%AA%E3%83%BC%E5%89%8D%E6%8F%90%E3%81%AE%E8%A8%AD%E8%A8%88" aria-hidden="true"></a> リカバリー前提の設計</h3>
<p data-line="62" class="code-line">以前、Cursorが許可なく .zshrc を変更するという出来事がありました。この経験から、AIツールのリスクを強く意識するようになりました。</p>
<p data-line="64" class="code-line">ターミナルアクセスを持つAIエージェントは、本質的にシステムへ影響を与える力を持っています。しかしコンテナ内で実行すれば、最悪でも未保存のファイルが失われる程度に抑えられます。リセットして再構築すれば、そのまま作業を再開できます。</p>
<p data-line="66" class="code-line">この設計により、新しい試みへの心理的ハードルも下がります。アップグレードで環境が壊れても、修復はコンテナのリセットだけで済み、長時間のデバッグに悩まされることはありません。</p>
<hr data-line="68" class="code-line">
<h3 id="ai%E3%81%AB%E5%AF%BE%E3%81%99%E3%82%8B%E5%A2%83%E7%95%8C%E7%B7%9A" data-line="70" class="code-line">
<a class="header-anchor-link" href="#ai%E3%81%AB%E5%AF%BE%E3%81%99%E3%82%8B%E5%A2%83%E7%95%8C%E7%B7%9A" aria-hidden="true"></a> AIに対する境界線</h3>
<p data-line="72" class="code-line">サンドボックス化されていない状態では、高い権限を持つAIを信頼するしかありません。シェルスクリプトのわずかなミスが、深刻な問題を引き起こす可能性もあります。</p>
<p data-line="74" class="code-line">コンテナを活用することで、リポジトリごとに権限の範囲を明確にできます。ドキュメント用リポジトリには柔軟な権限を与え、本番インフラは厳しく制限する、といった運用が可能です。</p>
<p data-line="76" class="code-line">将来的には、MCPサーバーのような外部ツールとAIエージェントの連携も視野に入れています。コンテナに隔離された状態のまま、必要な外部サービスへのアクセスを安全に制御できます。</p>
<p data-line="79" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/056943996b1f-20251127.png" alt="" class="md-img" loading="lazy"><br>
<em>Rough outline of multi-environment usage utilizing AI agents</em></p>
<hr data-line="82" class="code-line">
<h3 id="%E5%8F%82%E5%85%A5%E9%9A%9C%E5%A3%81%E3%82%92%E4%BD%8E%E3%81%8F" data-line="84" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E5%85%A5%E9%9A%9C%E5%A3%81%E3%82%92%E4%BD%8E%E3%81%8F" aria-hidden="true"></a> 参入障壁を低く</h3>
<p data-line="86" class="code-line">始め方はシンプルです。</p>
<ol data-line="88" class="code-line">
<li data-line="88" class="code-line">リポジトリをクローン</li>
<li data-line="89" class="code-line">設定を編集、もしくはデフォルトのまま使用</li>
<li data-line="90" class="code-line"><code>devcontainer up</code></li>
<li data-line="91" class="code-line">コーディング開始</li>
</ol>
<p data-line="93" class="code-line">VS Codeに慣れていれば、それ以外はすべて自動化されています。プルリクエストの作成やレビューも拡張機能でスムーズに行えます。</p>
<hr data-line="95" class="code-line">
<h3 id="%E3%83%9A%E3%82%A2%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AF%BE%E5%BF%9C" data-line="97" class="code-line">
<a class="header-anchor-link" href="#%E3%83%9A%E3%82%A2%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AF%BE%E5%BF%9C" aria-hidden="true"></a> ペアプログラミング対応</h3>
<p data-line="99" class="code-line">VS Code Live Shareを標準拡張機能として組み込んでいます。全員が同じコンテナを使用しているため、誰かの環境に参加するのも数秒で完了します。</p>
<p data-line="101" class="code-line">オンボーディング、ペアデバッグ、ローカル環境を切り替えずに本番トラブルへ対応する場面などで大きな効果を発揮します。</p>
<hr data-line="103" class="code-line">
<h2 id="%E7%8F%BE%E5%9C%A8%E3%81%AE%E6%A7%8B%E6%88%90" data-line="105" class="code-line">
<a class="header-anchor-link" href="#%E7%8F%BE%E5%9C%A8%E3%81%AE%E6%A7%8B%E6%88%90" aria-hidden="true"></a> 現在の構成</h2>
<h3 id="%E6%A9%9F%E8%83%BD%E3%81%AE%E9%85%8D%E5%B8%83" data-line="107" class="code-line">
<a class="header-anchor-link" href="#%E6%A9%9F%E8%83%BD%E3%81%AE%E9%85%8D%E5%B8%83" aria-hidden="true"></a> 機能の配布</h3>
<div class="code-block-container"><pre><code class="code-line" data-line="109">devcontainer-features/
├── .github/
├── src/
│   ├── coreutils/
│   │   ├── scripts/
│   │   ├── devcontainer-feature.json
│   │   ├── install.sh
│   │   └── README.md
│   ├── desktop/
│   └── vnc/
└── README.md
</code></pre></div><p data-line="123" class="code-line">機能はGitHub Container Registryで配布されます。チームは標準化されたツールを自動的に取得できます。</p>
<p data-line="125" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/933c3e917669-20251127.png" alt="" class="md-img" loading="lazy"><br>
<em>Deployment to a private Github Registry</em></p>
<h3 id="%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80" data-line="128" class="code-line">
<a class="header-anchor-link" href="#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80" aria-hidden="true"></a> ローカルフォルダ</h3>
<div class="code-block-container"><pre><code class="code-line" data-line="130">~/devcontainer-repo              # 設定
~/.dev/devcontainers             # 永続的な作業ディレクトリ
~/.dev/certs                     # ローカルHTTPS用のTLS証明書
</code></pre></div><p data-line="136" class="code-line">各コンテナはDocker-in-Dockerで動作するため、マイクロサービススタックはホストに触れずにコンテナ内で実行されます。Portainerで各環境内の稼働状況を可視化しています。</p>
<p data-line="138" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/6f01d5e2448e-20251128.png" alt="" class="md-img" loading="lazy"><br>
<em>Portainer showing host (local) + 3 devcontainer environments (d1, d2, d3)</em></p>
<p data-line="141" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/3ba76e122a75-20251128.png" alt="" class="md-img" loading="lazy"><br>
<em>Dashboard inside d1 devcontainer: 2 stacks, 7 containers running</em></p>
<hr data-line="144" class="code-line">
<h3 id="devcontainer.json%E3%81%AE%E4%BE%8B" data-line="146" class="code-line">
<a class="header-anchor-link" href="#devcontainer.json%E3%81%AE%E4%BE%8B" aria-hidden="true"></a> devcontainer.jsonの例</h3>
<div class="code-block-container"><pre class="language-jsonc"><code class="language-jsonc code-line" data-line="148">{
  "name": "Ubuntu DevContainer",
  "dockerComposeFile": "docker-compose.yml",
  "remoteUser": "vscode",
  "forwardPorts": ["80", "443", "3000", "8080"],

  "features": {
    "ghcr.io/devcontainers/features/common-utils:2": {
      "installZsh": true,
      "installOhMyZsh": true
　　　　。。。
    },
    "ghcr.io/devcontainers/features/go:1": { "version": "1.25" },
    "ghcr.io/devcontainers/features/node:1": { "version": "22" },
    "ghcr.io/devcontainers/features/docker-in-docker:2": {
      "installDockerBuildx": true
　　　　。。。
    },
    "ghcr.io/my-org/devcontainer-features/coreutils:1": {
      "installAnyenv": true,
      "installAqua": true,
      "installPortainerAgent": true
　　　　。。。
    }
  },

  "customizations": {
    "vscode": {
      "extensions": [
        "GitHub.vscode-pull-request-github",
        "ms-vsliveshare.live-share",
        "golang.go",
        "ms-vscode.vscode-typescript-next",
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "hashicorp.terraform",
        "googlecloudtools.cloudcode",
        "anthropic.claude-code",
        "saoudrizwan.claude-dev",      // cline
        "ms-azuretools.vscode-docker"
        。。。
      ]
    }
  },
  
  "workspaceFolder": "/home/vscode/workspaces",
  "postStartCommand": "bash ~/workspaces/scripts/post-start.sh"
}
</code></pre></div><hr data-line="199" class="code-line">
<h3 id="%E5%AE%8C%E4%BA%86%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E9%A0%85%E7%9B%AE" data-line="201" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%8C%E4%BA%86%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E9%A0%85%E7%9B%AE" aria-hidden="true"></a> 完了している項目</h3>
<ul data-line="203" class="code-line">
<li data-line="203" class="code-line">環境のブートストラップ</li>
<li data-line="204" class="code-line">ツールチェーンのインストール</li>
<li data-line="205" class="code-line">バージョン管理ツール</li>
<li data-line="206" class="code-line">拡張機能と設定</li>
<li data-line="207" class="code-line">ネストされたDocker</li>
<li data-line="208" class="code-line">Traefik Proxy（仮DNS付き）</li>
<li data-line="209" class="code-line">ACME TLS Challenge</li>
</ul>
<h3 id="%E9%80%B2%E8%A1%8C%E4%B8%AD%E3%81%AE%E9%A0%85%E7%9B%AE" data-line="211" class="code-line">
<a class="header-anchor-link" href="#%E9%80%B2%E8%A1%8C%E4%B8%AD%E3%81%AE%E9%A0%85%E7%9B%AE" aria-hidden="true"></a> 進行中の項目</h3>
<ul data-line="213" class="code-line">
<li data-line="213" class="code-line">DNS</li>
<li data-line="214" class="code-line">パフォーマンスチューニング</li>
<li data-line="215" class="code-line">シークレット管理</li>
<li data-line="216" class="code-line">AI制約の強化</li>
<li data-line="217" class="code-line">Codespaces連携</li>
</ul>
<hr data-line="219" class="code-line">
<h2 id="%E3%81%AA%E3%81%9C%E3%81%93%E3%82%8C%E3%81%8C%E9%87%8D%E8%A6%81%E3%81%8B" data-line="221" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AA%E3%81%9C%E3%81%93%E3%82%8C%E3%81%8C%E9%87%8D%E8%A6%81%E3%81%8B" aria-hidden="true"></a> なぜこれが重要か</h2>
<p data-line="223" class="code-line">最終的なゴールは、ホストシステムにリスクを与えることなく、AIが開発者と並走して働ける環境を実現することです。その基盤となるのがコンテナです。</p>
<p data-line="225" class="code-line">「自分の環境では動くのに、他の人では動かない」といった環境差によるトラブルを根本からなくします。コンテナをリセットした状態で動かないものは、どこでも動かない。それが新しい前提です。</p>
<hr data-line="227" class="code-line">
<h2 id="%E7%8F%BE%E5%9C%A8%E3%81%AE%E7%8A%B6%E6%B3%81" data-line="229" class="code-line">
<a class="header-anchor-link" href="#%E7%8F%BE%E5%9C%A8%E3%81%AE%E7%8A%B6%E6%B3%81" aria-hidden="true"></a> 現在の状況</h2>
<p data-line="231" class="code-line">社内展開を開始したばかりですが、すでに以下の成果が得られています。</p>
<ul data-line="233" class="code-line">
<li data-line="233" class="code-line">依存関係が競合するタスクを並行実行できる（VS Codeウィンドウを2つ開くだけ）</li>
<li data-line="234" class="code-line">マイクロサービススタックを安全に一時停止・再開できる</li>
<li data-line="235" class="code-line">ペアプログラミングを即座に開始できる</li>
</ul>
<p data-line="237" class="code-line">将来的には、僕の <strong>brew list</strong> に残るのはコンテナ関連ツールと個人用アプリのみになるでしょう。それ以外はすべてサンドボックスの中へ。</p>
<p data-line="239" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/48df70b2a496-20251127.png" alt="" class="md-img" loading="lazy"><br>
<em>Multiple devcontainers running simultaneously on host</em></p>
<p data-line="242" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/44e47a656eaa-20251127.png" alt="" class="md-img" loading="lazy"><br>
<em>Multiple devcontainers paused while I attend a zoom meeting</em></p>
<h2 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" data-line="245" class="code-line">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h2>
<p data-line="246" class="code-line">クロステック・マネジメント社は、「教育×AI」で次世代の学びを創造するために生まれた芸術大学発のスタートアップです。<br>
ご興味のある方は、ぜひお気軽にお問い合わせいただけると嬉しいです！</p>
<p data-line="249" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__75b747b6f3de3" src="https://embed.zenn.studio/card#zenn-embedded__75b747b6f3de3" data-content="https%3A%2F%2Fwww.wantedly.com%2Fcompanies%2Fcompany_7297732" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.wantedly.com/companies/company_7297732" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.wantedly.com/companies/company_7297732</a></p>


開発者とAIのためのサンドボックスとしてのDevcontainer

Discussion