VSCode 远程开发全攻略：SSH + Dev Container 打造沉浸式开发体验

1
2
3
4

┌─────────────────┐        SSH          ┌─────────────────────┐
│   本地 VSCode    │ ◄────────────────►  │   远程 Linux 服务器   │
│  (只负责 UI)     │                     │  (代码 / 插件 / 终端) │
└─────────────────┘                     └─────────────────────┘

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

# 1. 本地安装 Remote - SSH 扩展
# 在 VSCode 扩展商店搜索 "Remote - SSH"

# 2. 配置 SSH 连接（~/.ssh/config）
Host dev-server
    HostName 192.168.1.100
    User itlaohuo
    Port 22
    IdentityFile ~/.ssh/id_rsa

Host prod-java
    HostName 10.0.0.50
    User dev
    # 跳板机方式
    ProxyJump jump-server

1
2
3
4
5
6
7
8

# SSH 连接到开发服务器后，所有操作都在远端执行
# 终端中输入的就是远端的 shell

# 启动 SpringBoot（VSCode 内置终端 = 远端终端）
mvn spring-boot:run

# 端口转发：本地浏览器访问 localhost:8080 自动转发到远端 8080
# VSCode 会自动检测服务端口并提示转发，也可以手动设置

1
2
3
4

# Vite dev server 启动后
pnpm dev
# → Vite 默认监听 localhost:5173
# → VSCode 自动转发端口，本地浏览器直接打开 http://localhost:5173

1
2
3
4
5
6

# SSH 到带 GPU 的服务器
# VSCode 自动识别远端 Python 解释器
# Ctrl+Shift+P → Python: Select Interpreter → 选远端的 conda 环境

# 所有 Python 脚本直接跑在 GPU 服务器上
python train.py

1
2
3
4
5
6
7

┌──────────┐     Docker      ┌──────────────────────────────┐
│ VSCode    │ ◄─────────────► │  Dev Container               │
│ (本地 UI) │                 │   ├── 挂载源代码              │
│           │                 │   ├── 安装指定版本工具链      │
│           │                 │   ├── 预装 VS Code 扩展      │
│           │                 │   └── 预配中间件（compose）   │
└──────────┘                 └──────────────────────────────┘

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

