跳至主要内容
五折优惠 全部方案,限时优惠。起价 $2.48/mo
16 min left
AI 与机器学习

如何在 VPS 上运行 Code Server 和 Claude Code:一个基于浏览器的 AI 开发环境

H 作者 Haze 16 分钟阅读
A browser-based VS Code IDE with a Claude Code terminal panel running on a VPS, viewed on a tablet

你合上笔记本电脑,走进一家咖啡馆,在一台平板上打开浏览器。你完整的 VS Code 编辑器就在那里,旁边还有一个跑着 Claude Code 的终端,都在一台你自己掌控的服务器上。没有本地工具链,不用同步,也不用等一台笔记本从睡眠中醒来。

这套组合正是本指南要搭建的:在单台 Linux VPS 上运行 Code Server(基于浏览器的 VS Code)和 Claude Code(Anthropic 的 AI 编码 CLI)。讲其中一个的教程遍地都是,但把两者跑在同一台机器上,能给你一个 Codespaces 式的、AI 辅助的、任何设备都能访问的 IDE,代价只是一台 VPS,还附带完整的 root 权限。开始之前先澄清一点: 代码服务器 这里指的是 Coder 出品的开源项目(coder/code-server),而不是 Microsoft 的 VS Code Server,也不是 Coder 另外那套企业级平台。它们同名,且经常被搞混,所以现在就值得把它钉死。

读到最后,你将拥有一个跑在你自己拥有的 VPS 上、基于浏览器、AI 辅助的可用开发环境,以 HTTPS 加固,并被设置成能在连接中断后依然存活。

简短版本

  • 这套技术栈: Code Server 在浏览器标签页里给你一个 VS Code;Claude Code 在同一台服务器上加上 Anthropic 的 AI 编码助手。你可以从任何带浏览器的设备访问整套东西。
  • 真正的内存下限是 4 GB,而原因出在 Claude Code。 光是 Code Server 在 1 GB 里就能跑,但 Claude Code 需要 4 GB+,所以组合起来的技术栈至少需要 4 GB 内存、2 vCPU 和 120 GB 存储。想用得舒服就按 8 GB 来规划。
  • 安装顺序不如认证这一步重要。 两个工具的原生安装程序各自都只有一行。在一台没有浏览器的服务器上给 Claude Code 做认证,才是大多数配置卡住的地方。你要么把登录 URL 复制到本地浏览器,要么用一个 token 或 API 密钥。
  • Claude Code 不是免费的。 它需要一个付费的 Claude 套餐(Pro、Max、Team 或 Enterprise),或者一个 Anthropic API 密钥。免费的 Claude.ai 套餐不包含它。

你需要准备什么

开始之前,先确保你已备齐以下几样。它们每一样都会被后续某一步用到,所以现在就确认下来,好过做到一半才发现缺了一块。

  • 一台 Linux VPS ,满足下方的规格下限。本指南全程使用 Ubuntu 22.04 LTS;在 Debian 和其他 Ubuntu 发行版上,这些命令几乎完全相同。
  • 合适的规格: 至少 4 GB RAM, 2 vCPU, and 120 GB of NVMe storage. 这个 4 GB 的最低要求来自 Claude Code,而不是 Code Server(规格那一节会解释原因)。
  • 一个域名(可选,但建议有) ,如果你想要带真实证书的 HTTPS。你可以在一个 IP 地址上运行 Code Server,但有域名会让反向代理那一步更干净利落。
  • 一个付费的 Claude 套餐,或一个 Anthropic API 密钥。 Claude Code 需要一个 Pro、Max、Team 或 Enterprise 订阅,或者一个 Claude Console(API)账户。免费的 Claude.ai 套餐不包含 Claude Code 的使用权。在安装那一步之前先确认你手上是哪一种,因为它决定了你如何认证。
  • 基本的 SSH 访问权限 ,用一个具备 sudo 权限的用户登录服务器。

选择你的 VPS

第一个决定是规格,而你会看到的关于 Code Server 的那条常见建议,对这套技术栈来说是错的。大多数 Code Server 指南给出 1 GB 内存的最低要求,这对单独运行的 Code Server 是准确的。一旦你加上 Claude Code,这道下限就上移了。

