浏览器秒变 VS Code!Code-Server+cpolar,异地开发再也不用带电脑

Code-Server 是一款能将 VS Code 完整部署到服务器的工具,通过浏览器就能实现远程编码,保留了原编辑器的插件安装、代码调试、终端操作等所有核心功能。它特别适合三类人群:笔记本性能有限的开发者、需要跨设备协作的团队、经常出差的职场人,核心优点是借助服务器算力解放本地设备,确保多设备开发环境一致,且开源免费无功能限制。

实际使用中能发现,Code-Server 的适配性很强,从电脑到平板都能流畅操作,但建议提前在服务器配置常用插件,避免每次登录重复安装;同时记得设置登录密码,防止局域网内误访问。另外,它的文件存储在服务器端,定期备份项目文件能避免意外丢失。

但默认情况下,Code-Server 只能在局域网内访问,带来不少麻烦:下班回家想继续处理公司服务器上的代码,因网络隔离无法连接;出差时灵感突发,却不能通过手边的平板修改项目;团队成员异地协作,无法共享统一的开发环境,导致配置冲突。

而 Code-Server 与 cpolar 的结合恰好解决了这个问题。cpolar 的内网穿透功能能快速生成公网访问链接,无需复杂的端口映射或公网 IP,还支持 HTTPS 加密和 IP 白名单设置,保障访问安全。有了这个组合,在家用电脑、出差用平板,甚至咖啡厅的公共设备上,都能通过浏览器接入服务器的 Code-Server,随时随地开展开发工作。

这么好用的组合安装起来也非常的简单,开跟着下面的教程试试吧!

1 关于【Code Server】

简单粗暴地说,Code-Server就是把大名鼎鼎的VS Code(Visual Studio Code,微软出品的宇宙第一编辑器,没有之一!)直接搬到了你的服务器上,然后通过浏览器访问!

你没听错!这意味着:

  1. VS Code体验不变:你熟悉的界面、快捷键、插件、终端,一切都原汁原味地呈现在你的浏览器里。
  2. 服务器算力加持:你的代码运行在强大的服务器上,本地电脑再也不用担心性能瓶颈,告别卡顿、风扇狂转的烦恼!
  3. 随时随地,任何设备:只要有浏览器和网络,无论是你的MacBook、Windows PC、Linux本,甚至是iPad、安卓平板,甚至是性能一般的旧电脑,都能瞬间变成强大的开发工作站!
  4. 开发环境一致:你的开发环境统一在服务器上,再也不用担心“在我电脑上能跑,在你电脑上就报错”的尴尬了。
  5. 告别SSH+Vim的痛苦:直接在服务器上用VS Code编辑代码,调试、版本控制、文件管理,一切都变得可视化、高效化。

是不是听着就觉得“香”?这简直就是为我们这些追求效率、又不想被硬件束缚的开发者量身定制的!

2 群晖nas部署安装【Code Server】

好了,废话少说,直接上手!我们今天就用群晖NAS来部署Code-Server。跟着我一步步走,保证你轻松搞定!

首先我们确认已经安装了docker,也就是container Manager

然后打开文件夹,在docker文件夹里面点击新增,我们来创建一个名为code-server的文件夹。

接着点击控制面板,点击计划任务,我们来创建任务计划

点击新增,选择触发的任务,点击用户定义的脚本、

任务名称自定义,用户账号选root,下面的已启动不打钩

点击任务设置,在运行命令这里粘贴这行脚本,

dockerrun -d\--name=code-server\-ePUID=1026\-ePGID=101\-eTZ=Asia/Shanghai\-ePASSWORD=88888888\-p28443:8443\-v /volume1/docker/code-server:/config\--restart unless-stopped\linuxserver/code-server:latest

在password密码这里修改一下,端口号这里按照自己情况修改,我这里不变

点击确定,会跳出一个提醒,我们点击确定,

然后输入NAS密码。

然后我们选中这个脚本,点击运行。

打开docker,找到容器,我们看一下容器是否创建完成

确认后我们打开新的浏览器,输入群晖的ip地址加上28443端口,就能打开code-server的登录界面啦!

