如何让IPad Pro变成你的生产力工具?在IPad上用Vscode写代码搞开发

news2024/11/26 19:32:15

文章目录

  • 前言
  • 1. 本地环境配置
  • 2. 内网穿透
    • 2.1 安装cpolar内网穿透(支持一键自动安装脚本)
    • 2.2 创建HTTP隧道
  • 3. 测试远程访问
  • 4. 配置固定二级子域名
    • 4.1 保留二级子域名
    • 4.2 配置二级子域名
  • 5. 测试使用固定二级子域名远程访问
  • 6. ipad pro通过软件远程vscode
    • 6.1 创建TCP隧道
  • 7. ipad pro远程vscode
  • 8. 配置固定TCP端口地址
    • 8.1 保留固定TCP地址
    • 8.2 配置固定TCP端口地址
  • 9. 使用固定TCP地址远程vscode

前言

随着平板电脑的普及,大多数人的生活习惯和生活场景都离不开平板电脑的使用,刷剧,看短视频,玩主流游戏等,但是这些只是娱乐性质的场景,那想实现把平板结合到工作或者生产之中场景中呢,如编辑文档,制作工作表格,编写代码?

所以在入手ipad pro后,为了防止“买前生产力,买后爱奇艺”。我们可以在linux上搭建code server,然后用ipad pro通过浏览器或者或app,来远程访问code server。使用服务器的资源来跑代码,而ipad pro前端上只需要负责撸代码和运行就可以啦,让ipad pro完美变身移动开发工具!!

并且,为了实现在外随时随地远程移动开发,我们搭配使用了cpolar内网穿透,突破局域网的限制,实现在公网环境下也可以用ipad pro写代码开发!!

1. 本地环境配置

准备一台虚拟机,Ubuntu或者centos都可以,这里以VMware Ubuntu系统为例

2023011601

下载code server服务

在浏览器访问:https://github.com/coder/code-server,复制下载命令

2023011602

打开ubuntu命令行执行

curl -fsSL https://code-server.dev/install.sh | sh

2023011603

出现需要输入ubuntu的登录账户密码,输入密码即可,然后等待安装完成

2023011604

以下信息表示安装成功

2023011605

接着输入以下命令设置code-server的登录密码

export PASSWORD=”000000”

20230116112814

查看IP地址,作局域网访问使用

ifconfig

2023011607

设置好密码后启动code-server服务,输入以下命令:

code-server --host= “0.0.0.0”

出现地址和端口号信息表示成功

2023011608

接着打开浏览器通过局域网访问http://192.168.30.128:8080/,出现welcone code-server表示成功,输入我们设置的密码,登录即可。

2023011609

2. 内网穿透

接着我们使用cpolar穿透本地code-server服务,使得远程可以进行访问,随时随地写代码。cpolar支持http/https/tcp协议,不限制流量,操作简单,无需公网IP,也无需路由器。

cpolar官网:https://www.cpolar.com/

2.1 安装cpolar内网穿透(支持一键自动安装脚本)

  • cpolar 安装(国内使用)
curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash
  • 或 cpolar短链接安装方式:(国外使用)
curl -sL https://git.io/cpolar | sudo bash
  • 查看版本号
cpolar version
  • token认证

登录cpolar官网后台,点击左侧的验证,查看自己的认证token,之后将token贴在命令行里

cpolar authtoken xxxxxxx

20230116114805

  • 简单穿透测试
cpolar http 8080

按ctrl+c退出

  • 向系统添加服务
sudo systemctl enable cpolar
  • 启动cpolar服务
sudo systemctl start cpolar
  • 查看服务状态
sudo systemctl status cpolar

20230116114923

正常显示为active则表示服务为正常在线启动状态

2.2 创建HTTP隧道

在ubuntu系统本地安装cpolar内网穿透之后,在ubuntu浏览器上访问本地9200端口,打开cpolar web ui界面:http://127.0.0.1:9200。

点击左侧仪表盘的隧道管理——创建隧道,由于code-server中配置的是8080端口,因此我们要来创建一条http隧道,指向8080端口:

  • 隧道名称:可自定义,注意不要重复
  • 协议:http协议
  • 本地地址:8080
  • 域名类型:选择随机域名
  • 地区:选择China VIP