Claude Code 自己列出的系统要求 4 GB+ RAM (依据 Claude Code 安装文档)。Code Server 大约需要 1 GB。同时运行两者,再加上你的编辑器扩展、一个活跃的项目,以及一次具备代理能力的 Claude Code 会话在工作时占用的内存,意味着组合技术栈现实的下限是:

资源最低推荐
内存4 GB8 GB
vCPU24
存储120 GB NVMe240 GB NVMe
OSUbuntu 22.04 LTSUbuntu 22.04 LTS

如果你会安装好几个扩展、在服务器上保留带有可观 node_modules 目录的大型项目,或者让 Claude Code 去跑那种一次触及许多文件的代理式任务,那么推荐配置那一栏就是你该待的地方。最低配置能把这套栈跑起来;推荐规格则让它保持舒适。

两点能帮你省钱又省得糊涂:

不需要 GPU。 Claude Code 把它的工作发送到 Anthropic 的 API,所以所有模型推理都发生在远端。你并没有在自己的服务器上运行模型。一台标准 CPU 的 VPS 才是正确的选择,在这里花钱买一台 GPU 实例什么好处都换不到。

选一个离你近的数据中心。 浏览器 IDE 对网络延迟的敏感程度是普通网页应用比不了的,因为每一次按键、每一次文件编辑都要经由一条 WebSocket 连接往返于服务器。服务器离你实际所坐的地方越近,编辑器就越像本地的。如果你大部分时间从某一个地区写代码,就选离它最近的位置。

本节要点:按 Claude Code 来配规格,而不是按 Code Server。Claude Code 的 4 GB 要求定下了你的下限。一旦两个工具共用一台机器,Code Server 那个 1 GB 的数字就不再适用。

VPS sizing for Code Server plus Claude Code: 4 GB RAM, 2 vCPU, 120 GB NVMe minimum, 8 GB RAM and 4 vCPU recommended

安装 Code Server

这一步会产出一个可在浏览器 8080 端口访问的可用 VS Code 编辑器。Code Server 附带一个安装脚本,替你处理好软件包的设置。

运行官方安装程序:

curl -fsSL https://code-server.dev/install.sh | sh

该脚本会检测你的发行版,并把 Code Server 作为一个 systemd 服务安装。跑完之后,启动该服务并设为开机自启,好让它在重启后回来:

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

Code Server 默认绑定到 127.0.0.1:8080,并在首次运行时生成一个随机密码。你需要那个密码来登录。它就在生成的配置文件里:

cat ~/.config/code-server/config.yaml

预期的输出大致如下:

bind-addr: 127.0.0.1:8080
auth: password
password: 5f3a9c1b2e8d7460a1f2c3b4
cert: false

复制那个 password 值。一旦服务器在你的浏览器里可访问,你就会在 Code Server 的登录界面输入它——而此刻它还不可访问,因为它绑定在 127.0.0.1(仅本地)。这是有意为之:安全地把 Code Server 暴露出去是后面的一步,通过反向代理来完成,而不是把 8080 端口开向互联网。

注意:Code Server 会对登录尝试做速率限制。如果你手一抖把密码敲错几次、短暂被锁在外面,那是速率限制器,而不是安装坏了。等一分钟再试。

如果你宁可完全跳过手动安装,Cloudzy 的应用市场有一个一键部署的 Code Server,会为你把服务器连同已装好的 Code Server 一并开好。如果你正在挑选主机,这是更快的路径;而上面的手动步骤在任何 Ubuntu VPS 上都能用,所以本指南其余部分保持与服务商无关。

安装 Claude Code

这一步把 AI 编码助手加到同一台服务器上。Claude Code 以单个二进制文件的形式安装,并从终端运行:就是你稍后会在浏览器 IDE 里打开的那个终端。

使用原生安装程序,这是 Anthropic 推荐的方法:

curl -fsSL https://claude.ai/install.sh | bash

确认它装好了:

claude --version

如果你已经在跑 Node.js 18 或更高版本,并且更愿意通过 npm 来管理这个工具,那条路作为替代方案也是存在的:

npm install -g @anthropic-ai/claude-code

