code-server：浏览器里运行 VS Code，随时随地云端开发

code-server浏览器里运行 VS Code随时随地云端开发code-server 是将 VS Code 运行在服务器端、通过浏览器访问的开源项目。只要有网络无论是 iPad、Chromebook还是办公室的借用电脑打开浏览器就能获得完整的 VS Code 开发体验代码编辑、终端、Git 操作、调试——一切都在云端本地无需安装任何开发环境。本文将介绍如何用 Docker Compose 部署 code-server配合 Caddy 实现 HTTPS 保护并演示常见使用技巧。服务器配置code-server 本身轻量2 核 4GB 机型足以应对轻量项目的编辑和运行若需要在服务器内执行重型编译如大型 C 项目、Rust 构建建议选择 4 核 8GB 或更高配置。推荐雨云服务器 rainyun-com注册填优惠码2026off领 5 折优惠券按量付费随时可升配是云端开发的理想选择。安装 Dockercurl-fsSLhttps://get.docker.com|shsudousermod-aGdocker$USERnewgrpdockerDocker Compose 部署mkdir-p~/code-server/workspacecd~/code-serverdocker-compose.ymlversion:3.8services:code-server:image:codercom/code-server:latestcontainer_name:code-serverrestart:unless-stoppedports:-8080:8080environment:-PASSWORDyour_strong_password-TZAsia/Shanghai-DOCKER_USERcodervolumes:# 持久化工作目录-./workspace:/home/coder/project# 持久化 VS Code 扩展和配置-code_server_config:/home/coder/.config-code_server_extensions:/home/coder/.local/share/code-server# 挂载宿主机 SSH Key用于 GitHub-~/.ssh:/home/coder/.ssh:rouser:1000:1000networks:-code_server_netnetworks:code_server_net:volumes:code_server_config:code_server_extensions:关于user: 1000:1000确保容器内的coder用户与宿主机文件的属主一致避免文件权限问题。1000是大多数 Linux 发行版第一个普通用户的 UID。启动dockercompose up-ddockercompose logs-fcode-server看到HTTP server listening on http://0.0.0.0:8080即成功。配置 Caddy 反代code-server 必须运行在 HTTPS 下否则浏览器会限制剪贴板等功能。Caddy 自动处理 TLSsudoaptinstallcaddy-y编辑/etc/caddy/Caddyfilecode.yourdomain.com { reverse_proxy localhost:8080 # 开启 WebSocket 支持终端和热更新需要 websockets { header Connection *Upgrade* header Upgrade websocket } handle websockets { reverse_proxy localhost:8080 } }重载sudosystemctl reload caddy将域名 A 记录解析到服务器 IP等待 DNS 生效后访问https://code.yourdomain.com。初始设置打开https://code.yourdomain.com输入docker-compose.yml中设置的PASSWORD点击Submit。进入熟悉的 VS Code 界面。左下角语言切换CtrlShiftP →Configure Display Language→ 选择zh-cn需先安装中文扩展。修改密码code-server 的密码在环境变量中配置修改后重启容器生效# 修改 docker-compose.yml 中的 PASSWORD然后dockercompose restart code-server或使用~/.config/code-server/config.yaml挂载到容器内bind-addr:0.0.0.0:8080auth:passwordpassword:your_new_passwordcert:false使用指南安装扩展code-server 使用Open-VSX Registry而非微软官方市场大多数流行扩展都有同步版本点击左侧 Extensions 图标CtrlShiftX。搜索并安装常用扩展Pythonms-python.pythonGogolang.goGitLenseamodio.gitlensPrettieresbenp.prettier-vscodeChinese (Simplified)ms-ceintl.vscode-language-pack-zh-hansRemote SSH不可用但 code-server 本身就是远程方案扩展安装在容器卷code_server_extensions中重启容器后保留。若某扩展在 Open-VSX 上不存在可手动下载.vsix文件通过 Extensions →...→Install from VSIX安装。浏览器终端使用打开终端Ctrl或菜单Terminal → New Terminal。终端完整运行在服务器内可执行任意 Linux 命令# 安装 Python 依赖pipinstallflask requests# 运行开发服务器python app.py# 管理 Gitgitstatusgitadd.gitcommit-mfeat: initial commitGit Clone 项目# 终端中cd/home/coder/projectgitclone https://github.com/your-org/your-repo.git项目会出现在/home/coder/project/下也对应宿主机的~/code-server/workspace/目录文件直接持久化。SSH Key 配置连接 GitHub由于我们挂载了宿主机的~/.ssh目录容器内可直接使用宿主机的 SSH 密钥若宿主机还没有 SSH Keyssh-keygen-ted25519-Cyouremail.comcat~/.ssh/id_ed25519.pub将公钥添加到 GitHub → Settings → SSH and GPG Keys。在 code-server 终端中测试ssh-Tgitgithub.com# 输出Hi username! Youve successfully authenticated...之后git clone gitgithub.com:...即可免密码操作。在浏览器中工作的常用快捷键部分快捷键会被浏览器截获可用以下替代功能原 VS Code 快捷键浏览器中替代命令面板CtrlShiftPF1 或直接 CtrlShiftP多数浏览器可用打开终端CtrlCtrlShift关闭标签CtrlW先点编辑器区域再 CtrlW避免关闭浏览器标签全屏编辑器CtrlK ZF11浏览器全屏 CtrlK Z多光标AltClickAltClick通常正常建议在 Chrome 中使用添加到主屏幕功能以 PWA 模式打开 code-server可获得近似原生应用的体验解决快捷键冲突。多工作区配置若想在一台服务器上为不同项目创建独立的 code-server 实例# 在 docker-compose.yml 中添加第二个服务code-server-2:image:codercom/code-server:latestcontainer_name:code-server-2ports:-8081:8080environment:-PASSWORDanother_passwordvolumes:-./workspace2:/home/coder/project-code_server_config_2:/home/coder/.config在 Caddyfile 中为code2.yourdomain.com添加对应反代即可。端口转发预览本地服务code-server 内置了端口转发功能可将容器内运行的 Web 服务暴露到浏览器在终端内启动一个服务如python -m http.server 5000。VS Code 底部Ports面板自动检测到 5000 端口点击Open in Browser。浏览器会在新标签中打开该服务通过 code-server 代理。总结code-server 是云端开发工作流的终极形态——一台服务器、一个域名任何设备都能获得完整的开发环境。无需在本地配置 Node、Python、Go 等运行时团队成员可共享同一环境配置彻底告别在我机器上是好的问题。稳定的服务器是云端开发的基石雨云服务器 rainyun-com的2 核 4GB 机型对日常编辑任务绰绰有余注册填优惠码2026off领 5 折费用极低。不妨今天就搭建一套彻底解放你的开发设备