点击创建

2023011610

创建好后,点击左侧的状态——在线隧道列表,查看公网地址,将其复制下来

2023011611

3. 测试远程访问

打开ipad pro浏览器,输入刚刚复制的公网地址访问即可,访问后输入前面设置的密码,出现vscode界面表示成功

2023011612

4. 配置固定二级子域名

4.1 保留二级子域名

由于以上使用cpolar所创建的隧道使用的是随机临时公网地址,该地址在24小时内会发生变化,不利于长期远程访问。因此我们可以为其配置二级子域名,该地址为固定地址,不会随机变化【ps:cpolar.cn已备案】

需要注意,配置固定二级子域名需要将cpolar升级到基础套餐或以上。

登录cpolar官网,点击左侧的预留,选择保留二级子域名,设置一个二级子域名名称,点击保留,保留成功后复制保留的二级子域名名称

  • 地区:选择China vip
  • 二级域名:可自定义填写
  • 描述:即备注,可自定义填写

2023011613·

4.2 配置二级子域名

访问本地9200端口,打开cpolar web ui 界面,点击左侧的隧道管理——隧道列表,找到vscode隧道,点击右侧的编辑

2023011614

修改下隧道信息:

  • 域名类型改为选择二级子域名
  • subdomain:填写刚刚保留成功的二级子域名

点击更新

2023011615

隧道更新成功之后,点击左侧的状态——在线隧道列表,查看公网地址,此时可以看到地址变成了二级域名,将其复制下来

2023011616

5. 测试使用固定二级子域名远程访问

接着我们再次打开ipad pro浏览器,访问刚刚配置成功的固定二级子域名地址,出现vscode界面表示成功,就可以愉快的写代码啦.

2023011617

6. ipad pro通过软件远程vscode

接下来我们通过servediter for code-server软件来实现ipad pro远程访问vscode

6.1 创建TCP隧道

首先需要创建一条TCP隧道,指向我们服务器的22端口,servediter for code-server这个软件需要连接服务器,在ubuntu上打开浏览器访问本地9200端口,登录cpolar web ui界面,点击左侧的隧道管理——创建隧道

  • 隧道名称:可自定义,注意不要重复
  • 协议:tcp协议
  • 本地地址:22
  • 域名类型:选择随机临时TCP端口
  • 地区:选择China VIP

点击创建

2023011618

隧道创建成功之后,点击左侧的状态——在线隧道列表,将所生成的公网地址复制下来。

2023011622

7. ipad pro远程vscode

在ipad pro上,点击打开appstore,下载软件servediter for code-server

2023011619

下载成功后点击打开,由于该软件是付费的,可以自由选择购买,这里选择免费试用,选择最后一个free

2023011620

输入相关信息

参数介绍:

  • code-server URL:填写前面配置成功的http公网地址【ipad pro浏览器访问的那个地址】
  • Instance password:code-server配置的密码
  • Host:这里填写我们前面创建成功的22隧道的公网地址
  • Username: 这个填写ubuntu系统的用户名
  • Port: 这里默认即可无需修改
  • Authentication: 这个填写ubuntu系统用户名对应的密码

2023011621

输入完信息后点击右上角save后就会自动连接,出现vscode界面表示连接成功啦

2023011623

8. 配置固定TCP端口地址

由于前面我们创建的ssh 22端口的隧道选择的是随机临时地址,该地址会在24小时内变化,为了使我们ipad pro里面使用vscode连接更加通畅,我们需要固定ssh 的公网地址。

注意需要将cpolar套餐升级至专业套餐或以上。

8.1 保留固定TCP地址

登录cpolar官网后台,点击左侧的预留,找到保留的TCP地址:

  • 地区:选择China VIP
  • 描述:即备注,可自定义填写

点击保留

2023011624

固定TCP地址保留成功,系统生成相应的公网地址+固定端口号,将其复制下来

2023011625

8.2 配置固定TCP端口地址

浏览器访问http://127.0.0.1:9200/登录cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到codeserver隧道,点击右侧的编辑

