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

这篇具有很好参考价值的文章主要介绍了让IPad变成你的生产力工具?在IPad上用Vscode写代码搞开发。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

转发自cpolar极点云的文章:如何让IPad变成你的生产力工具?在IPad上用Vscode写代码搞开发

前言

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

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

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

视频教程

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

1. 本地环境配置

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

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

下载code server服务

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

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

打开ubuntu命令行执行

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

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

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

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

以下信息表示安装成功

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

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

export PASSWORD=”000000”

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

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

ifconfig

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

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

code-server --host= “0.0.0.0”

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

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

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

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

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

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

  • 简单穿透测试
cpolar http 8080

按ctrl+c退出

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

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

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

点击创建

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

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

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

3. 测试远程访问

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

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

4. 配置固定二级子域名

4.1 保留二级子域名

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

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

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

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

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

4.2 配置二级子域名

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

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

修改下隧道信息:

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

点击更新

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

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

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

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

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

让IPad变成你的生产力工具?在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

点击创建

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

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

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

7. ipad远程vscode

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

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

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

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

输入相关信息

参数介绍:

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

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

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

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

8. 配置固定TCP端口地址

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

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

8.1 保留固定TCP地址

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

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

点击保留

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

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

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

8.2 配置固定TCP端口地址

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

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

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

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

点击更新

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

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

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

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

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

点击左上角i标志

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

选择self Host Server

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

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

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

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

让IPad变成你的生产力工具?在IPad上用Vscode写代码搞开发文章来源地址https://www.toymoban.com/news/detail-466925.html

到了这里,关于让IPad变成你的生产力工具?在IPad上用Vscode写代码搞开发的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【解放ipad生产力】如何在平板上使用免费IDE工具完成项目开发

    我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3o19zyy2pneoo 很多人应该会像我一样吧,有时候身边没电脑突然要写项目,发现自己的平板没有一点作用,毫无生产力可言,在了解了几家IDE工具后,给大家罗列出来,根

    2024年02月14日
    浏览(111)
  • 🚀提升生产力:是时候升级你的命令行工具了

    命令行 的历史可以追溯到 Unix 操作系统的起源,也就是1969年,Unix诞生之时,前辈们就已经用 命令行 来和操作系统交互了。 随着计算机性能的飞速发展,图形化的操作界面逐渐成为主流,命令行工具离普通用户越来越远。 这些年来,图形界面的发展不仅仅表现在界面越来越

    2024年02月05日
    浏览(52)
  • 【AI生产力工具】Upscale.media:用AI技术提升照片质量,让你的作品更出色

    在如今的数字时代,图片已经成为我们日常生活中不可或缺的一部分,从社交媒体到电子商务网站,从广告宣传到个人生活,都需要使用各种形式的图片。然而,在实际应用中,我们常常会遇到一些图片分辨率过低、尺寸过小的问题,这时候就需要一些强大的工具来帮助我们

    2024年02月01日
    浏览(46)
  • AI对话+AI绘画,提高你的生产力

    使用 Nestjs 和 Vue3 搭建的 AIGC 生态社区 当前特色支持功能 GPT3/4模型支持与控制 联网对话支持 思维导图生成支持 openai DALL-E2绘画支持 Midjourney绘画支持 全套卡密系统支持 在线支付支持 完善的后台管理系统支持 源码购买或者托管运营站点请联系WX:17610096728 用户端部分截图 引导

    2024年02月14日
    浏览(55)
  • 这10个Lambda表达式必须掌握,简化你的代码,提高生产力

    Lambda 表达式(lambda expression)是一个匿名函数 ,Lambda表达式基于数学中的λ演算得名,直接对应于其中的lambda抽象(lambda abstraction),是一个匿名函数,即没有函数名的函数。 Lambda表达式可以表示闭包,和传统数学上的意义有区别。 文末有本文重点总结,关于技术类问题可

    2024年02月05日
    浏览(42)
  • AIGC - 生产力新工具 Copilot

    https://github.com/features/copilot Copilot的主要功能包括: 代码补全和提示:Copilot会根据上下文,智能提示您可能需要的变量,函数,参数等。 快速生成代码:Copilot可以快速生成if语句,for循环,类定义,函数定义等代码模板。 代码优化:Copilot会检测代码并提供重构方案,比如提取方法,调整变量

    2024年02月01日
    浏览(40)
  • AI,新时代的生产力工具

    以后每个人在每个领域都会有自己的智能AI助理 AI就是新时代的生产力工具,用得好就能上火星,用不好也能到月球,不用的话你只能停留在地球 有写文的AI,你给个框架、设定,帮你成文 有画画的AI,你给个描述、场景,帮你成画 … ChatGPT就是最明显的代表 ,用来改论文、

    2024年02月13日
    浏览(57)
  • 22个提升生产力的工具推荐,稳了

    子曰: 工欲善其事,必先利其器 。 本文给大家推荐22个提高生产力的工具,总有一款符合你的需求。😄😄😄 作为一名开发人员,任务管理是必不可少的。任务管理工具不仅可以帮助开发人员管理日常任务,还可以将任务分解成小部分,并按照优先级进行优化。这里推荐滴

    2024年02月06日
    浏览(66)
  • AIGC - 生产力新工具 Bito AI

    Bito AI是继Github Copilot、Cursor、CodeWhisperer等AI智能编程产品之后发了一大AI编程工具 。 Bito是一款建立在OpenAI和ChatGPT模型之上的人工智能编程辅助软件,Bito AI可以帮助开发人员大幅提升工作效率。 以下是Bito AI 编程助手可以辅助我们完成的一些能力。 生成代码:向Bito提出任何

    2024年02月09日
    浏览(50)
  • 咚咚咚,穷人版生产力工具,好用到飞起

    每个程序员都有自己的生产力工具,不管你是深耕职场多年的老鸟,还是在学校努力学习的小鸟,应该都有自己囊里私藏的好辅助。比如帮你完成从头脑风暴草图到创建线框图/原型的UI工具,让代码规范和交付更为可靠的版本控制工具等等。 今天笔者给大家推荐一款低调且强

    2024年02月08日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包