曹旭辉 发表于 2024-6-10 10:21:22

【Linux】公网环境内网穿透实现应用ipad pro进行代码开发

媒介

随着平板电脑的普及,大多数人的生活风俗和生活场景都离不开平板电脑的使用,刷剧,看短视频,玩主流游戏等,但是这些只是娱乐性子的场景,那想实现把平板结合到工作或者生产之中场景中呢,如编辑文档,制作工作表格,编写代码?
所以在入手ipad pro后,为了防止“买前生产力,买后爱奇艺”。我们可以在linux上搭建code server,然后用ipad通过浏览器或者或app,来远程访问code server。使用服务器的资源来跑代码,而ipad前端上只需要负责撸代码和运行就可以啦,让ipad完美变身移动开发工具!!
而且,为了实现在外随时随地远程移动开发,我们搭配使用了cpolar内网穿透,突破局域网的限定,实现在公网环境下也可以用ipad pro写代码开发!!
1. 本地环境设置

准备一台捏造机,Ubuntu或者centos都可以,这里以VMware Ubuntu系统为例
https://img-blog.csdnimg.cn/img_convert/910a21b375812275b0df1fce08116da8.png#pic_center
下载code server服务
在浏览器访问:https://github.com/coder/code-server,复制下载命令
https://img-blog.csdnimg.cn/img_convert/e9d30f1c3cad2eccf13d2f33784e7dbe.png#pic_center
打开ubuntu命令行实行
curl -fsSL https://code-server.dev/install.sh | sh
https://img-blog.csdnimg.cn/img_convert/1821de59bd41c8475c8f1434ee25343f.png#pic_center
出现需要输入ubuntu的登录账户密码,输入密码即可,然后等待安装完成
https://img-blog.csdnimg.cn/img_convert/13c751a76e215a890554f63acf4f8270.png#pic_center
以下信息表示安装乐成
https://img-blog.csdnimg.cn/img_convert/7fc1f56ed909fb5162ab2b10c13178a1.png#pic_center
接着输入以下命令设置code-server的登录密码
export PASSWORD=”000000”
https://img-blog.csdnimg.cn/img_convert/413ec9037d188eceb8565bb7c2cb2f7d.png#pic_center
查看IP地址,作局域网访问使用
ifconfig
https://img-blog.csdnimg.cn/img_convert/981e7d3893c2bac74a30d79cbf8d866e.png#pic_center
设置好密码后启动code-server服务,输入以下命令:
code-server --host= “0.0.0.0”
出现地址和端口号信息表示乐成
https://img-blog.csdnimg.cn/img_convert/8f715255b99e9c7ede8655bb433df76e.png#pic_center
接着打开浏览器通过局域网访问http://192.168.30.128:8080/,出现welcone code-server表示乐成,输入我们设置的密码,登录即可。
https://img-blog.csdnimg.cn/img_convert/75f64034f9a5a1d1e3d0d1b6810d065c.png#pic_center
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
https://img-blog.csdnimg.cn/img_convert/c9381b811d14368e9ad942f174d1d2e2.png#pic_center


[*]简单穿透测试
cpolar http 8080
按ctrl+c退出


[*]向系统添加服务
sudo systemctl enable cpolar


[*]启动cpolar服务
sudo systemctl start cpolar


[*]查看服务状态
sudo systemctl status cpolar
https://img-blog.csdnimg.cn/img_convert/634a382e4dfce3a1209e59e97390e9d7.png#pic_center
正常显示为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
点击创建
https://img-blog.csdnimg.cn/img_convert/63f08de57c77fcb56a802ef87c864310.png#pic_center
创建好后,点击左侧的状态——在线隧道列表,查看公网地址,将其复制下来
https://img-blog.csdnimg.cn/img_convert/69bd56141abeb1adc31f485e680cf0ee.png#pic_center
3. 测试远程访问

打开ipad浏览器,输入刚刚复制的公网地址访问即可,访问后输入前面设置的密码,出现vscode界面表示乐成
https://img-blog.csdnimg.cn/img_convert/74782ab80c4fb5acf46dcf61483dfe55.png#pic_center
4. 设置固定二级子域名

4.1 保存二级子域名

由于以上使用cpolar所创建的隧道使用的是随机临时公网地址,该地址在24小时内会发生变化,倒霉于恒长远程访问。因此我们可以为其设置二级子域名,该地址为固定地址,不会随机变化【ps:cpolar.cn已备案】
   需要留意,设置固定二级子域名需要将cpolar升级到基础套餐或以上。
登录cpolar官网,点击左侧的预留,选择保存二级子域名,设置一个二级子域名名称,点击保存,保存乐成后复制保存的二级子域名名称


[*]地区:选择China vip
[*]二级域名:可自界说填写
[*]描述:即备注,可自界说填写
https://img-blog.csdnimg.cn/img_convert/0c43d5d031569bc5be79b95f61ebc4da.png#pic_center
4.2 设置二级子域名

访问本地9200端口,打开cpolar web ui 界面,点击左侧的隧道管理——隧道列表,找到vscode隧道,点击右侧的编辑
https://img-blog.csdnimg.cn/img_convert/eaa888ee303cc4854ac9945a3914f2cd.png#pic_center
修改下隧道信息:


[*]域名范例改为选择二级子域名
[*]subdomain:填写刚刚保存乐成的二级子域名
点击更新
https://img-blog.csdnimg.cn/img_convert/1acd06e287b2413eecd82a33df5d19db.png#pic_center
隧道更新乐成之后,点击左侧的状态——在线隧道列表,查看公网地址,此时可以看到地址变成了二级域名,将其复制下来
https://img-blog.csdnimg.cn/img_convert/68d89cf35ac13970ff7c8b1651dd5b6a.png#pic_center
5. 测试使用固定二级子域名远程访问

接着我们再次打开ipad浏览器,访问刚刚设置乐成的固定二级子域名地址,出现vscode界面表示乐成,就可以舒畅的写代码啦.
https://img-blog.csdnimg.cn/img_convert/517e4160f5b52d62424687674947132c.png#pic_center
6. iPad通过软件远程vscode

接下来我们通过servediter for code-server软件来实现ipad远程访问vscode
6.1 创建TCP隧道

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


[*]隧道名称:可自界说,留意不要重复
[*]协议:tcp协议
[*]本地地址:22
[*]域名范例:选择随机临时TCP端口
[*]地区:选择China VIP
点击创建
https://img-blog.csdnimg.cn/img_convert/d2659f191b2b6f814d0ff9e13f4059b6.png#pic_center
隧道创建乐成之后,点击左侧的状态——在线隧道列表,将所天生的公网地址复制下来。
https://img-blog.csdnimg.cn/img_convert/1577694c439f996a3d28d4142e6ee932.png#pic_center
7. ipad远程vscode

在ipad上,点击打开appstore,下载软件servediter for code-server
https://img-blog.csdnimg.cn/img_convert/6e914c0f4056207554b10cca303e097a.png#pic_center
下载乐成后点击打开,由于该软件是付费的,可以自由选择购买,这里选择免费试用,选择最后一个free
https://img-blog.csdnimg.cn/img_convert/eb54f7fdcfd41cf7e7184b8a5073c044.png#pic_center
输入相关信息
   参数先容:


[*]code-server URL:填写前面设置乐成的http公网地址【ipad浏览器访问的谁人地址】
[*]Instance password:code-server设置的密码
[*]Host:这里填写我们前面创建乐成的22隧道的公网地址
[*]Username: 这个填写ubuntu系统的用户名
[*]Port: 这里默认即可无需修改
[*]Authentication: 这个填写ubuntu系统用户名对应的密码
https://img-blog.csdnimg.cn/img_convert/b13db2bd4f280f2e4e888624fcb307fa.png#pic_center
输入完信息后点击右上角save后就会自动毗连,出现vscode界面表示毗连乐成啦
https://img-blog.csdnimg.cn/img_convert/df485d69e2ee5aa4adc052d6a862431f.png#pic_center
8. 设置固定TCP端口地址

由于前面我们创建的ssh 22端口的隧道选择的是随机临时地址,该地址会在24小时内变化,为了使我们ipad内里使用vscode毗连更加通畅,我们需要固定ssh 的公网地址。
   留意需要将cpolar套餐升级至专业套餐或以上。
8.1 保存固定TCP地址

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


[*]地区:选择China VIP
[*]描述:即备注,可自界说填写
点击保存
https://img-blog.csdnimg.cn/img_convert/77cdf63824eab4b64cb1b3e30175e461.png#pic_center
固定TCP地址保存乐成,系统天生相应的公网地址+固定端口号,将其复制下来
https://img-blog.csdnimg.cn/img_convert/15be5fed09198bbb55b8c4d3833e77f3.png#pic_center
8.2 设置固定TCP端口地址

浏览器访问http://127.0.0.1:9200/登录cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到codeserver隧道,点击右侧的编辑
https://img-blog.csdnimg.cn/img_convert/eed7984ae9ebde6f4b7235687bb9bca2.png#pic_center
修改隧道信息,设置固定TCP端口地址:


[*]端口范例:改为选择固定TCP端口
[*]预留的TCP地址:填写刚刚保存乐成的固定TCP端口地址
点击更新
https://img-blog.csdnimg.cn/img_convert/9ad3b815366255d0d8db8786a2f2a62c.png#pic_center
提示更新隧道乐成,点击左侧仪表盘的状态——在线隧道列表,可以看到刚刚修改的隧道的公网地址已经更新为固定TCP端口地址,将其复制下来。
https://img-blog.csdnimg.cn/img_convert/46af54b2d546c7e9d1536a5f6a0c62b1.png#pic_center
9. 使用固定TCP地址远程vscode

在ipad上,打开servediter for code-server软件,修改host的参数,将其修改为我们刚刚设置乐成的固定TCP端口地址。
点击左上角i标记
https://img-blog.csdnimg.cn/img_convert/fe02c7fff308843b4692c3f91c102937.png#pic_center
选择self Host Server
https://img-blog.csdnimg.cn/img_convert/1c2b32edc16c32ec0461020d68e37678.png#pic_center
把Host值改为我们刚刚官网保存的tcp地址
https://img-blog.csdnimg.cn/img_convert/5b03753464e0efb24b838d91393d358d.png#pic_center
更改完后点击右上角save,点击完后会自动毗连,出现vscde界面表示乐成了,至此,教程就结束了,该公网地址不会再随机变化了。
https://img-blog.csdnimg.cn/img_convert/36f9b9a3ac4985d7366d2e49dfd3fe46.png#pic_center

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 【Linux】公网环境内网穿透实现应用ipad pro进行代码开发