Featured image of post 把 VPS 变成你的远程 AI 编程 IDE:code-server + Continue.dev + Cloudflare Tunnel 全栈方案

把 VPS 变成你的远程 AI 编程 IDE:code-server + Continue.dev + Cloudflare Tunnel 全栈方案

手把手教你用一台 $5/月 VPS 搭建完整的远程 AI 编程环境:code-server 浏览器 IDE + Continue.dev AI 编码助手 + Cloudflare Tunnel 安全访问。无需本地高性能机器,随时随地写代码。

导语:为什么你的开发环境应该搬上 VPS?

你是否有过这样的经历——换了新电脑要重装所有开发环境、出差时笔记本性能不够跑大型项目、或者在家里的 Mac 上写代码但公司服务器上的调试环境配不起来?

这些问题有一个统一的解法:把完整的 IDE 搬到 VPS 上,通过浏览器随时随地访问。

这不是什么新概念,但 2026 年的技术栈组合已经让它变得异常简单和强大。一台 $5/月的 VPS,配合 code-server(浏览器版 VS Code)、Continue.dev(开源 AI 编码助手)和 Cloudflare Tunnel(免端口安全访问),你可以拥有一个性能可升级、数据不落地、环境永远一致的远程开发工作台。

说明:本文包含 VPS 服务商 affiliate 链接。通过链接购买,我们可能获得佣金,但不会影响你的价格。我们只推荐适合实际部署场景的海外服务。


方案全景:三大组件如何协作

你的浏览器 ←(TLS加密)→ Cloudflare Tunnel ←(SSH)→ VPS
                                                      │
                                                      ├── code-server (VS Code in Browser)
                                                      ├── Continue.dev (AI Coding Assistant)
                                                      └── Ollama / API (LLM Backend)
组件作用资源消耗
code-server在 VPS 上运行 VS Code 服务端,通过浏览器访问CPU 10-20%,RAM 200-400MB
Continue.devVS Code 插件,支持多 LLM 后端(Ollama/OpenAI/Claude)依赖后端模型
Cloudflare Tunnel无需开放端口,自动 HTTPS,隐藏 VPS IP几乎零资源
Ollama(可选)本地跑小模型做代码补全和 Chat取决于模型大小

核心优势:你的代码和数据始终留在 VPS 上,不会下载到本地机器。 这在处理客户数据、私有代码库或合规要求严格的场景下特别有价值。


第一步:选一台合适的 VPS

远程 IDE 对 VPS 的配置要求其实不高——code-server 本身非常轻量,主要消耗在编译大型项目和运行 AI 模型上。

推荐配置

使用场景最低配置推荐配置预估月费
纯代码编辑(不调用 AI)1 vCPU / 2GB RAM2 vCPU / 4GB RAM$3-5
代码编辑 + Continue.dev(调 OpenAI API)2 vCPU / 4GB RAM2 vCPU / 4GB RAM$5-8
代码编辑 + 本地 LLM(Ollama)2 vCPU / 8GB RAM4 vCPU / 16GB RAM$15-40

服务商推荐

入门首选 — RackNerd

RackNerd 的 DC02/DC03 机房性价比极高,适合预算有限的独立开发者。

点击这里查看 RackNerd 最新 VPS 套餐

推荐从 $3.29/月(1GB RAM / 1 vCPU)起步,升级灵活。

均衡之选 — Hostinger VPS

Hostinger 的 KVM VPS 提供 5 个数据中心区域,面板友好,支持一键 Docker 部署。

点击这里查看 Hostinger VPS 套餐

KVM 2(2GB RAM)约 $5.99/月,KVM 4(4GB RAM)约 $11.99/月。

高性能需求 — Vultr

Vultr 拥有 30+ 全球数据中心,支持按小时计费,适合需要弹性伸缩的场景。

点击这里查看 Vultr 套餐

Standard VPS 从 $6/month 起,High Frequency 从 $12/month 起。


第二步:部署 code-server

一键安装

SSH 到你的 VPS 后,执行:

# 安装最新的 code-server
curl -fsSL https://code-server.dev/install.sh | sh

安装完成后修改配置:

# 编辑配置文件
nano ~/.config/code-server/config.yaml

写入以下内容:

bind-addr: 127.0.0.1:8080
auth: password
password: YOUR_STRONG_PASSWORD
cert: false

安全提示bind-addr 设为 127.0.0.1 意味着 code-server 只监听本地端口,不直接暴露在公网。我们通过 Cloudflare Tunnel 来安全访问,这是最佳实践。

启动并设置开机自启:

sudo systemctl enable code-server@$USER
sudo systemctl start code-server@$USER

验证运行状态:

curl http://127.0.0.1:8080
# 应返回 VS Code 的 HTML 页面

安装推荐扩展

在浏览器访问 http://YOUR_DOMAIN 后,进入 Extensions 面板安装以下扩展:

扩展用途是否必需
ContinueAI 编码助手,支持多模型✅ 是
GitLensGit 增强推荐
ESLint / Prettier代码格式化按需
DockerDocker 管理按需
Remote - SSHSSH 连接到其他服务器按需

