随时随地编码:香橙派Zero3上安装Code Server远程开发指南

文章目录

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

前言

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

之前和大家分享了如何在香橙派Zero3刷入支持Docker的CasaOS轻NAS系统,并部署Talebook电子书库远程在线看书。像这种一直处于给电联网状态的小主机很适合部署一些日常高频使用的服务,用来看小说,听音乐,看视频,备份照片等等。不过除了娱乐外,我们也可以在它上边安装Code server实现工作生产力场景中的应用。

Code Server 是一款强大的开源工具,它将 Visual Studio Code (VS Code) 带入了基于Web的在线环境。它使您可以通过Web浏览器远程访问和使用VS Code的功能,而无需在本地安装VS Code应用程序。而它又是一款轻量级的应用程序,资源占用较少,因此在这种资源有限的小主机服务器上运行也很高效。

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

image-20241017120047298

1. 添加镜像源

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

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

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

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

fc4cd94f4cc0ce7c2b2cf581ea88f37

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

nano /etc/docker/daemon.json

image-20241012154915187

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

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

image-20241012155042798

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

systemctl restart docker

image-20241012155119804

2. 部署Code server

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

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

image-20240527181150797

1716533860914

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

image-20240524145917203

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

1716534084277

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

image-20240524150508486

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

image-20241017113502784

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

image-20241017113554668

image-20241017113638620

3. 安装内网穿透工具

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

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

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

image-20240528113537036

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

image-20240528113647981

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

curl -fsSL https://get.cpolar.sh | sudo sh

image-20241012164501257

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

image-20241017114210956

4. 配置公网地址

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

image-20241017114352580

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

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

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

协议:http

本地地址:8443

域名类型:随机域名

地区:选择China Top

点击创建

image-20241017114556237

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

image-20241017114705282

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

image-20241017114900115

小结

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

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

5. 配置固定公网地址

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

image-20241017115143930

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

image-20241017115302974

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

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

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

image-20241017115349591

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

image-20241017115523213

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

image-20241017115636574

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

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

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

相关文章

npm list @types/node 命令用于列出当前项目中 @types/node 包及其依赖关系

文章目录 作用示例常用选项示例命令注意事项 1、实战举例**解决方法**1. **锁定唯一的 types/node 版本**2. **清理依赖并重新安装**3. **设置 tsconfig.json 的 types**4. **验证 Promise 类型支持** **总结** npm list types/node 命令用于列出当前项目中 types/node 包及其…

第一个 Flutter 项目(1)共46节

前端开发工具vs code,安装Flutter sdk,如果你的下载速度比较慢,可以选择这个😄 flutter sdk 解压码:stwq 配置可以看这Flutter 新建工程一直等待 解决办法-CSDN博客 如果你是新的 Flutter 开发者,我们建…

比ChatGPT更酷的AI工具

相较于寻找比ChatGPT更酷的AI工具,这听起来似乎是个挑战,因为ChatGPT已经以它强大的综合性能在AI界大名鼎鼎。然而,每个工具都有其独特的优势,特别是在特定的应用场景下,其他AI工具可能会展现出与ChatGPT不同的魅力。接…

【自用】0-1背包问题与完全背包问题的Java实现

引言 背包问题是计算机科学领域的一个经典优化问题,分为多种类型,其中最常见的是0-1背包问题和完全背包问题。这两种问题的核心在于如何在有限的空间内最大化收益,但它们之间存在一些关键的区别:0-1背包问题允许每个物品只能选择…

今日 AI 简报 | 开源 RAG 文本分块库、AI代理自动化软件开发框架、多模态统一生成框架、在线图像背景移除等

❤️ 如果你也关注大模型与 AI 的发展现状,且对大模型应用开发非常感兴趣,我会快速跟你分享最新的感兴趣的 AI 应用和热点信息,也会不定期分享自己的想法和开源实例,欢迎关注我哦! 🥦 微信公众号&#xff…

UniApp 应用、页面与组件的生命周期详解

UniApp 应用、页面与组件的生命周期详解 在uni-app中包含了 应用生命周期、页面生命周期、和组件生命周期&#xff08; Vue.js的&#xff09;函数。 应用生命周期 应用生命周期仅可在App.vue中监听&#xff0c;在其它页面监听无效。 <script>export default {onLaunc…

1111111111待修改--大流量分析(三)-BUUCTF

总结摘要 题目来来源URL https://buuoj.cn/challenges#%E5%A4%A7%E6%B5%81%E9%87%8F%E5%88%86%E6%9E%90%EF%BC%88%E4%B8%89%EF%BC%89 答题过程 这道题是看大佬写着说查找phpinfo&#xff0c;我现在也不知道为什么能够一下子就定位到这里了 这里先按照phpinfo进行&#xff…

PHP多门店医疗服务系统小程序源码