3 简单使用code-server

好啦这就是code-server的主页啦,和vs code差不多吧!

默认是没有中文的,我们点这里,在搜索栏搜索cn,找到这个中文插件,点击下载。

下载完成后我们打开命令面板,

输入display后点击这行命令,会显示安装的语言列表,

我们点击刚才下载的插件

稍等一会刷新后就是中文版的啦!

好啦!现在我们的云端VS Code已经跑起来了!像你平时使用VS code一样光说不练假把式,我们来实际操作一下!

首先,我在左边的文件管理器里,右键新建一个文件,叫index.html。

然后,把我早就准备好的一段超酷炫的个人主页代码粘贴进来!这里面有HTML、CSS还有一点点JavaScript,可以让我们的网页动起来!

代码放进来了,怎么看效果呢?我们去左边的插件市场,搜索‘Live Server’,点击安装。

装好后,回到我们的index.html文件,看到右下角那个‘Go Live’按钮了吗?点它!

家人们请看!一个带有打字机效果的个人主页就出现了!这个页面所有的计算和渲染,其实都是在我们的NAS上完成的,浏览器只负责显示!

4 介绍以及群晖安装cpolar

想象一下,你现在用iPad连着Code-Server,一边改代码,另一边分屏实时看着网页效果变化,这生产力,是不是瞬间拉满了?!

现在我们已经在本地群晖nas上部署好了code-server,局域网内是可以随便使用的,前面我们说到放假或者出差在外,人不在同一个局域网,怎么实现随时随地敲代码呢?

别担心~我们还有cpolar内网穿透!它能给你的内网服务生成一个公网地址,不需要公网IP不需要复杂的路由器配置,只要简单几步就可以拥有一个专属的、安全的公网域名来访问你的Code-Server!而且,它还支持HTTPS,让你的代码传输更安全!

继续跟我一起往下配置吧!

下面是安装cpolar步骤:

Cpolar官网地址:https://www.cpolar.com

cpolar 提供了群晖安装的套件,点击下面Cpolar群晖套件下载地址,下载相应版本的群晖Cpolar套件,如果找不到对应的型号,可以选择相近版本型号套件。

打开群晖套件中心,点击右上角的手动安装按钮。

选择我们本地下载好的cpolar套件安装包,然后点击下一步

点击同意按钮,然后点击下一步

最后点击完成即可。

安装完成后,在外部浏览器,我们通过群晖的局域网ip地址9200端口访问Cpolar的Web管理界面,然后输入Cpolar邮箱账号与密码进行登录,登录后,一切的操作在管理界面完成.

5 创建Code-Server的公网地址

登录cpolar web UI管理界面后,点击左侧仪表盘的隧道管理——创建隧道:

  • 隧道名称:可自定义,注意不要与已有的隧道名称重复
  • 协议:http
  • 本地地址:28443 (只使用http端口即可)
  • 端口类型:因为我想长期使用所以我选择二级子域名,如果你只是为了测试或者非长期使用也可以选择随机域名,这个是免费的,但是24小时后域名会变化,需要再次复制,大家按照自己需求来选择就行!
  • 地区:选择China top

接着我们来cpolar官网去保留一个二级子域名,这样防止被别人占用。登录cpolar官网,点击预留 选择保留二级子域名

然后复制保留好的子域名回到配置界面

粘贴到域名这里后点击创建

创建成功后,打开左侧在线隧道列表,可以看到刚刚通过创建隧道 生成了两条固定的二级子域名公网地址。

接下来就可以在任意设备随时随地,使用这个地址在浏览器中登录访问。这个地址!就是你的code-server在互联网上的‘新家’!现在,无论你在咖啡馆、在公司,还是在外出时只要有网,打开这个地址,就能随时随地敲代码啦!

结尾

综上,Code-Server 打破了 VS Code 的设备绑定限制,cpolar 则突破了局域网的访问壁垒。二者搭配,为开发者提供了低成本、高灵活度的远程开发方案,无论是个人跨设备工作,还是团队异地协作,都能实现高效顺畅的编码体验。