{
  "name": "SpringBoot Dev",
  "image": "mcr.microsoft.com/devcontainers/java:17",

  "features": {
    // 通过 features 快速注入附加工具
    "ghcr.io/devcontainers/features/docker-in-docker:2": {},
    "ghcr.io/devcontainers/features/java:1": {
      "version": "17",
      "installMaven": true,
      "installGradle": false
    }
  },

  // 容器内要安装的 VSCode 扩展
  "customizations": {
    "vscode": {
      "extensions": [
        "vscjava.vscode-java-pack",
        "vmware.vscode-boot-dev-pack",
        "redhat.fabric8-analytics",
        "sonarsource.sonarlint-vscode"
      ],
      "settings": {
        "java.compile.nullAnalysis.mode": "automatic",
        "java.configuration.runtimes": [
          {
            "name": "JavaSE-17",
            "path": "/usr/local/sdkman/candidates/java/17"
          }
        ]
      }
    }
  },

  // 容器启动后自动执行的命令
  "postCreateCommand": "mvn dependency:resolve -q",

  // 端口转发
  "forwardPorts": [8080, 8443],

  // 挂载 Maven 本地仓库到 volume，加速后续重建
  "mounts": [
    "source=springboot-maven-repo,target=/home/vscode/.m2,type=volume"
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

services:
  app:
    build:
      context: ..
      dockerfile: .devcontainer/Dockerfile
    volumes:
      - ..:/workspace:cached
    command: sleep infinity
    networks:
      - dev-net

  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: devpass
      MYSQL_DATABASE: myapp
    ports:
      - "3306:3306"
    volumes:
      - mysql-data:/var/lib/mysql
    networks:
      - dev-net

  redis:
    image: redis:7-alpine
    ports:
      - "6379:6379"
    networks:
      - dev-net

  rabbitmq:
    image: rabbitmq:3-management-alpine
    ports:
      - "5672:5672"
      - "15672:15672"
    networks:
      - dev-net

volumes:
  mysql-data:

networks:
  dev-net:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

{
  "name": "Vue3 + ThreeJS Frontend",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:20",

  "customizations": {
    "vscode": {
      "extensions": [
        "Vue.volar",
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "bradlc.vscode-tailwindcss",
        "antfu.iconify"
      ],
      "settings": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "[vue]": { "editor.defaultFormatter": "Vue.volar" },
        "typescript.tsdk": "node_modules/typescript/lib"
      }
    }
  },

  // pnpm 安装到全局
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "20",
      "pnpmVersion": "latest"
    },
    // Chromium 用于 E2E 测试
    "ghcr.io/devcontainers/features/desktop-lite:1": {}
  },

  "postCreateCommand": "pnpm install",

  "forwardPorts": [5173],

  // pnpm store 缓存
  "mounts": [
    "source=vue3-pnpm-store,target=/home/node/.local/share/pnpm/store,type=volume"
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

{
  "name": "Python AI Agent",
  "image": "mcr.microsoft.com/devcontainers/python:3.11",

  "features": {
    "ghcr.io/devcontainers/features/python:1": {
      "version": "3.11",
      "installJupyterlab": true
    },
    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
  },

  "customizations": {
    "vscode": {
      "extensions": [
        "ms-python.python",
        "ms-python.vscode-pylance",
        "ms-toolsai.jupyter",
        "charliermarsh.ruff",
        "github.copilot",
        "github.copilot-chat"
      ],
      "settings": {
        "python.defaultInterpreterPath": "/usr/local/bin/python",
        "python.linting.enabled": true,
        "[python]": {
          "editor.defaultFormatter": "charliermarsh.ruff",
          "editor.formatOnSave": true
        }
      }
    }
  },

  "postCreateCommand": "pip install -r requirements.txt",

  "forwardPorts": [7860, 8501],

  // Python 包缓存
  "mounts": [
    "source=pip-cache,target=/home/vscode/.cache/pip,type=volume"
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

                          ┌─────────────────────────────────────┐
                          │            Coder 平台               │
  ┌──────────┐            │  ┌─────────────────────────────┐    │
  │ 开发者A   │── 浏览器 ──► │  Workspace A (容器)          │    │
  │ (iPad)   │            │  │  ├── Java 17 + Maven        │    │
  └──────────┘            │  │  ├── MySQL + Redis Sidecar  │    │
                          │  │  └── 专属端口转发            │    │
  ┌──────────┐            │  └─────────────────────────────┘    │
  │ 开发者B   │── 浏览器 ──►  │  Workspace B (容器)         |    │
  │ (笔记本)  │            │  | ├── Python 3.11 + PyTorch  │    │
  └──────────┘            │  │  └── GPU 直通 (可选)         |    │  
                          │  └─────────────────────────────┘    │
                          │                                     │
                          │  后端：Kubernetes / Docker / VM     │
                          │  认证：SSO / OIDC / LDAP            │
                          │  模板：Terraform + .devcontainer    │
                          └─────────────────────────────────────┘

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

# 方式一：Docker 快速体验（单机）
docker run --rm -it \
  -p 7080:7080 \
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v ~/.coder:/var/run/coder \
  ghcr.io/coder/coder:latest
# 浏览器打开 http://localhost:7080

# 方式二：生产环境部署在 Kubernetes 上
helm repo add coder-v2 https://helm.coder.com/v2
helm install coder coder-v2/coder \
  --namespace coder \
  --values values-production.yaml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# main.tf - Java SpringBoot Workspace Template
data "coder_workspace" "me" {}

resource "coder_agent" "main" {
  arch = "amd64"
  os   = "linux"
  # 启动脚本：启动 Docker Compose 中的 MySQL / Redis
  startup_script = <<-EOF
    set -e
    docker compose -f /workspace/.devcontainer/docker-compose.yml up -d
  EOF
}

resource "docker_container" "workspace" {
  image = "codercom/enterprise-java:latest"
  name  = "coder-${data.coder_workspace.me.owner}-java"
  hostname = data.coder_workspace.me.name

  # 按需分配资源
  memory = data.coder_workspace.me.start_count == 1 ? 8192 : 0
  cpu    = 4

  # 挂载持久化 Volume（Maven 缓存、源码）
  volumes {
    host_path      = "/home/coder/.m2"
    container_path = "/home/coder/.m2"
  }

  env = [
    "CODER_AGENT_TOKEN=${coder_agent.main.token}",
    "JAVA_OPTS=-Xmx4g",
  ]
}

# 端口转发：8080(应用) 3306(MySQL) 6379(Redis)
resource "coder_app" "springboot" {
  agent_id = coder_agent.main.id
  url      = "http://localhost:8080"
  icon     = "/icon/java.svg"
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

resource "docker_container" "workspace" {
  image = "node:20"
  # 前端轻量，给2核足矣
  memory = 4096
  cpu    = 2

  # pnpm store 挂载到持久卷，避免反复下载
  volumes {
    host_path      = "/home/coder/.local/share/pnpm"
    container_path = "/home/coder/.local/share/pnpm"
  }
}

resource "coder_app" "vite" {
  agent_id = coder_agent.main.id
  url      = "http://localhost:5173"
  icon     = "/icon/vite.svg"
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

resource "docker_container" "workspace" {
  image = "nvcr.io/nvidia/pytorch:23.11-py3"
  memory = 32768
  cpu    = 8

  # GPU 直通
  gpus = "all"

  env = [
    "OPENAI_API_KEY=${var.openai_api_key}",
    "NVIDIA_VISIBLE_DEVICES=all",
  ]
}

resource "coder_app" "jupyter" {
  agent_id = coder_agent.main.id
  url      = "http://localhost:8888"
  icon     = "/icon/jupyter.svg"
}

resource "coder_app" "gradio" {
  agent_id = coder_agent.main.id
  url      = "http://localhost:7860"
  icon     = "/icon/gradio.svg"
}

# API Key 通过 Coder 参数注入，不写死在镜像里
variable "openai_api_key" {
  type      = string
  sensitive = true
}

1
2
3
4
5
6
7
8

┌────────────────────────────────────────────────┐
│              DevPod 桌面客户端                  |
│  ┌──────────┐  ┌──────────┐  ┌──────────┐      │
│  │ WS: Java │  │ WS: Vue  │  │ WS: AI   │      │
│  │ (K8s)    │  │ (Docker) │  │ (SSH)    │      │
│  └──────────┘  └──────────┘  └──────────┘      │
│        基础设施后端：Docker / K8s / SSH / Cloud │
└────────────────────────────────────────────────┘

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# 安装 DevPod CLI
brew install devpod

# 添加 K8s 集群作为工作区后端
devpod provider add kubernetes

# 用 .devcontainer.json 创建工作区（自动在 K8s 上启动 Pod）
devpod up ./my-java-project

# 获得一个浏览器 URL，打开就是完整的 VSCode
devpod open ./my-java-project

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

自建云端开发平台该选什么？

┌─ 团队规模 3-10 人，需要环境隔离，不想多运维
│   └─ 最佳：Coder (Docker 单机模式，半小时部署)
│   └─ 备选：DevPod + 远程 Docker/K8s（开发者自助）
│
├─ 团队规模 10-50 人，需要统一管控、SSO
│   └─ 最佳：Coder (K8s 模式 + 企业版)
│
├─ 团队规模 50-200+，大企业，合规要求高
│   └─ 最佳：Coder 企业版 + 定制模板 + 审计
│   └─ 备选：Eclipse Che（如果已经是 K8s 重度环境）
│
├─ K8s 运维能力强的团队，需要深度定制
│   └─ 最佳：OpenVSCode Server + 自研调度层
│   └─ 备选：Coder (暴露 Terraform Provider 做二次开发)
│
└─ 一个人，有台服务器，过渡方案
    └─ 最佳：code-server 裸用（快速起，后面再上 Coder）
    └─ 备选：DevPod 连接你的服务器

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

你的场景适合哪种？

Java SpringBoot 后台
├─ 团队有统一开发服务器 → Remote-SSH
├─ 需要严格环境一致 + 新人多 → Dev Container (compose)
├─ 需要环境隔离 + 浏览器访问 + 统一管控 → Coder（自建平台）
├─ 只想快速隔离不折腾平台 → DevPod + 远程 Docker
└─ 二者结合：Coder 模板定义 Java 环境，底层跑在 K8s 上

Vue3 + ThreeJS/Cesium 前端
├─ 纯前端开发 → Dev Container 或 Coder（轻量，环境一致）
├─ 需要频繁调试 WebGL 效果 → Remote-SSH dev server + 本地浏览器
├─ iPad/平板快速改代码 → Coder 或 code-server（浏览器里直接跑）
└─ 仿真 + 大模型场景 → Remote-SSH 连 GPU 机器

Python AI Agent
├─ 调用 API 的 Agent（LangChain 等） → Dev Container 或 DevPod
├─ 需要 GPU 训练 → Remote-SSH 或 Coder(GPU直通) 连 GPU 服务器
├─ 需要多套 Python 版本 → Dev Container (不同 Dockerfile)
└─ Jupyter Notebook 协作 → Coder（分享 Workspace 链接）