闲置iPad Pro打造真正的生产力工具!使用vscode编程写代码

文章目录

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

转发自CSDN远程穿透的文章:iPad秒变生产力工具?在iPad上用vscode写代码搞开发【内网穿透】

前言

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

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

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

视频教程

iPad秒变生产力工具!在iPad上用vscode写代码

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浏览器,输入刚刚复制的公网地址访问即可,访问后输入前面设置的密码,出现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浏览器,访问刚刚配置成功的固定二级子域名地址,出现vscode界面表示成功,就可以愉快的写代码啦.

2023011617

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

点击创建

2023011618

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

2023011622

7. ipad远程vscode

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

2023011619

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

2023011620

输入相关信息

参数介绍:

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

2023011621

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

2023011623

8. 配置固定TCP端口地址

由于前面我们创建的ssh 22端口的隧道选择的是随机临时地址,该地址会在24小时内变化,为了使我们ipad里面使用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上,打开servediter for code-server软件,修改host的参数,将其修改为我们刚刚配置成功的固定TCP端口地址。

点击左上角i标志

2023011629

选择self Host Server

2023011630

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

2023011631

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

2023011632

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

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

相关文章

Java阶段四Day08

Java阶段四Day08 文章目录 Java阶段四Day08关于pom.xml中的版本关于Session关于Token关于JWT在项目中使用JWTCustomUserDetailsUserDetailServiceImplUserServiceImpl 关于pom.xml中的版本 查看<groupId> 是同一家的只需配一个版本号<version><artifactId>中…

Spring Boot中的Profile:原理、用法与示例

Spring Boot中的Profile&#xff1a;原理、用法与示例 前言 Spring Boot 是一个快速开发 Spring 应用程序的框架&#xff0c;它提供了很多有用的功能和特性。其中&#xff0c;Profile 是一个常用的功能&#xff0c;它可以根据不同的环境配置来加载不同的配置文件&#xff0c;…

双路高速 DA 实验

目录 双路高速 DA 实验 1、简介 2、实验任务 3、程序设计 3.1、hs_dual_da顶层模块代码 3.2、ROM 波形存储模块&#xff08;rom_1024x10b&#xff09; 创建单端口 ROM IP核 3.2、DA 数据发送模块&#xff08;da_wave_send&#xff09;代码 4、硬件设计 4.1、添加.xdc…

Nginx网站服务

目录 Nginx简介 简述Nginx和Apache的差异 3 Nginx 相对于 Apache 的优点 阻塞与非阻塞 同步与异步 ginx 应用场景 nginx编译安装 Nginx安装和升级 1.关闭防火墙&#xff0c;将安装nginx所需软件包传到/opt目录下 2.拖入软件包 3.安装依赖包 3.创建运行用户与组 5.编译安…

【黑马头条-Java微服务项目】

黑马头条-Java微服务项目 (一)、项目介绍1.项目背景介绍(1).基本介绍(2).业务说明(3).项目术语介绍 2.技术栈说明(1).技术栈-基础六层技术(2).技术栈-服务四层技术(3).技术栈-分布 (二)、nacos环境搭建 (一)、项目介绍 1.项目背景介绍 (1).基本介绍 随着智能手机的普及&…

调用百度文心AI作画API实现中文-图像跨模态生成

作者介绍 乔冠华&#xff0c;女&#xff0c;西安工程大学电子信息学院&#xff0c;2020级硕士研究生&#xff0c;张宏伟人工智能课题组。 研究方向&#xff1a;机器视觉与人工智能。 电子邮件&#xff1a;1078914066qq.com 一&#xff0e;文心AI作画API介绍 1. 文心AI作画 文…

Seata 四种模式对比总结

一、前言 通过以下系列章节&#xff1a; docker-compose 实现Seata Server高可用部署 | Spring Cloud 51 Seata AT 模式理论学习、事务隔离及部分源码解析 | Spring Cloud 52 Spring Boot集成Seata利用AT模式分布式事务示例 | Spring Cloud 53 Seata XA 模式理论学习、使用…

Day_56-57kMeans 聚类

目录 Day_56-57 k-Means 聚类 一. 基本概念介绍 二. 具体过程 三. 代码实现与解释 1. 导入数据与数据初始化 2. 核心代码 3. 后续信息的补充 4. 距离计算和随机排列 四. 后续的数据分析 五. 运行结果 Day_56-57 k-Means 聚类 一. 基本概念介绍 同我上一篇博客的介绍&…

【Linux】打开Linux大门,踏入Linux世界(环境搭建再加一群Linux基本指令就OK啦~)

&#x1f9d1;‍&#x1f393;个人主页&#xff1a;简 料 &#x1f3c6;所属专栏&#xff1a;Linux系统编程与网络编程 &#x1f3c6;个人社区&#xff1a;越努力越幸运社区 &#x1f3c6;简 介&#xff1a;简料简料&#xff0c;简单有料~在校大学生一枚&#x…

MySQL表的约束

目录 前言 1.什么是约束 2.空属性 3.默认值 4.列描述 5.zerofill 6.主键 7.自增长 8.唯一键 9.外键 总结 前言 hello&#xff0c;各位小伙伴大家好&#xff0c;本章内容为大家介绍关于MySQL约束的相关内容&#xff0c;关于约束这个概念&#xff0c;如果是第一次接触可…

redis---基础(部署及常用命令)

目录 前言一、关系型数据库与非关系型数据库1. 关系型数据库2. 非关系型数据库3. 关系型数据库和非关系型数据库区别4. 非关系型数据库产生背景小结&#xff1a; 二、Redis简介1. 单进程快速的原因&#xff1a;2.epoll 机制优势&#xff1a; 三、Redis 具有以下几个优点四、red…

机器学习之LDA算法

目录 LDA算法 LDA目标 LDA原理推导 LDA除法模型 LDA减法模型 LDA除法正则模型 LDA减法正则模型 证明&#xff1a;StSwSb LDA算法流程 LDA优点 LDA缺点 基于LDA的人脸识别 LDA算法 线性判别分析&#xff08;linear discriminant analysis&#xff0c;LDA&#xff0…