&#x1f3e5; 多门店医疗服务系统&#xff1a;打造全方位健康守护网络 &#x1f3e5; &#x1f3f7;️ 引言&#xff1a;为何需要多门店医疗服务系统&#xff1f; 在这个快节奏的时代&#xff0c;健康成为了我们最宝贵的财富。然而&#xff0c;面对突如其来的疾病或日常的健…

Jetpack 之 Ink API初探

前言 近期看到谷歌官方推文有一篇关于Jetpack Ink API的文章&#xff0c;随即进行了了解和研究&#xff0c;该SDK主要就是低延时的手写绘制&#xff0c;比如通过手指或者触控笔在安卓设备上面进行笔记记录或者在安卓设备上面进行素描之类类似于纸张上面的操作。当然了可能现在…

SpringBoot参数注解

SpringBoot参数注解 常用参数注解 RequestParmPathVariableRequestHeaderCookieValueRequestbody 1.请求参数注解&#xff1a;RequestParm 用途&#xff1a;用于将方法参数绑定到URI查询参数或者表单参数。他可以帮助我们或者HTTP请求中的参数值并将其作为方法的参数进行处…

HarmonyOS的@State装饰器的底层实现

HarmonyOS的State装饰器的底层实现 序言准备工作实现State装饰器 序言 ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript&#xff08;简称TS&#xff09;基本语法风格的基础上&#xff0c;进一步通过规范强化静态检查和分析&#xff0c;使得在程序运行之前的开发期能检测更…

C语言 | Leetcode C语言题解之第557题反转字符串中的单词III

题目&#xff1a; 题解&#xff1a; char* reverseWords(char* s) {int length strlen(s);char* ret (char*)malloc(sizeof(char) * (length 1));ret[length] 0;int i 0;while (i < length) {int start i;while (i < length && s[i] ! ) {i;}for (int p …

响应式网页设计--html

一&#xff0c;HTML 文档的基本结构 一个典型的 HTML 文档包含了几个主要部分&#xff0c;基本结构如下(本文以下出现的所有代码都可以套入下面示例进行测试)&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8&q…

Linux git-bash配置

参考资料 命令提示符Windows下的Git Bash配置&#xff0c;提升你的终端操作体验WindowsTerminal添加git-bash 目录 一. git-bash配置1.1 解决中文乱码1.2 修改命令提示符 二. WindowsTerminal配置git-bash2.1 添加git-bash到WindowsTerminal2.2 解决删除时窗口闪烁问题 三. VS…

【HarmonyOS NEXT】一次开发多端部署(以轮播图、Tab栏、列表为例,配合栅格布局与媒体查询,进行 UI 的一多开发)

关键词&#xff1a;一多、响应式、媒体查询、栅格布局、断点、UI 随着设备形态的逐渐增多&#xff0c;应用界面适配也面临着很大问题&#xff0c;在以往的安卓应用开发过程中&#xff0c;往往需要重新开发一套适用于大屏展示的应用&#xff0c;耗时又耗力&#xff0c;而鸿蒙提供…

向日葵软件Windows系统连接苹果系统(MacOS)的无反应问题解决办法

前言 向日葵软件最近开始收费了的&#xff0c;打算收割我们。这也是没有办法的事情&#xff0c;毕竟他们的程序员也是需要吃饭的&#xff0c;我也表示理解。 所以&#xff0c;我在连接了几次发现反应很迟钝后&#xff0c;果断的买了158元的包年会员。 但是&#xff0c;在买了会…

neo4j desktop基本入门

下载安装不在赘述&#xff0c;本文只记述一些neo4j的基本入门操作 连接本地neo4j数据库 1. 点击ADD添加连接 端口一般是7687 账户名和密码忘记了&#xff0c;可以通过neo4j web&#xff08;默认为neo4jneo4j://localhost:7687/neo4j - Neo4j Browser&#xff09;重置密码 AL…

编写红绿起爆线指标(附带源码下载)

编写需求&#xff1a; 想问问有没有能标注行情起爆点的指标。 效果展示&#xff1a; 红线上&#xff0c;出现绿柱转红柱做多。 蓝线下&#xff0c;出现红柱转绿柱做空。 源码展示&#xff08;部分源码&#xff0c;完整源码需下载源码文件&#xff09;&#xff1a; IsMainIn…

ubuntu20.04 解决Pytorch默认安装CPU版本的问题

ubuntu20.04 解决Pytorch默认安装CPU版本的问题 在使用Anaconda安装支持CUDA的PyTorch版本时&#xff0c;遇到只能安装CPU版本的PyTorch是一个常见问题。这通常由于Anaconda环境配置、镜像源设置不当或版本匹配问题导致。以下是详尽的解决方案和步骤&#xff0c;以确保能够正确…

C++《继承》

在之前学习学习C类和对象时我们就初步了解到了C当中有三大特性&#xff0c;分别是封装、继承、多态&#xff0c;通过之前的学习我们已经了解了C的封装特性&#xff0c;那么接下来我们将继续学习另外的两大特性&#xff0c;在此将分为两个章节来分别讲解继承和多态。本篇就先来学…