はじめに
本記事では、Claude APIを組み込んだVS Code環境を構築する技術的なアプローチを説明します。
アーキテクチャ
ユーザー → Cloudflare Tunnel → Docker Container → code-server
↓
FastAPI Proxy → AWS Bedrock (Claude)
使用技術
| コンポーネント | 技術 | 目的 |
|---|---|---|
| IDE | code-server | ブラウザVS Code |
| AI | AWS Bedrock | Claude API |
| コンテナ | Docker | 分離環境 |
| ネットワーク | Cloudflare Tunnels | HTTPSアクセス |
| API | FastAPI | 7msレスポンス |
Docker構成
FROM ubuntu:22.04
# code-serverインストール
RUN curl -fsSL https://code-server.dev/install.sh | sh
# ワークスペース設定
WORKDIR /home/user/workspace
VOLUME ["/home/user/workspace"]
EXPOSE 8080
CMD ["code-server", "--bind-addr", "0.0.0.0:8080"]
FastAPIプロキシ（Claude API接続）
from fastapi import FastAPI
import boto3
app = FastAPI()
@app.post("/v1/chat/completions")
async def chat(request: dict):
client = boto3.client("bedrock-runtime")
response = client.invoke_model(
modelId="anthropic.claude-3-haiku",
body=json.dumps(request)
)
return response
パフォーマンス結果
このアーキテクチャで達成した数値：
- ページ読み込み: 87ms
- APIレスポンス: 7ms
- コンテナ起動: 30秒
まとめ
Docker + Cloudflare Tunnels + AWS Bedrockを組み合わせることで、高速なAI開発環境を構築できます。
実際にこのアーキテクチャで構築したサービス: https://limitations-installation-design-hostel.trycloudflare.com
質問があればコメントでどうぞ。