如果你还在为复杂的内网穿透和端口映射发愁,赶紧注册 cpolar 吧!它不仅免费版功能强大,还有更多高级套餐等你来体验!

以上就是如何在群晖nas上使用Docker快速部署Code-Server,并安装cpolar内网穿透工具配置固定不变的二级子域名公网地址,实现随时随地远程访问的全过程,感谢您的观看,有任何问题欢迎留言交流。cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/1154987.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VisionPro二开之显示OK和NG渲染图

VisionPro二开之显示OK和NG渲染图ICogRecord cogRecord null;double width AlgorithmService.Instance.DetectWidth(info.Image,out cogRecord);public double DetectWidth(ICogImage img,out ICogRecord cogRecord){return vpAlgo.DetectWidth(img, out cogRecord);}public …

【技术干货】必藏!2025年AI智能体元年:从命令执行到协作解决,全面解析AI智能体的核心技术架构

2025年被称为AI智能体元年,AI智能体正将人机交互从命令执行转向协作式问题解决。与普通AI工作流不同,AI智能体具备推理、规划、工具使用和记忆能力,能通过反思、工具使用、规划和多智能体协作模式处理复杂任务。智能体式工作流具有灵活性强、…

走进腾讯|MoonBit Codebuddy AI 编程实践交流会回顾

随着大模型能力持续跃迁,AI 正加速进入生产级软件开发场景,软件工程正站在从“人主导编程”迈向“人机协作开发”的关键节点。1 月 10 日,由 腾讯云 IDEA 研究院 MoonBit 联合举办的 「IDEA研究院MoonBit 走进腾讯|腾讯云 Codeb…

Transformer+UNet:顶会的“发文密码”,思路对了结果真香!

Transformer与UNet的结合已成为图像分割与生成领域的主流架构,虽已广泛应用,但在轻量化设计、跨模态适应、3D与视频扩展、以及可解释性等方面仍具创新潜力。针对数据稀缺、模型效率等实际局限,在具体应用场景中提出改进,仍易于产出…

RDMA设计31:RoCE v2 发送模块3

本博文主要交流设计思路,在本博客已给出相关博文约150篇,希望对初学者有用。注意这里只是抛砖引玉,切莫认为参考这就可以完成商用IP设计。(b)应答状态机 当 RoCE v2 发送模块检测到接收队列非空时,则从接收…

RDMA设计32:RoCE v2 发送模块4

本博文主要交流设计思路,在本博客已给出相关博文约150篇,希望对初学者有用。注意这里只是抛砖引玉,切莫认为参考这就可以完成商用IP设计。(c)异常处理单元 异常处理单元负责处理异常接收队列条目。在 RoCE v2 协议中&a…

以“爆品与放量”视角:美妆工厂做 TikTok 短视频+直播的增长飞轮

TTSOP跨境互联 一站式提供TikTok账号 静态住宅IP,专为带货直播打造爆量通道。开头先问一个更“经营者视角”的问题:美妆工厂做 TikTok,追求的是“拍出一条爆款”,还是“持续跑出可复制的成交”?如果把目标定为后者&am…

手势识别开发指南:MediaPipe Hands高级应用

