前言
嘿,各位小伙伴们,是不是经常遇到这样的情况?
- 你的笔记本电脑配置不够,一跑大型项目,风扇就狂转,卡得你怀疑人生?
- 想在公司写代码,回家也想接着写,结果发现开发环境又得重新配一遍,或者文件同步麻烦得要死?
- 出差在外,或者躺在沙发上,突然有个灵感想改几行代码,但手边只有一台iPad或者一台性能不咋地的旧电脑,根本跑不动IDE?
- 在远程服务器上开发,每次都得SSH进去,然后用Vim或者Nano这种“古老”的编辑器,效率低下,体验感极差?
如果以上任何一点戳中了你,那么恭喜你,今天你算是找对地方了!我要给大家安利一个真正的“生产力工具”——Code-Server!它能把你的VS Code直接搬到云端,让你通过浏览器就能享受到完整的VS Code开发体验,简直是远程开发、轻量化办公的“神助攻”!
1 关于【Code Server】
简单粗暴地说,Code-Server就是把大名鼎鼎的VS Code(Visual Studio Code,微软出品的宇宙第一编辑器,没有之一!)直接搬到了你的服务器上,然后通过浏览器访问!
你没听错!这意味着:
- VS Code体验不变: 你熟悉的界面、快捷键、插件、终端,一切都原汁原味地呈现在你的浏览器里。
- 服务器算力加持: 你的代码运行在强大的服务器上,本地电脑再也不用担心性能瓶颈,告别卡顿、风扇狂转的烦恼!
- 随时随地,任何设备: 只要有浏览器和网络,无论是你的MacBook、Windows PC、Linux本,甚至是iPad、安卓平板,甚至是性能一般的旧电脑,都能瞬间变成强大的开发工作站!
- 开发环境一致: 你的开发环境统一在服务器上,再也不用担心“在我电脑上能跑,在你电脑上就报错”的尴尬了。
- 告别SSH+Vim的痛苦: 直接在服务器上用VS Code编辑代码,调试、版本控制、文件管理,一切都变得可视化、高效化。
是不是听着就觉得“香”?这简直就是为我们这些追求效率、又不想被硬件束缚的开发者量身定制的!
2 群晖nas部署安装【Code Server】
好了,废话少说,直接上手!我们今天就用群晖NAS来部署Code-Server。跟着我一步步走,保证你轻松搞定!
首先我们确认已经安装了docker,也就是container Manager
然后打开文件夹,在docker文件夹里面点击新增,我们来创建一个名为code-server的文件夹。
接着点击控制面板,点击计划任务,我们来创建任务计划
点击新增,选择触发的任务,点击用户定义的脚本、
任务名称自定义,用户账号选root,下面的已启动不打钩
点击任务设置,在运行命令这里粘贴这行脚本,
docker run -d \
--name=code-server \
-e PUID=1026 \
-e PGID=101 \
-e TZ=Asia/Shanghai \
-e PASSWORD=88888888 \
-p 28443: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 和 cpolar 的组合,无论你在哪里,都可以轻松编码、调试。再也不用担心硬件性能的限制,也不用烦恼开发环境的一致性问题。
如果你还在为复杂的内网穿透和端口映射发愁,赶紧注册 cpolar 吧!它不仅免费版功能强大,还有更多高级套餐等你来体验!
以上就是如何在群晖nas上使用Docker快速部署Code-Server,并安装cpolar内网穿透工具配置固定不变的二级子域名公网地址,实现随时随地远程访问的全过程,感谢您的观看,有任何问题欢迎留言交流。cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站