The native installer is the primary path in Anthropic's current documentation, and it auto-updates in the background. The npm package can also auto-update, but that depends on the npm global directory being writable; if it isn't, Claude Code shows a one-time notice instead of updating silently. Choose the native installer unless you have a specific reason to prefer npm.

Claude Code 支持 Ubuntu 20.04+、Debian 10+ 和 Alpine 3.19+,所以你上面配好的那台 VPS 已经合格。它需要一个付费的 Claude 套餐或一个 Anthropic API 密钥,你已在前置条件里确认过,而免费的 Claude.ai 套餐不包含它。

要看权威的安装参考,当前的文档位于 code.claude.com。(指向 docs.anthropic.com 的旧链接会重定向到那里;请直接用 code.claude.com 这个地址。)

在无界面服务器上给 Claude Code 做认证

运行 claude 第一次运行,它会试图打开一个浏览器窗口来完成登录。在一台经由 SSH 访问的远程服务器上,没有浏览器可打开。这是那唯一一步卡住大多数服务器配置的地方,而它有三种干净利落的解法。

直接法:把登录 URL 复制到你的本地浏览器。 当你运行 claude 在服务器上,它会打印一个登录 URL(按 c 把它复制到剪贴板,如果它没有自动打开的话)。在你自己机器上的浏览器里打开那个 URL,登录,并完成授权。如果浏览器显示的是一个登录代码而不是跳转,就把那个代码粘回终端里 Paste code here if prompted 的提示处。这在 SSH 会话和容器里是正常的。这是 Pro 或 Max 订阅的标准交互式路径。

持久法:一个长期有效的 token。 如果你不想周期性地给服务器重新认证,就生成一个有效期一年的 OAuth token:

claude setup-token

该命令会带你走一遍 OAuth 授权,并打印出一个 token。它不会替你存储那个 token,所以把它复制下来并设为一个环境变量,好让 Claude Code 在每次运行时都能取到它:

export CLAUDE_CODE_OAUTH_TOKEN=your-token-here

把那行 export 加到你的 shell 配置文件里(例如 ~/.bashrc),让它跨会话持续存在。这个 token 针对你的订阅进行认证,需要一个 Pro、Max、Team 或 Enterprise 套餐。

API 密钥法。 如果你用的是一个 Claude Console(API)账户而不是订阅,就改为设置你的 API 密钥:

export ANTHROPIC_API_KEY=sk-ant-your-key-here

一点关于账单的说明,免得你收到账单时惊讶:API 密钥通过 Claude Console 按 token 计费,这是一条与 Pro 或 Max 订阅相独立的计费路径。如果你同时设了订阅和 ANTHROPIC_API_KEY ,一旦通过审批,API 密钥就会优先。所以如果你打算用订阅,就别在环境里留下一个多余的 API 密钥。

本节要点:在无界面机器上做认证有三条路:把登录 URL 复制到你的本地浏览器、运行 claude setup-token 获取一个长期有效的订阅 token,或设置 ANTHROPIC_API_KEY 走直接的 API 计费。

Three ways to authenticate Claude Code on a headless server: copy the login URL to a local browser, a one-year OAuth token, or an Anthropic API key

用 HTTPS 安全地暴露 Code Server

此刻 Code Server 绑定在 localhost 上,提供的是明文 HTTP。你不会想把 8080 端口开向互联网、再通过一条未加密的连接去登录,因为网络路径上的任何人都可能读到你的会话。标准的解法是在 Code Server 前面放一个终结 HTTPS 的反向代理。

有一条硬性约束塑造了这一步: Code Server 依赖 WebSockets (依据 Coder 的要求)。编辑器用一条持久的 WebSocket 连接来与服务器做实时通信,所以你的反向代理必须正确地转发 WebSocket 升级。这就是为什么代理的选择很重要。

用 Caddy 或 Nginx。 两者都能可靠地处理 WebSocket 代理,而且如果你想省去手动安装,两者都可作为 Cloudzy 应用市场的一键应用使用。Caddy 是更短的路径,因为它会自动获取并续期一张 Let's Encrypt 证书。给 Code Server 用的一份最小 Caddyfile 是:

# /etc/caddy/Caddyfile
code.example.com {
    reverse_proxy 127.0.0.1:8080
}

