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

本文涉及的产品
.cn 域名,1个 12个月
简介: 闲置iPad Pro打造真正的生产力工具!使用vscode编程写代码

前言

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


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


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


视频教程


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


1. 本地环境配置

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



下载code server服务


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



打开ubuntu命令行执行


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


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



以下信息表示安装成功



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


export PASSWORD=”000000”


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


ifconfig


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


code-server --host= “0.0.0.0”

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



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



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


简单穿透测试

cpolar http 8080

按ctrl+c退出


向系统添加服务

sudo systemctl enable cpolar

启动cpolar服务

sudo systemctl start cpolar

查看服务状态

sudo systemctl status cpolar


正常显示为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

点击创建



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



3. 测试远程访问

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



4. 配置固定二级子域名

4.1 保留二级子域名

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


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


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


地区:选择China vip

二级域名:可自定义填写

描述:即备注,可自定义填写


4.2 配置二级子域名

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



修改下隧道信息:


域名类型改为选择二级子域名

subdomain:填写刚刚保留成功的二级子域名

点击更新



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



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

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

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

点击创建



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



7. ipad远程vscode

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



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



输入相关信息


参数介绍:


code-server URL:填写前面配置成功的http公网地址【ipad浏览器访问的那个地址】

Instance password:code-server配置的密码

Host:这里填写我们前面创建成功的22隧道的公网地址

Username: 这个填写ubuntu系统的用户名

Port: 这里默认即可无需修改

Authentication: 这个填写ubuntu系统用户名对应的密码


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



8. 配置固定TCP端口地址

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


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


8.1 保留固定TCP地址

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


地区:选择China VIP

描述:即备注,可自定义填写

点击保留



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



8.2 配置固定TCP端口地址

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



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


端口类型:改为选择固定TCP端口

预留的TCP地址:填写刚刚保留成功的固定TCP端口地址

点击更新



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



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

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


点击左上角i标志



选择self Host Server



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



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

目录
相关文章
|
2月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
253 2
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
391 4
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
78 1
|
2月前
|
前端开发 JavaScript 数据库
VSCode编程助手工程能力体验报告(一):通义灵码 - 帮你高效切入新项目、编码和提升质量
我是一位软件工程师,用通义灵码个人版vscode插件的workspace做项目分析和复盘,对比之前没有灵码,现在提效了80%,本文介绍了具体的使用流程。
|
2月前
|
自然语言处理 JavaScript 开发者
通义灵码插件:VSCode 的智能编程助手
通义灵码插件:VSCode 的智能编程助手
392 3
|
2月前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
121 2
|
2月前
|
IDE 网络安全 开发工具
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
本文介绍了如何使用VS Code通过Remote-SSH插件连接远程服务器进行代码开发,并与PyCharm进行了对比。作者认为VS Code在连接和配置多个服务器时更为简单,推荐使用VS Code。文章详细说明了VS Code的安装、远程插件安装、SSH配置文件编写、服务器连接以及如何在连接后切换文件夹。此外,还提供了使用密钥进行免密登录的方法和解决权限问题的步骤。
671 0
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
|
2月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
100 2
|
2月前
|
Linux C语言 C++
vsCode远程执行c和c++代码并操控linux服务器完整教程
这篇文章提供了一个完整的教程,介绍如何在Visual Studio Code中配置和使用插件来远程执行C和C++代码,并操控Linux服务器,包括安装VSCode、安装插件、配置插件、配置编译工具、升级glibc和编写代码进行调试的步骤。
315 0
vsCode远程执行c和c++代码并操控linux服务器完整教程
|
4月前
|
Dart
Flutter笔记:手动配置VSCode中Dart代码自动格式化
Flutter笔记:手动配置VSCode中Dart代码自动格式化
517 5