了解しました。

それでは、以下に 🔖 第10章：発展編 より

10.1 userDataやreverse proxyにもdevcontainerを導入する手順 を、

authの構成を踏襲しつつ、step-by-step + コード付き + 図解で詳しく解説します。

🔖 10.1 userDataやreverse proxyにもdevcontainerを導入する手順

✅ 要点まとめ

• userData や reverse-proxy リポジトリも auth と同様に devcontainer 対応できる
• 基本構成は .devcontainer/devcontainer.json + Dockerfile の2点
• Rails（userData）と nginx（reverse-proxy）で書き方が少し異なる
• マウントやポートの設定を各用途に合わせて調整する必要あり

📁 ディレクトリ構成（例：userData）

userData/
├── .devcontainer/
│   ├── devcontainer.json
│   └── Dockerfile
├── app/
│   ├── controllers/
│   └── ...
└── config/

🧪 userData/.devcontainer/devcontainer.json（Rails用の例）

// userData/.devcontainer/devcontainer.json
{
  // VSCodeタブなどに表示される名前
  "name": "userData-dev",

  // 使用するDockerfile（このディレクトリ内）
  "dockerFile": "Dockerfile",

  // Docker build のコンテキスト（親フォルダ）
  "context": "..",

  // コンテナ内の作業ディレクトリ
  "workspaceFolder": "/workspace",

  // Railsで使用するポート
  "forwardPorts": [3001],

  // devcontainerのコードをホスト側と同期（volumeマウント）
  "mounts": [
    "source=${localWorkspaceFolder},target=/workspace,type=bind"
  ],

  // 初期化コマンド（gem installやDB初期化）
  "postCreateCommand": "bundle install && rails db:setup",

  // 実行ユーザー（通常 "vscode"）
  "remoteUser": "vscode"
}

🧪 userData/.devcontainer/Dockerfile（Rails開発用）