菜鸟笔记
提升您的技术认知

Vscode server: 一个移动设备上编程/多人编程的解决方法 (附新手教程)

最近网上冲浪时发现github有一个codespace功能,可以在浏览器上直接编辑一个代码仓库,并提供专有的运行环境。

https://github.com/features/codespaces

不过一个codespace只能用于一个仓库,而且服务器不在国内,也不支持微信、支付宝等付费方法。那么,有没有一个自由度更高的解决方法呢?openvscode server可以解决我们的问题。

OpenVSCode 的代码仓库

https://github.com/gitpod-io/openvscode-server

OpenVSCode server 是由gitpod主持的代码仓库。该仓库fork了microsoft的vs code仓库,而且与github codespace用的是一样的代码,将会持续更新。

OpenVSCode server 操作上和vs code几乎没有区别,带有文件编辑器、终端、文件浏览器和强大的插件支持。它可以访问服务器上的全部文件,权限与运行服务端软件的用户相同。

它还有跨平台支持,任何架构任何系统的设备,只要有浏览器就可以访问,而且有相近的体验。

优势

其实在移动设备上编程的方法不止这一种。有不少app都可以支持python、java等编程语言,苹果甚至推出了给iPad量身定制的swift playground。另外,互联网上也有很多在线编程的网站,那么为什么要大费周章地配置一个服务器呢?

第一是环境的完备。由于服务器提供了一个完整的Linux环境,可以用于开发大项目(比如,基于flask的网站,这在上述的其他编程平台上是不可能的)。对于服务器项目,这种方法比在本地开发(windows,mac系统)甚至有更接近服务器环境的优势。

第二是连接的私密和低延迟。在私人的服务器上的文件都是随时可以访问和备份的。如果不绑定域名,也几乎没有被攻击的风险。而在其他codespace上的文件有被窃取的风险。另外,codespace由于服务在境外,有被墙的风险,延迟也比较高。而私人服务器可以开在国内,可以达到很低的延迟。

第三是同步方便。目前GitHub的私有仓库已经免费,可以用github实现本地和服务器同步。甚至可以在同一个服务器上搭建git服务器,实现数据的完全私密。

第四是经济性。目前阿里、腾讯等服务器提供商都有力度极大的大学生优惠和新用户优惠,从原价的一个月几百元降到100~200元/年。而且,一台服务器可以用作多种服务,比如说Minecraft服务器、个人网站等。

功能展示

界面与vs code几乎一样,支持服务器端的插件,没有桌面版那么齐全,但是基本的语言支持都是有的,作为学习编程的工具完全足够,但作为开发的工具可能有不足。

支持python/java/c++等语言的运行的debug

而且还可以同时有多个客户端,支持多人编辑同一个文件。因为运行环境在服务器上,不会出现在一台电脑上能运行,在另一台电脑上不能运行的情况,适合多人合作。

新手教程

1.服务器

openvscode server只有linux版,所以服务器必须为linux系统。服务器性能取决于你想在上面进行什么类型的开发,建议一般用户至少上1核2g内存。

如果对Linux不太熟悉,Linux教程

买到服务器后,我们需要连接服务器。linux服务器需要用ssh来连接。ssh是一种远程连接的终端,可以实现加密且低延迟的连接。windows系统如果安装了git,可以直接用git bash里面的ssh命令;mac系统在终端里就可以用ssh命令。当然也可以用putty等ssh专用软件。ssh命令的基本用法为:

ssh user_name@ip_address

其中,username为用户名,ip_address为服务器的ip地址

在买到服务器后,一般会设置root的密码。这之后,可以用设置好的密码来ssh

ssh root@ip_address

root用户是Linux系统的超级用户,拥有对系统里面所有文件的访问权限。经常以root用户登陆系统会比较危险(试试执行 rm -rf /(滑稽))所以建议新建一个用于服务器管理的用户。详见狂神的教程p12 或百度一下