这就是全部配置。Caddy 会检测到 WebSocket 升级并无需额外指令就转发它,还会自行为 code.example.com 配好 HTTPS。用 sudo systemctl reload caddy 重载 Caddy,再浏览到 https://code.example.com,你就会通过一条加密连接抵达 Code Server 的登录界面。

如果你偏好 Nginx,配置会更长,因为你要显式地设置 WebSocket 升级头,并用 Certbot 单独获取证书:

# /etc/nginx/sites-available/code-server
server {
    listen 80;
    listen [::]:80;
    server_name code.example.com;
    location / {
        proxy_pass http://127.0.0.1:8080/;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        proxy_set_header Accept-Encoding gzip;
    }
}

注意:Nginx 和 Caddy 是官方 Coder 文档记录在案的两款代理,两者都是这里可靠的选择。Apache 也能代理 Code Server,但它的 WebSocket 转发需要额外的模块配置(proxy_wstunnel 加上 rewrite 规则),官方文档并未涵盖,而漏配那些模块的部署往往最后都在排查编辑器连接掉线。如果你已经在为其他站点跑 Apache,最简单的路径是把 Code Server 放在一个独立 vhost 上、由 Nginx 或 Caddy 代理,而不是去配置 Apache 来代理它。

A reverse proxy terminating HTTPS in front of Code Server on localhost port 8080 and forwarding WebSocket upgrades, using Caddy or Nginx

让你的会话保持存活

这台服务器上跑着两样不同的东西,当你的连接中断时它们表现各异。在你因为合上笔记本盖子而丢掉一小时的代理式 Claude Code 运行之前,值得先弄清哪个是哪个。

Code Server 本身能挺过断连,因为你把它作为一个 systemd 服务安装了。关闭浏览器标签页或断开 SSH,并不会停掉 Code Server 服务。在正常的重连中,你会回到同一个浏览器 IDE 会话,不过非常长时间的断连可能需要重载一次窗口,具体取决于 Code Server 的重连行为。

Claude Code 则不同。当你在一个经由 SSH 的交互式终端里运行 claude 时,它就绑定在那个终端会话上。关闭承载那个终端的浏览器标签页,或断开 SSH 连接,进程就随之而亡——如果它当时正在工作,就是半途而废。解法是把 Claude Code 跑在一个终端复用器里面,好让会话从你的连接中分离出来、继续运行。

tmux 是干这个的标准工具。如果你以前没用过它,三条命令就覆盖了你所需的一切:

# Start a new named session
tmux new -s claude

# Run claude inside it as normal, then detach without stopping it:
# press Ctrl-b, then d

# Reattach later, from any new SSH session:
tmux attach -t claude

开始 claude 在 tmux 会话里面,用 Ctrl-b 然后 d 分离,代理式运行就会在服务器上继续。在你重新连接时(如果愿意,可以从另一台设备)用 tmux attach -t claude 重新附着,你就回到了同一个活着的会话里。

注意:如果你已经在用 screen,它的工作方式一样(用 screen -S claude 启动,Ctrl-a 然后 d 分离,screen -r claude 重新附着)。两个工具解决的是同一个问题;挑你熟的那个。

在浏览器 IDE 里面使用 Claude Code

一旦两个工具都在机器上,就有两种方式从浏览器 IDE 访问 Claude Code:集成终端,和 VS Code 扩展。其中一种今天就可靠;另一种在你依赖它之前需要测试。