手势识别开发指南:MediaPipe Hands高级应用 1. 引言:人机交互的新入口——AI手势识别 1.1 技术背景与趋势 随着人工智能和计算机视觉技术的飞速发展,非接触式人机交互正逐步从科幻走向现实。在智能设备、虚拟现实(VR&#xff0…

(最新)2026有哪些免费降ai率工具?这个真能把AI率降下去!

哪个工具降AI率效果最好?2025年降AICG工具专业评估指南!亲测这10个平台,学生党必看!这个真能把AI率降下去!编辑今年AIGC检测这块儿真是翻车重灾区。现在用AI写初稿不是秘密,但问题是,论文的“AI…

中国老年人护理设施可负担性限制可及性数据集

D298 中国老年人护理设施可负担性限制可及性数据集数据简介今天我们分享的数据是中国老年人护理设施可负担性限制可及性数据集,该数据包含可及性的栅格数据,省市县的平均可及性的面板数据,基尼系数的计算结果,全部分享给大家。数据…

SaaS版本上线!InfiniSynapse支持HTML交互式报告,随时随地智能分析~

还在为数据分析发愁?我们带来了好消息 你有没有遇到过这种情况:周五下午,老板突然甩过来一份数据,"帮我分析一下这周的用户增长情况,周一要用"。然后你就开始了漫长的加班——导数据、写SQL、做图表、写报告……等做完…

MediaPipe Hands实战

MediaPipe Hands实战:基于彩虹骨骼可视化的人机交互手势追踪 1. 引言:AI 手势识别与追踪的现实价值 随着人机交互技术的不断演进,手势识别正逐步成为智能设备、虚拟现实(VR)、增强现实(AR)和智…

数字化转型加速器:CI/CD工具如何重塑企业软件开发效率

数字化转型加速器:CI/CD工具如何重塑企业软件开发效率 在数字化转型浪潮席卷全球的当下,持续集成与持续交付(CI/CD)已成为企业软件开发的生命线。根据Gartner最新报告显示,采用CI/CD工具的企业平均部署频率提升至传统模式的46倍,故…

手势识别应用实战:MediaPipe Hands在智能家居场景

手势识别应用实战:MediaPipe Hands在智能家居场景 1. 引言:AI手势识别的现实价值与挑战 随着人机交互方式的不断演进,非接触式控制正成为智能家居系统的重要发展方向。传统语音或触控交互在特定场景下存在局限——例如厨房中双手沾水不便操…

康养休闲旅游实训室建设实施路径

一、康养休闲旅游服务实训室建设方案实施总纲与前期准备任何成功的建设都始于周密的准备。本阶段的核心是统一思想、夯实基础,为“康养休闲旅游服务实训室建设方案”的全面展开锚定方向。首要任务是成立专项工作小组,明确校方、企业、行业专家等多方职责…

效果惊艳!Qwen2.5-0.5B-Instruct打造的网页推理案例展示

效果惊艳!Qwen2.5-0.5B-Instruct打造的网页推理案例展示 在轻量级大模型快速发展的今天,如何在资源受限的设备上实现高效、流畅的语言模型推理,成为越来越多开发者关注的核心问题。尤其是在边缘计算、移动端应用和低成本服务部署场景中&…

收藏!AI产品经理转行大模型指南:从能力评估到落地实践全攻略

作为AI产品经理,你大概率已经熟悉机器学习、深度学习、自然语言处理、计算机视觉等基础AI技术与应用场景。但在大模型成为AI领域核心风口的当下,你是否真正读懂了大模型的核心价值?它的独特优势究竟体现在哪里?为何能引领行业变革…

如何评价灵心巧手在CES 2026上展示的灵巧手技术?它是否意味着具身智能的“最后一厘米”难题正在被攻克?

拉斯维加斯CES 2026的展馆,一如既往地喧嚣🔥然而,当全球目光聚焦于机器人炫酷的“躯体”时,真正的挑战仍藏在最后一厘米——那双“手”。2026年1月7日至9日,在美国拉斯维加斯举办的CES国际消费电子展上,灵心…

Gitee领跑2026年项目管理工具市场:技术驱动下的协作新范式

Gitee领跑2026年项目管理工具市场:技术驱动下的协作新范式 在数字化转型浪潮席卷全球的当下,项目管理工具已成为企业提升效率、优化流程的关键基础设施。2026年的项目管理工具市场呈现出明显的技术驱动特征,其中Gitee作为中国最大的代码托管平…

PLC控制的节能洗衣机系统设计

洗衣机控制系统的硬件设计 3.1衣机的工作原理[11] 洗衣机的工作流程示意图如3-1图所示 图3-1 洗衣机工作流程图 洗衣机的工作流程由开始变频,进水、洗衣、排水和脱水5个过程组成。在半自动洗衣机中, 进水、洗衣、排水和脱水这4个过程分别用相应的按钮开关来控制。全…