2. 配置服务器

1. 开放端口

服务器需要开放3000端口到公网。可以在服务器的管理页面中操作

本教程用阿里云为例,其他服务器大同小异

如果开放端口后不能访问,可以试试手动打开,使用firewall-cmd命令

先安装firewalld软件包

#如果是root用户,则不需要前面的sudo
sudo apt update
sudo apt install firewalld

开放端口,并刷新

sudo firewall-cmd --add-port=3000/tcp --permanent
sudo firewall-cmd --refresh

2. 创建新用户

因为vscode server会向用户home文件夹写入文件,默认打开的路径也是用户的home文件夹,所以建议新建一个用户。

useradd codesrv #新建用户
passwd codesrv
#然后输入密码,密码不会显示在屏幕上,需要盲打
#确认密码

然后可以暂时赋予新用户sudo权限,比较方便

EDITOR=vim visudo
#这行命令实际上是编辑一个位于/tmp/sudoers.tmp的文件
#新手不熟悉vim操作可以用nano,直接去掉前面部分就可以

sudo权限就是在一个用户要干只有root用户能干的事情的时候,赋予它自己root的权限。用法是sudo + 需要执行的命令。实际上,执行这条命令的是root用户。另外,root时没有sudo命令的,作为root执行命令不需要sudo前缀

3. 使用虚拟终端

在运行code server时,如果直接从ssh的终端执行命令,会导致终端断开连接后任务停止的情况。这时需要一个虚拟终端软件来在服务器本地新建一个终端,然后在这个虚拟终端中执行命令。常见的虚拟终端软件由screen和tmux。建议使用功能更强大的tmux

#安装tmux
sudo apt update
sudo apt install tmux

直接输入tmux就可以进入一个虚拟终端,结束终端并退出输入exit或ctrl+d。暂时断开,不结束终端安ctrl+b,松开后按d。

3.安装服务器并运行

事实上,在这之前已经有一个类似的vs code服务器版code-server,由coder组织维护。但是up主配置时遇到一些困难,而且并不是官方维护,就没有使用。B站已经有教程

在OpenVSCode server仓库中点击release

然后在三个tar文件中选择适合的架构的,一般是x64那个

右键,复制链接

然后回到服务器。在这之后,需要以前面新建的用户完成。用su username (username为新建用户的用户名) 来切换用户

sudo mkdir /srv/codesrv
#新建存放vscode服务器的目录,可以是任何一个目录
sudo chown codesrv /srv/codesrv
#将这个目录属主改成专门的用户"codesrv"(前面新建的那个用户)
#这样,"codesrv"就可以在这个目录里面新建、删除文件、文件夹

下载压缩包并解压

cd /srv/codesrv
#进入前面新建的目录
wget link
#link为前面的链接
tar -xzvf file
#file为下载下来的文件,如果这个目录原来是空的话,按tab就可以自动补全

进入解压后的文件夹,启动服务器。这一步需要在tmux终端下完成

cd folder
#folder 是刚刚解压的文件夹。如果跟着教程来,这个文件夹应该只有一个压缩包、一个文件夹,所以cd后按tab可以补全
chmod +x server.sh
#把server.sh改为可执行
./server.sh

运行后,会出现Web UI availiable at + 一个url的语句,则表示运行成功

up主的终端用了zsh,看起来跟一般了linux终端有点区别,不打紧。左边那些方括号里面有时间的是连接成功后出现的log。

这时,复制url,将其中的localhost改成服务器的ip地址在你的设备上连接即可。

新建连接时需要等一段时间,只要不出现连接失败的页面就表示成功建立连接,正在传输数据。

马赛克为up主服务器的ip地址 4.新建git服务器

配置完成。

但是目前这种直接开放端口的方法有连接不安全的问题(不是https连接)up主将会研究nginx并写一篇用nginx部署OpenVSCode server的专栏,敬请期待。