第三步:配置 Continue.dev AI 编码助手

Continue.dev 是 VS Code 中最强大的开源 AI 编码插件,支持同时接入多个 LLM 后端。

安装 Continue

  1. 在 code-server 的 Extensions 面板搜索 “Continue” 并安装
  2. 点击 Continue 图标 → Configure → 选择 config.jsonconfig.yaml

方案 A:调用 OpenAI / Claude API(最省事)

适用于不想自己跑模型、只需要 AI 代码补全和 Chat 的场景。

{
  "models": [
    {
      "title": "GPT-4o",
      "provider": "openai",
      "model": "gpt-4o",
      "apiKey": "sk-your-openai-key"
    },
    {
      "title": "Claude Sonnet",
      "provider": "anthropic",
      "model": "claude-sonnet-4-20250514",
      "apiKey": "sk-ant-your-key"
    }
  ],
  "tabAutocompleteModel": {
    "title": "Codestral",
    "provider": "mistral",
    "model": "codestral-latest",
    "apiKey": "your-mistral-key"
  }
}

成本估算

  • GPT-4o:约 $0.01/1K tokens,日常编码 $5-15/月足够
  • Claude Sonnet:约 $0.003/1K input tokens,更经济
  • Codestral(Tab 自动补全):约 $1/1M tokens,极便宜

方案 B:本地跑 Ollama(隐私优先)

如果你的 VPS 有 8GB+ 内存,可以本地跑量化版 LLM,完全不调用外部 API。

# 安装 Ollama
curl -fsSL https://ollama.com/install.sh | sh

# 拉取代码专用模型
ollama pull codellama:7b
ollama pull deepseek-coder:6.7b

Continue 配置:

{
  "models": [
    {
      "title": "CodeLlama 7B (Local)",
      "provider": "ollama",
      "model": "codellama:7b"
    },
    {
      "title": "DeepSeek Coder 6.7B (Local)",
      "provider": "ollama",
      "model": "deepseek-coder:6.7b"
    }
  ],
  "tabAutocompleteModel": {
    "title": "Qwen2.5-Coder 1.5B",
    "provider": "ollama",
    "model": "qwen2.5-coder:1.5b"
  }
}

成本:零 API 费用,只需 VPS 本身的费用。7B 量化模型约占用 4-5GB RAM。

方案 C:混合模式(推荐)

日常 Tab 补全用本地小模型,复杂代码生成和 Chat 用云端大模型。

{
  "models": [
    {
      "title": "GPT-4o",
      "provider": "openai",
      "model": "gpt-4o",
      "apiKey": "sk-your-key"
    },
    {
      "title": "DeepSeek Coder (Local)",
      "provider": "ollama",
      "model": "deepseek-coder:6.7b"
    }
  ],
  "tabAutocompleteModel": {
    "title": "Qwen2.5-Coder 1.5B (Local)",
    "provider": "ollama",
    "model": "qwen2.5-coder:1.5b"
  }
}

第四步:用 Cloudflare Tunnel 安全暴露

这是整个方案中最关键的一步——让你的 VPS 服务安全地通过浏览器访问,而不需要开放任何端口。

为什么用 Tunnel?

传统方案(开放端口)Cloudflare Tunnel
需要配置 Nginx 反向代理零配置
暴露 VPS IP 地址IP 被 Cloudflare 隐藏
需要手动管理 SSL 证书自动 HTTPS
DDoS 攻击直接打到 VPSCloudflare CDN 防护
防火墙规则复杂内置零信任访问控制

部署步骤

# 1. 安装 cloudflared
wget https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64
chmod +x cloudflared-linux-amd64
sudo mv cloudflared-linux-amd64 /usr/local/bin/cloudflared

# 2. 登录 Cloudflare(需要注册 cloudflare.com 账号)
cloudflared tunnel login

# 3. 创建隧道
cloudflared tunnel create code-server-tunnel

# 4. 配置隧道(假设你的域名是 dev.yourdomain.com)
# 编辑 ~/.cloudflared/config.yml
cat > ~/.cloudflared/config.yml << 'EOF'
tunnel: code-server-tunnel
credentials-file: /home/YOUR_USER/.cloudflared/TUNNEL_ID.json

ingress:
  - hostname: dev.yourdomain.com
    service: http://127.0.0.1:8080
  - service: http_status:404
EOF

# 5. 启动隧道
cloudflared tunnel run code-server-tunnel

设置 systemd 服务(开机自启)

sudo tee /etc/systemd/system/cloudflared.service > /dev/null << 'EOF'
[Unit]
Description=Cloudflare Tunnel
After=network.target

[Service]
Type=notify
LimitNOFILE=65535
ExecStart=/usr/local/bin/cloudflared --no-autoupdate tunnel run
Restart=on-failure
RestartSec=5
KillMode=mixed

[Install]
WantedBy=multi-user.target
EOF

