告别设备限制!CodeServer+cpolar让VS Code随时随地在线编程

文章目录

    • 前言
    • [1. 添加镜像源](#1. 添加镜像源)
    • [2. 部署Code server](#2. 部署Code server)
    • [3. 安装内网穿透工具](#3. 安装内网穿透工具)
    • [4. 配置公网地址](#4. 配置公网地址)
    • [5. 配置固定公网地址](#5. 配置固定公网地址)

前言

CodeServer将开发者熟悉的VS Code体验完整迁移至浏览器环境,支持语法高亮、代码调试、Git集成等核心功能。对于全栈开发者和多设备用户而言,这种"一次部署,处处访问"的模式可彻底终结重复配置编辑器的烦恼------无论是Windows笔记本、MacBook还是Android平板,打开浏览器即可进入一致的开发环境。

实际使用建议:启动容器时添加-v参数挂载本地项目目录(如-v /home/code:/home/coder/project);通过--auth password参数设置访问密码,避免未授权访问。某前端团队反馈,配置持久化存储后,插件和设置的同步成功率提升至100%。

传统本地开发受限于物理设备,跨场景工作需频繁commit/push代码。例如,公司电脑上未完成的功能,回家后需重新拉取分支才能继续开发,打断思路连贯性。

而cpolar的HTTP穿透技术完美适配CodeServer的云端特性!通过8443端口映射生成的公网地址(如https://code.cpolar.cn),4G网络环境下延迟控制在300ms以内。某独立开发者分享:曾在高铁上用手机热点调试Python脚本,代码实时保存至本地NAS,到站即完成功能提交。

本文主要介绍如何在刷了CasaOS轻NAS系统的香橙派Orange Pi Zero3中,使用Docker本地部署Code server,并结合cpolar内网穿透实现远程使用浏览器访问开发环境,在不同设备和操作系统上一致地编写、编辑和运行代码。无需公网IP,也不用设置路由器那么麻烦。

在香橙派Zero3本地部署Code server非常简单,下面就来介绍一下具体如何操作。

1. 添加镜像源

我这里演示的环境是已经刷好CasaOS的香橙派Zero3小主机。

不知道如何操作的可以看下这篇教程:香橙派Orange Pi zero3如何刷CasaOS轻NAS系统

首先,我们需要在浏览器中输入香橙派ip地址,进入CasaOS管理界面。

然后进入终端,使用root账号密码登录。

进入终端后执行下方命令:

shell 复制代码
nano /etc/docker/daemon.json

在编辑器中输入新的镜像源地址:

json 复制代码
{
"registry-mirrors": [
 "https://docker.m.daocloud.io",
 "https://docker.1panel.live"
]
}

然后按Crtl+X键保存这个镜像源,退出编辑器回到终端后执行下方命令重新启动docker服务:

shell 复制代码
systemctl restart docker

2. 部署Code server

上边的操作完成之后,我们回到casaos主界面点击系统自带的App Store应用中心。

可能刚刷机后的同学会说这里边的应用太少了,其实官方是给出了手动添加更多应用的方法的,只要点击目前APP下拉框中的更多应用。

然后点击问号,会自动在浏览器中打开一个添加更多应用的页面:

复制这个页面中的这些地址,然后回到CasaOS应用中心界面。

将地址粘贴到刚才带有问号的输入框中,然后点击添加,系统就会自动更新更多应用到应用中心界面,可以从几十个增加到几百个。

可以看到,现在就能在应用商店中看到code server了,点击安装即可自动进行部署:

部署完成后,点击打开,即可在浏览器中访问code server的web操作界面:

3. 安装内网穿透工具

此时,我们已经成功在本地的CasaOS香橙派主机中部署了code server,但仅能在本地局域网中使用,如果想在出差时也能远程使用家中code server来写写代码应该怎么办呢?

很简单,只要在香橙派中安装一个cpolar内网穿透工具就能轻松实现远程访问内网主机中部署的服务了,接下来介绍一下如何安装cpolar内网穿透。

首先,点击左上角进入终端:

然后输入root账号密码登录:

然后在终端中执行下方命令,安装cpolar内网穿透工具:

shell 复制代码
curl -fsSL https://get.cpolar.sh | sudo sh

如下图所示即为cpolar内网穿透服务正在正常运行。

4. 配置公网地址

然后我们使用CasaOS香橙派的IP地址加上9200,打开一个新的浏览器来登录cpolar管理界面 :

如果没有账号可以点击免费注册访问cpolar官网注册账号:https://www.cpolar.com

输入账号密码登录cpolar web UI管理界面后,点击左侧仪表盘的隧道管理------创建隧道:

隧道名称:可自定义,注意不要与已有的隧道名称重复,本例使用了:mycodes

协议:http

本地地址:8443

域名类型:随机域名

地区:选择China Top

点击创建

隧道创建成功后,点击左侧的状态------在线隧道列表,查看所生成的公网访问地址,有两种访问方式,一种是http 和 https,任选其一到浏览器访问即可。

现在我们就可以使用手机、平板等设备在浏览器地址栏输入cpolar生成的公网地址,能看到成功远程访问本地casaos香橙派中部署的code server的Web管理界面啦!

小结

为了方便演示,我们在上边的操作过程中使用cpolar生成的公网地址是随机生成的。这种随机地址的优势在于建立速度快,可以立即使用。然而,它的缺点是网址是随机生成,不好记,而且这个地址在24小时内会发生随机变化,更适合于临时测试使用。

如果有长期远程访问本地casaos香橙派中的code server随时撸代码,或者远程访问其他本地服务的需求,又不想每天重新配置公网地址,还想地址好看又好记,那我推荐大家选择配置固定的公网地址来远程访问。

5. 配置固定公网地址

登录cpolar官网,点击左侧的预留,选择保留二级子域名,地区选择China VIP,设置一个二级子域名名称,点击保留,保留成功后复制保留的二级子域名名称,这里我填写的是 mycodes1 ,大家也可以自定义喜欢的名称。

保留成功后复制保留成功的二级子域名的名称: mycodes1 ,返回登录Cpolar web UI管理界面,点击左侧仪表盘的隧道管理------隧道列表,找到所要配置的隧道 mycodes,点击右侧的编辑:

修改隧道信息,将保留成功的二级子域名配置到隧道中

  • 域名类型:选择二级子域名
  • Sub Domain:填写保留成功的二级子域名:mycodes1
  • 地区:选择China VIP

点击更新(注意,点击一次更新即可,不需要重复提交)

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,由随机地址名称变成了两个固定的二级子域名(固定公网地址):

最后,我们使用任意一个固定公网地址在浏览器访问,可以看到访问成功,这样一个固定且永久不变的公网地址就设置好了,随时随地都可以远程访问本地局域网内的casaos香橙派主机端中code server来在线写代码了!

以上就是如何在CasaOS轻NAS系统香橙派zero3中部署code server,并安装cpolar内网穿透工具配置固定不变的二级子域名公网地址,实现随时随地远程开发写代码全部流程,感谢您的观看,有任何问题欢迎留言交流。

结尾: 当CodeServer的编辑器能力遇上cpolar的穿透技术,开发环境终于突破了硬件束缚。这种组合不仅是工具的革新,更预示着"浏览器即IDE"的未来趋势------毕竟最好的开发环境,应该是你手边的任何设备。

相关推荐
一只大侠的侠2 小时前
React Native开源鸿蒙跨平台训练营 Day16自定义 useForm 高性能验证
flutter·开源·harmonyos
IvorySQL3 小时前
PostgreSQL 分区表的 ALTER TABLE 语句执行机制解析
数据库·postgresql·开源
一只大侠的侠3 小时前
Flutter开源鸿蒙跨平台训练营 Day11从零开发商品详情页面
flutter·开源·harmonyos
一只大侠的侠3 小时前
React Native开源鸿蒙跨平台训练营 Day18自定义useForm表单管理实战实现
flutter·开源·harmonyos
一只大侠的侠3 小时前
React Native开源鸿蒙跨平台训练营 Day20自定义 useValidator 实现高性能表单验证
flutter·开源·harmonyos
晚霞的不甘4 小时前
Flutter for OpenHarmony 可视化教学:A* 寻路算法的交互式演示
人工智能·算法·flutter·架构·开源·音视频
晚霞的不甘5 小时前
Flutter for OpenHarmony 实现计算几何:Graham Scan 凸包算法的可视化演示
人工智能·算法·flutter·架构·开源·音视频
猫头虎5 小时前
OpenClaw-VSCode:在 VS Code 里玩转 OpenClaw,远程管理+SSH 双剑合璧
ide·vscode·开源·ssh·github·aigc·ai编程
一只大侠的侠5 小时前
Flutter开源鸿蒙跨平台训练营 Day12从零开发通用型登录页面
flutter·开源·harmonyos
wenzhangli75 小时前
OoderAgent 企业版 2.0 发布的意义:一次生态战略的全面升级
人工智能·开源