前言在不同电脑之间切换开发环境时编辑器、插件、项目文件和依赖往往需要重复配置。临时使用平板、低配笔记本或公共设备时即使项目文件能够同步也很难快速恢复到熟悉的编码环境。code-server可以把VS Code运行在服务器、NAS或家中主机上再通过浏览器提供编辑器界面。代码、终端、Git工具和扩展都保留在服务端换设备后只需打开网页就能继续使用同一套开发环境。这套方案中Docker负责快速部署code-server并保存配置cpolar负责将内网中的访问端口映射到公网。它适合个人远程开发、临时设备编码、教学演示和统一测试环境但不等同于完整的多人云开发平台服务器性能、依赖环境和项目权限仍需自行维护。1.什么是code-servercode-server是一个开源项目它将Microsoft Visual Studio CodeVS Code 运行在远程服务器上并通过Web浏览器 提供访问能力。简单来说code-server VS Code 浏览器访问 云端运行核心特点特性说明✅ 完整 VS Code 体验支持扩展市场、调试器、终端、Git、主题等几乎所有原生功能轻量易部署官方提供 Docker 镜像一条命令即可启动 跨平台访问只要有浏览器手机、平板、Chromebook、Windows/Mac/Linux就能写代码 统一开发环境代码、配置、依赖全部部署在服务器避免“在我机器上能跑”的问题 私有部署数据完全掌握在自己手中不依赖第三方云 IDE如 GitHub Codespaces工作原理你在服务器本地、云主机、NAS 等上运行 code-servercode-server 启动一个 Web 服务默认端口 8080你通过浏览器访问 http://你的服务器IP:8080输入密码后即可在网页中使用 VS Code 界面操作服务器上的文件典型使用场景远程开发在家连接公司/实验室的高性能服务器写代码教学演示老师一键分发统一编程环境给学生移动办公用 iPad 键盘随时随地编码资源受限设备在低配笔记本或树莓派上通过浏览器使用强大 IDE团队共享环境快速为新成员提供预装工具链的开发沙箱技术栈简述基于 VS Code 的开源版本OSS 构建使用 Node.js 和 TypeScript 开发通过 WebSocket 实现编辑器与浏览器的实时同步支持 Linux / macOS / Windows / Docker / Kubernetes 部署2.安装docker安装Dockercurl-fsSLhttps://get.docker.com/|sh启用Docker服务systemctlenable--nowdocker检查Docker状态systemctl statusdocker3.部署code-server3.1 安装code-server使用以下命令下载最新的code-server镜像dockerpull codercom/code-server:latest启动code-server容器dockerrun-d\--namecode-server\-p8000:8080\-ePASSWORD123456\-v/docker/vscode/data:/root/.vscode-server\codercom/code-server:latest验证部署打开docker发现确实已经启动容器啦部署完成后在浏览器中输入http://localhost:8008就能看到code-server的界面3.2 使用code-server使用启动命令的密码“123456”登录登录成功后同意协议并进行下一步安装中文版vscode:点击如图所示选择中文版。然后就成功啦搜索“Live Server”安装为了后续查看页面效果可以新建一个文件创造页面看看也可以使用终端code-server是一个强大的工具它让你可以在任何设备的浏览器中运行完整的VS Code开发环境。但默认情况下code-server只能在本地访问如 http://localhost:8080无法从外部网络直接使用。这时候你就需要一个内网穿透工具——而cpolar正是为此而生。4.安装cpolar实现随时随地开发4.1 什么是cpolarcpolar是一款安全高效的内网穿透工具无需公网IP或复杂配置只需一条命令即可将本地服务器、Web服务或任意端口映射到公网让你随时随地远程访问内网应用特别适合开发调试、远程运维和应急部署等场景。4.2 部署cpolarcpolar 可以将你本地电脑中的服务如 SSH、Web、数据库映射到公网。即使你在家里或外出时也可以通过公网地址连接回本地运行的开发环境。❤️以下是安装cpolar步骤使用一键脚本安装命令sudocurlhttps://get.cpolar.sh|sh安装完成后执行下方命令查看cpolar服务状态如图所示即为正常启动sudosystemctl status cpolarCpolar安装和成功启动服务后在浏览器上输入虚拟机主机IP加9200端口即:【http://ip:9200】访问Cpolar管理界面使用Cpolar官网注册的账号登录,登录后即可看到cpolar web 配置界面,接下来在web 界面配置即可打开浏览器访问本地9200端口使用cpolar账户密码登录即可,登录后即可对隧道进行管理。5.配置公网地址登录cpolar web UI管理界面后,点击左侧仪表盘的隧道管理——创建隧道隧道名称可自定义本例使用了:vscode注意不要与已有的隧道名称重复协议http本地地址8000域名类型随机域名地区选择China Top创建成功后打开左侧在线隧道列表,可以看到刚刚通过创建隧道生成了公网地址接下来就可以在其他电脑或者移动端设备异地上使用地址访问。访问成功。6.保留固定公网地址使用cpolar为其配置二级子域名该地址为固定地址不会随机变化。点击左侧的预留选择保留二级子域名地区选择china Top然后设置一个二级子域名名称我使用的是vscode大家可以自定义。填写备注信息点击保留。登录cpolar web UI管理界面点击左侧仪表盘的隧道管理——隧道列表找到所要配置的隧道点击右侧的编辑。修改隧道信息将保留成功的二级子域名配置到隧道中域名类型选择二级子域名Sub Domain填写保留成功的二级子域名地区: China Top点击更新更新完成后打开在线隧道列表此时可以看到随机的公网地址已经发生变化地址名称也变成了保留和固定的二级子域名名称。最后我们使用固定的公网地址在任意设备的浏览器中访问可以看到成功访问的页面这样一个永久不会变化的二级子域名公网网址即设置好了。总结code-server把编辑器和项目环境集中到了服务器端减少了多设备切换时重复安装工具、同步配置和复制代码的工作。结合cpolar后即使服务器没有公网IP也能从外部网络打开浏览器继续开发。正式使用前应修改示例中的弱密码并为代码目录、配置目录和项目数据设置持久化挂载。文章中的端口也需要统一容器命令映射的是8000:8080访问地址应使用8000不是正文中出现的8008。公网开放后还应使用HTTPS、限制访问范围并避免把包含源码和终端权限的开发入口直接公开。
把开发环境放到服务器上：code-server跨设备编码实践(1)
前言在不同电脑之间切换开发环境时编辑器、插件、项目文件和依赖往往需要重复配置。临时使用平板、低配笔记本或公共设备时即使项目文件能够同步也很难快速恢复到熟悉的编码环境。code-server可以把VS Code运行在服务器、NAS或家中主机上再通过浏览器提供编辑器界面。代码、终端、Git工具和扩展都保留在服务端换设备后只需打开网页就能继续使用同一套开发环境。这套方案中Docker负责快速部署code-server并保存配置cpolar负责将内网中的访问端口映射到公网。它适合个人远程开发、临时设备编码、教学演示和统一测试环境但不等同于完整的多人云开发平台服务器性能、依赖环境和项目权限仍需自行维护。1.什么是code-servercode-server是一个开源项目它将Microsoft Visual Studio CodeVS Code 运行在远程服务器上并通过Web浏览器 提供访问能力。简单来说code-server VS Code 浏览器访问 云端运行核心特点特性说明✅ 完整 VS Code 体验支持扩展市场、调试器、终端、Git、主题等几乎所有原生功能轻量易部署官方提供 Docker 镜像一条命令即可启动 跨平台访问只要有浏览器手机、平板、Chromebook、Windows/Mac/Linux就能写代码 统一开发环境代码、配置、依赖全部部署在服务器避免“在我机器上能跑”的问题 私有部署数据完全掌握在自己手中不依赖第三方云 IDE如 GitHub Codespaces工作原理你在服务器本地、云主机、NAS 等上运行 code-servercode-server 启动一个 Web 服务默认端口 8080你通过浏览器访问 http://你的服务器IP:8080输入密码后即可在网页中使用 VS Code 界面操作服务器上的文件典型使用场景远程开发在家连接公司/实验室的高性能服务器写代码教学演示老师一键分发统一编程环境给学生移动办公用 iPad 键盘随时随地编码资源受限设备在低配笔记本或树莓派上通过浏览器使用强大 IDE团队共享环境快速为新成员提供预装工具链的开发沙箱技术栈简述基于 VS Code 的开源版本OSS 构建使用 Node.js 和 TypeScript 开发通过 WebSocket 实现编辑器与浏览器的实时同步支持 Linux / macOS / Windows / Docker / Kubernetes 部署2.安装docker安装Dockercurl-fsSLhttps://get.docker.com/|sh启用Docker服务systemctlenable--nowdocker检查Docker状态systemctl statusdocker3.部署code-server3.1 安装code-server使用以下命令下载最新的code-server镜像dockerpull codercom/code-server:latest启动code-server容器dockerrun-d\--namecode-server\-p8000:8080\-ePASSWORD123456\-v/docker/vscode/data:/root/.vscode-server\codercom/code-server:latest验证部署打开docker发现确实已经启动容器啦部署完成后在浏览器中输入http://localhost:8008就能看到code-server的界面3.2 使用code-server使用启动命令的密码“123456”登录登录成功后同意协议并进行下一步安装中文版vscode:点击如图所示选择中文版。然后就成功啦搜索“Live Server”安装为了后续查看页面效果可以新建一个文件创造页面看看也可以使用终端code-server是一个强大的工具它让你可以在任何设备的浏览器中运行完整的VS Code开发环境。但默认情况下code-server只能在本地访问如 http://localhost:8080无法从外部网络直接使用。这时候你就需要一个内网穿透工具——而cpolar正是为此而生。4.安装cpolar实现随时随地开发4.1 什么是cpolarcpolar是一款安全高效的内网穿透工具无需公网IP或复杂配置只需一条命令即可将本地服务器、Web服务或任意端口映射到公网让你随时随地远程访问内网应用特别适合开发调试、远程运维和应急部署等场景。4.2 部署cpolarcpolar 可以将你本地电脑中的服务如 SSH、Web、数据库映射到公网。即使你在家里或外出时也可以通过公网地址连接回本地运行的开发环境。❤️以下是安装cpolar步骤使用一键脚本安装命令sudocurlhttps://get.cpolar.sh|sh安装完成后执行下方命令查看cpolar服务状态如图所示即为正常启动sudosystemctl status cpolarCpolar安装和成功启动服务后在浏览器上输入虚拟机主机IP加9200端口即:【http://ip:9200】访问Cpolar管理界面使用Cpolar官网注册的账号登录,登录后即可看到cpolar web 配置界面,接下来在web 界面配置即可打开浏览器访问本地9200端口使用cpolar账户密码登录即可,登录后即可对隧道进行管理。5.配置公网地址登录cpolar web UI管理界面后,点击左侧仪表盘的隧道管理——创建隧道隧道名称可自定义本例使用了:vscode注意不要与已有的隧道名称重复协议http本地地址8000域名类型随机域名地区选择China Top创建成功后打开左侧在线隧道列表,可以看到刚刚通过创建隧道生成了公网地址接下来就可以在其他电脑或者移动端设备异地上使用地址访问。访问成功。6.保留固定公网地址使用cpolar为其配置二级子域名该地址为固定地址不会随机变化。点击左侧的预留选择保留二级子域名地区选择china Top然后设置一个二级子域名名称我使用的是vscode大家可以自定义。填写备注信息点击保留。登录cpolar web UI管理界面点击左侧仪表盘的隧道管理——隧道列表找到所要配置的隧道点击右侧的编辑。修改隧道信息将保留成功的二级子域名配置到隧道中域名类型选择二级子域名Sub Domain填写保留成功的二级子域名地区: China Top点击更新更新完成后打开在线隧道列表此时可以看到随机的公网地址已经发生变化地址名称也变成了保留和固定的二级子域名名称。最后我们使用固定的公网地址在任意设备的浏览器中访问可以看到成功访问的页面这样一个永久不会变化的二级子域名公网网址即设置好了。总结code-server把编辑器和项目环境集中到了服务器端减少了多设备切换时重复安装工具、同步配置和复制代码的工作。结合cpolar后即使服务器没有公网IP也能从外部网络打开浏览器继续开发。正式使用前应修改示例中的弱密码并为代码目录、配置目录和项目数据设置持久化挂载。文章中的端口也需要统一容器命令映射的是8000:8080访问地址应使用8000不是正文中出现的8008。公网开放后还应使用HTTPS、限制访问范围并避免把包含源码和终端权限的开发入口直接公开。