sudo systemctl enable cloudflared
sudo systemctl start cloudflared

配置 DNS

在 Cloudflare Dashboard 中为你的域名添加一条 CNAME 记录:

dev  →  code-server-tunnel-xxxxx.trycloudflare.com

这样 dev.yourdomain.com 就会通过 Cloudflare 的安全隧道指向你 VPS 上的 code-server。


第五步:进阶优化

性能调优

# code-server 性能优化
export CODE_SERVER_DISABLE_GPU=false  # 启用 GPU 加速(如果有)
export CODE_SERVER_MAX_OLD_SPACE_SIZE=2048  # Node.js 堆内存

# 在 code-server config.yaml 中添加
extensions-dir: ~/.vscode/extensions
user-data-dir: ~/.vscode

文件同步与备份

# 使用 Rclone 自动备份代码到 S3/Backblaze
crontab -e
# 每天凌晨 3 点备份
0 3 * * * rsync -az --delete ~/.vscode /tmp/vscode-backup/ && rclone sync /tmp/vscode-backup s3:honest-radar-backups/vscode-config/

多用户隔离

如果你需要让团队成员共用这台 VPS:

# 为每个成员创建独立系统用户
sudo useradd -m -s /bin/bash alice
sudo useradd -m -s /bin/bash bob

# 各自安装 code-server,监听不同端口
# Alice: 8081, Bob: 8082
# Cloudflare Tunnel 配置中为每个人创建独立 ingress 规则

监控 VPS 健康状态

# 安装 Docker + Prometheus + Grafana 监控栈
docker run -d --name prometheus -p 9090:9090 prom/prometheus
docker run -d --name grafana -p 3000:3000 grafana/grafana

# 或者用更轻量的 uptime-kuma
docker run -d --name uptime-kuma -p 3001:3001 -v uptime-kuma:/app/data louislam/uptime-kuma

成本对比:三种方案每月花多少钱?

方案VPSAI 模型Cloudflare域名总计
极简(不调 AI)$3.29 (RackNerd)$0免费$10/年~$3.3/月
API 模式(OpenAI)$5.99 (Hostinger)$10 (GPT-4o)免费$10/年~$16/月
本地 LLM(Ollama 7B)$15 (Vultr HF)$0免费$10/年~$15/月
混合模式(推荐)$5.99 (Hostinger)$5 (Claude)免费$10/年~$11/月

省钱技巧:RackNerd 的年度优惠套餐经常低至 $15/年(1GB RAM),适合纯代码编辑场景。如果加上 Ollama 本地跑模型,VPS 费用就是全部成本。


常见坑与排错

1. 浏览器访问 code-server 白屏

通常是因为 Cloudflare Tunnel 的 ingress 配置错误。检查:

# 确认 code-server 确实在监听 8080
curl http://127.0.0.1:8080/api/info

# 检查 cloudflared 日志
journalctl -u cloudflared -f

2. Continue.dev 无法连接模型

  • OpenAI API:检查 apiKey 是否正确,余额是否充足
  • Ollama:确认 ollama list 能看到模型,ollama run codellama 能正常交互
  • 跨域问题:在 code-server config.yaml 中添加 "cors": true

3. 代码编辑卡顿

  • 检查 VPS 磁盘 IO:iostat -x 1
  • 如果是机械硬盘,换 SSD VPS(Hostinger/Vultr 默认都是 NVMe)
  • 减少 VS Code 扩展数量

4. 内存不足导致 OOM

# 查看内存占用
free -h

# 如果低于 500MB,考虑:
# - 关闭不用的 Docker 容器
# - 减少 VS Code 扩展
# - Ollama 模型从 13B 降到 7B
# - 增加 swap:sudo fallocate -l 4G /swapfile && sudo chmod 600 /swapfile && sudo mkswap /swapfile && sudo swapon /swapfile

总结:什么时候该用这个方案?

适合的场景:

  • 你经常在不同设备间切换开发(Mac + PC + 平板)
  • 你的项目需要特定的服务器环境(特定 OS、特定软件版本)
  • 你对代码数据安全有要求,不希望代码留在本地
  • 你想用 AI 辅助编程但不想花 $20/月订阅 Cursor Pro

不适合的场景:

  • 你需要 GPU 密集型的本地开发(比如训练模型)
  • 你的网络延迟很高(远程 IDE 对网络质量敏感)
  • 你只需要写简单的静态页面(本地 IDE 就够了)

一台 $5/月的 VPS + code-server + Continue.dev + Cloudflare Tunnel,就是一个全功能、可升级、数据安全的远程 AI 编程工作台。不需要昂贵的云服务,不需要复杂的运维,15 分钟内就能搭好。


相关文章:

  • [[cloudflare-tunnel-vps-self-host-2026]] — 深入讲解 Cloudflare Tunnel 配置
  • [[ai-coding-agent-vps-self-host-2026]] — 更深入的 AI 编程工作台方案
  • [[self-host-llm-ollama-budget-vps-2026]] — 在 VPS 上自托管 LLM