xlkang/recording

01. 在Ipad上体验vscode在线开发

Opened this issue · 0 comments

xlkang commented

前言

  最近入手一台ipad，打算尝试一下vscode推出的在线开发服务。目前发布的vscode环境有微软官方的Visual Studio Codespaces，GitHub Codespaces，coding的cloud studio等，官方和cloud studio价格都不太美丽，GitHub Codespaces还在内测，也不太理想。

  后来发现了开源的code-server，它也是专门为浏览器设计优化的 VS Code，可以自行部署在自己的服务器上面，并且在任意浏览器中访问，另外ipadOS上还有一款原生的VSApp用来代替浏览器连接code-server，它还专门进行了优化，相比浏览器中访问体验顺滑得多，因此决定用code-server来搭建在线开发服务。

准备

  • ipad一台

  • 服务器一台，我用的阿里云ECS 2v4g，测试用只买了一周，系统是Ubuntu v18.04

  • 可以连接到服务器的设备或者终端

服务器部署code-server

  • 下载code-server gzip包(linux, 3.1.1) 下载地址，这里说一句，刚开始直接在服务器上用curl -o命令下载下来，解压报错，原因是这个链接指向的其实不是gzip文件，而是下载链接，于是在github手动下载gzip包并且上传到服务器。

  • 上传，这里我在公司的mac上用的FileZilla，登录远程服务器，上传gzip包到/root目录下

  • 解压到当前目录并进入文件夹

    tar -xf FILE_NAME
cd FILE_NAME

  • 在服务器上面设置名为 PASSWORD 的环境变量，后面 code-server 启动后就会直接读取这一环境变量并将之作为你的登录密码

  export PASSWORD="YOUR_CODE_SERVER_PASSWORD"

  • 目录中code-server是可执行文件，可以直接在linux下执行，接下来在服务器上启动code-server

    ./code-server --host "0.0.0.0"

    code-server 进程就在远程服务器上启动并开始监听 8080 端口了，同时使用自定义的密码（YOUR_CODE_SERVER_PASSWORD）作为认证密码。

  • 最后打开这个端口的防火墙，在阿里云ECS服务器实例控制台中，在本实例安全组中添加开放8080端口的入网授权策略(允许外网访问8080端口)，因为我的code-server服务可能会被不同的ip访问和使用，因此把授权对象设置为0.0.0.0，即允许任何源访问。

  至此服务器上的code-server实例就配置好了，非常方便，然后就可以在任意浏览器中打开{服务器IP}:{8080端口}访问私有的在线版的VS code了。

VSApp优化pad体验

  配置好服务器上的code-server实例后，在ipad上也可以用普通浏览器访问，但是浏览器的导航栏和虚拟键盘，还是很影响使用体验。为了解决这个问题，再使用VSApp替代浏览器去连接code-server。

  • 直接在appStore下载VSApp

  • 打开后选择Self Hosted Server，填写code-server的url和自定义密码，服务器的登录信息等

  • 点击保存

  VSApp 就可以连接我们自己的 code-server 实例，并且自动登录，由于 VSApp 是一个独立的 iOS 应用，并专门为 code-server 进行了优化，因此体验会比浏览器顺滑得多。

总结

  完成以上配置后，打开VSApp体验一下在线编程，很顺滑，打开VS code的终端，可以操作服务器上的所有文件，也像pc上一样支持各种extensions。接下来在服务器上装上git，node，nvm，yarn等日常环境，在pad上进行一些日常web项目的coding和一些练习就没有问题了，同时也有了在不同终端中一致的开发环境。

参考文章

为 iPad 部署基于 VS Code 的远程开发环境