2023011626

修改隧道信息,配置固定TCP端口地址:

  • 端口类型:改为选择固定TCP端口
  • 预留的TCP地址:填写刚刚保留成功的固定TCP端口地址

点击更新

2023011627

提示更新隧道成功,点击左侧仪表盘的状态——在线隧道列表,可以看到刚刚修改的隧道的公网地址已经更新为固定TCP端口地址,将其复制下来。

2023011628

9. 使用固定TCP地址远程vscode

在ipad pro上,打开servediter for code-server软件,修改host的参数,将其修改为我们刚刚配置成功的固定TCP端口地址。

点击左上角i标志

2023011629

选择self Host Server

2023011630

把Host值改为我们刚刚官网保留的tcp地址

2023011631

更改完后点击右上角save,点击完后会自动连接,出现vscde界面表示成功了,至此,教程就结束了,使用ipad pro开启愉快的编程吧!该公网地址不会再随机变化了。

2023011632

转载自cpolar极点云文章:[如何让ipad pro变成你的生产力工具?在ipad pro上用Vscode写代码搞开发](https://www.cpolar.com/blog/write-code-on-the-ipad pro)

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

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

相关文章

如何用芯片ate测试设备测试芯片过压保护和过流保护?

过压保护和过流保护是指被保护的产品或电路在电压/电流超过正常运行的最大值时,使输入断开或内部电压/电流降低的一种保护方式。过压保护和过流保护是为了防止电路中电压/电流过大从而损坏产品,因此过压/过流保护电压值和电流值也是电子测试中不可或缺的…

树莓派(Linux系统通用)交叉编译(环境搭建、简单使用)

概念 交叉编译是指在一台计算机上编译运行在另一台计算机上的程序。(编译是指,在一个平台上生成在该平台上的可执行程序)通常情况下,编译器和目标平台的架构是不同的,例如,在一台x86平台上编译运行在ARM平…

Go 语言史诗级更新-循环Bug修复

背景 前两天 Golang 的官方博客更新了一篇文章:Fixing For Loops in Go 1.22 看这个标题的就是修复了 Go 循环的 bug,这真的是史诗级的更新;我身边接触到的大部分 Go 开发者都犯过这样的错误,包括我自己,所以前两年我也…

SOLIDWORKS 专业显卡要求

每次谈及SOLIDWORKS对于显卡的需求,都有讲不完的话题,往往纠结于到底选择游戏卡还是专业图形卡?首先需要明确,不仅仅是SOLIDWORKS软件, 几乎所有的图形类软件都推荐使用专业图形卡。 今天微辰三维特别整理一下SOLIDWORKS不同项目对…

实体行业数字化转型怎么做?线上线下相结合的新零售体系怎么做?

如今,实体行业想要取得收入增长,只做线下业务或者只做线上业务,在当前的市场环境中是难以长久生存的,因此一定要线上线下相结合,将流量运作与线下转化进行充分结合,才能更好地发挥实体优势,带来…

气球派对服务小程序商城的效果是什么

气球派对包含多种场景,除了线下服务如生日布置、浪漫小礼、婚礼布置、周岁礼等,还有相关产品销售属性;同时这些服务具备较高的同城场景和定制化需求,在实际生活中,这些服务的需求度较高,但同样需要商家不断…

防止员工拷贝公司终端电脑文件数据(如何防止企业数据文件被任意拷贝?)

在当前的信息时代,数据被誉为“新型石油”,而公司内部的文件往往是企业核心数据和竞争优势的重要载体。然而,近年来,员工私自拷贝公司内部文件的事件屡见不鲜,这不仅威胁到企业的信息安全,也可能导致公司的…

探索ClickHouse——使用Projection加速查询

在测试Projection之前,我们需要先创建一张表,并导入大量数据。 我们可以直接使用指令,从URL指向的文件中获取内容并导入表。但是担心网络不稳定,我们先将文件下载下来。 下载文件 wget wget http://prod.publicdata.landregistr…

OpenHarmony应用模型的构成要素与Stage优势

一、应用模型的构成要素 应用模型是OpenHarmony为开发者提供的应用程序所需能力的抽象提炼,它提供了应用程序必备的组件和运行机制。有了应用模型,开发者可以基于一套统一的模型进行应用开发,使应用开发更简单、高效。 二、Stage主推模型优势…

多输入多输出 | MATLAB实现PSO-LSSVM粒子群优化最小二乘支持向量机多输入多输出

多输入多输出 | MATLAB实现PSO-LSSVM粒子群优化最小二乘支持向量机多输入多输出 目录 多输入多输出 | MATLAB实现PSO-LSSVM粒子群优化最小二乘支持向量机多输入多输出预测效果基本介绍程序设计往期精彩参考资料 预测效果 基本介绍 MATLAB实现PSO-LSSVM粒子群优化最小二乘支持向…

layuiselect设置为不可下拉选取

$("#exam").siblings(".layui-form-select").find("dl").remove(); 或 layuiSelectDisable($("#exam")); // 设置selet元素不可下拉选择function layuiSelectDisable(selectElem) {try {var dlElem selectElem.siblings(".layu…

华为云云耀云服务器L实例评测|云耀云服务器L实例部署Gitblit服务器

华为云云耀云服务器L实例评测|云耀云服务器L实例部署Gitblit服务器 一、云耀云服务器L实例介绍1.1 云耀云服务器L实例简介1.2 云耀云服务器L实例特点 二、Gitblit介绍2.1 Gitblit简介2.2 Gitblit特点 三、本次实践介绍3.1 本次实践简介3.2 本次环境规划 四、检查服务…

HarmonyOS CPU与I/O密集型任务开发指导

一、CPU密集型任务开发指导 CPU密集型任务是指需要占用系统资源处理大量计算能力的任务,需要长时间运行,这段时间会阻塞线程其它事件的处理,不适宜放在主线程进行。例如图像处理、视频编码、数据分析等。 基于多线程并发机制处理CPU密集型任务…

【北亚企安数据恢复】Ceph存储介绍Ceph数据恢复流程

Ceph存储基本架构: Ceph存储可分为块存储,对象存储和文件存储。Ceph基于对象存储,对外提供三种存储接口,故称为统一存储。 Ceph的底层是RADOS(分布式对象存储系统),RADOS由两部分组成:OSD和MON。 MON负责监…

vue项目开发环境工具-node

最近在开始接触做vue框架的前端项目,以前用的前端比如html,js,css等都是比较原生的,写好后直接浏览器打开就行。但vue跟java一样是需要编译的,和微信小程序类似。今天就先记录一下vue的开发运行搭建。所需工具如下 nod…

从小白到大咖:软件测试工作半年心得分享!总结我掉的4个坑…

从事软件测试工作已经半年多了,刚入职的时候还是一个缺乏实际经验的小白,而现在拿到需求之后也能比较快速地熟悉业务并顺利开展测试,虽然不能说掌握了很多技能,但是相比之前也是有不少收获的,在这个过程中我总结了一点…

spring-cloud-alibaba-dubbo-issues1805修复

spring-cloud-alibaba-dubbo-issues1805修复 文章目录 [toc] 1.官方信息2.版本代码对比3.修改尝试4.验证5.总结 这个issue就是我这前写了那两篇文章的那个issue Dubbo重启服务提供者或先启动服务消费者后启动服务提供者,消费者有时候会出现找不到服务的问题及解决 …

2023年第二届HiPChips解读

The 2nd International Workshop on High Performance Chiplet and Interconnnect Architectures (HiPChips) 主题 Optical and other advanced chiplet interconnect technologiesInterconnect standards of coherent and non-coherent data sharing protocols (e.g. CXL)D…

美妆护肤品经营小程序商城的作用是什么

美妆护肤品市场非常庞大,属于长期消耗品,对厂家或经营者来说,本质上市场并不缺购买的人,但由于品牌/同行众多,加之消费升级客户线上购物消费,因此传统线下商家发展困难。 但通过线上经营又受制于第三方平台…

9.25 day 2

1. 简述方法重写与方法重载的意义与区别: 方法重写: 1.参数列表必须完全与被重写方法相同 //参数列表(分为四种): (1)无参无返回值方法; (2)有参无返回…