终端这条路,从构造上就管用。 在你的浏览器里打开 Code Server,打开它的集成终端(Terminal > New Terminal,或 Ctrl+`),然后运行:

claude

你现在就在浏览器 IDE 里面跑起了完整的 Claude Code CLI,就在你打开的那个项目的同一目录下。这是靠谱的那条路:终端是服务器上一个真实的 shell,而 Claude Code 是装在那台服务器上的一个 CLI,所以它跑得起来。把它和上面的 tmux 那一步搭配,会话就能挺过一次断连。

VS Code 扩展这条路是可行的,但对这套配置而言,终端那条路仍是更稳妥的基线。Anthropic 发布了一个 Claude Code VS Code 扩展,其当前文档称它可从 Open VSX 安装,这一点很重要,因为 Code Server 用的是 Open VSX 而不是 Microsoft 的 VS Code Marketplace。可以在 Code Server 的 Extensions 视图里搜索“Claude Code”,或者从 Open VSX 安装那个 Anthropic.claude-code 扩展,如果它在你的实例里出现的话。如果扩展安装得不干净,或者 IDE 集成的表现与它在桌面版 VS Code 里的不同,就退回到集成终端。CLI 在任何终端里都能用,而对这套 VPS 配置来说,那才是可靠的那条路。

部署你自己的、基于浏览器的 AI IDE

你现在有了完整的图景:一个浏览器可访问的 VS Code 编辑器,旁边配着 Claude Code,以 HTTPS 加固,并被设置成能挺过一次断连,都跑在一台你掌控的 VPS 上。

这当中唯一纯属搭建体力活的部分是开头:开好一台服务器、把 Code Server 装上,之后你才能做任何有意思的事。如果你想跳过那一步,我们提供一个 一键部署的 Code Server ,在 Cloudzy 应用市场里,它会把 VPS 连同已在运行的 Code Server 一并开好,于是你径直落在登录界面上,直接去装 Claude Code 并做认证。对于日常的常规使用,仍然要像上面展示的那样用 Caddy 或 Nginx 把实例放在 HTTPS 后面,而不是把裸的 http://<server-ip>:8080 登录当作最终的生产访问路径。

相同 Linux VPS 承载整套技术栈(编辑器、AI CLI 和反向代理),并带有这套配置所需的 root 权限。从那里起,上面那些步骤就是横在你和“从任何浏览器用 AI 写代码”之间的全部了。

如果在动手搭建之前,你还在权衡该认准哪一款 AI 编码 CLI,我们对 OpenCode 对比 Claude Code 以及更广泛的 代理式编码 CLI 大比拼 的对比,会帮你把各种取舍都讲清楚。

常见问题

Code Server 和 Claude Code 需要什么样的 VPS 配置?

对于组合起来的技术栈,你至少需要 4 GB 内存、2 vCPU 和 120 GB 存储。这个 4 GB 的最低要求是由 Claude Code 驱动的,而不是 Code Server(光是 Code Server 在大约 1 GB 里就能跑)。要在带扩展和较大项目的情况下用得舒服,推荐的规格是 8 GB 内存和 4 vCPU。

Claude Code 免费吗?

不。Claude Code 需要一个付费的 Claude 套餐(Pro、Max、Team 或 Enterprise),或一个通过 Claude Console 的 Anthropic API 密钥。免费的 Claude.ai 套餐不包含 Claude Code 的使用权。

怎样在一台没有浏览器的服务器上给 Claude Code 做认证?

运行 claude,把它打印出的登录 URL 复制进你本地机器上的浏览器以完成登录,如有提示则把代码粘回终端。对于一台持久的服务器,运行 claude setup-token 生成一个有效期一年的 OAuth token 并把它设为 CLAUDE_CODE_OAUTH_TOKEN,或者设置 ANTHROPIC_API_KEY 以用一个 Claude Console API 密钥来认证。

Claude Code VS Code 扩展能在 Code Server 里面工作吗?

Claude Code 的 CLI 在 Code Server 的集成终端里面完全跑得起来,这是在这套浏览器 IDE 配置里使用它最可靠的方式。VS Code 扩展也值得一试,因为 Anthropic 称它可从 Open VSX 安装,而 Code Server 用的是 Open VSX 而不是 Microsoft 的 VS Code Marketplace。如果扩展安装得不干净或在你的实例里表现不同,就改用集成终端那条路。

我能从 iPad 或手机上用这个吗?

能。Code Server 是基于浏览器的,所以任何带现代浏览器的设备(包括 iPad 或手机)都能访问到完整的 IDE。那种不挑设备的访问,正是浏览器 IDE 相对于 VS Code Remote SSH 的主要优势,后者需要一个本地的 VS Code 安装才能连接。

Share

博客更多内容

继续阅读。

准备好部署了吗? 起价 $2.48/月。

独立云厂商,自 2008 年起。AMD EPYC、NVMe、40 Gbps。14 天退款保证。