Please enable Javascript to view the contents

Vscode网页版的搭建教程

 ·  ☕ 4 分钟  ·  ✍️ Calvin Haynes · 👀... 阅读

前言

​ 上课想练练数据结构与算法?或者就是想玩玩儿 Vscode?或者有一个自己的服务器,但是觉得没有利用到极致?那么这篇文章将带你搭建一个在线版的 Vscode,利用浏览器实现全平台使用 Vscode,管你什么手机,Pad,电脑,板砖,咳咳,整就完了!!!

​ 文章中所有的超链接都是很不错的资源,建议都要仔细看看,为了不让文章那么太长,所以我用了不少超链接。

本文搭建环境:开源项目code-server,一台服务器(至少一核 2G 才能有比较流畅的效果)

如果本文对你有帮助的话,还望关注,点赞,转发,收藏,谢谢咯。

(一)运行效果

image-20210610155903032

这个 Vscode 在线版是运行在我买的阿里云学生机的 9999 端口的,毕竟 9.9 一月,对于学生党很友好,我的个人博客也搭在上面的,性能一般,但是也很够用了。

(二)基础配置

1 - 下载 code-server 到服务器上

进到服务器的 SSH 中,这个只要你买了服务器应该都可以用 SSH 的,服务器还没买的,也不会用服务器的,看以下几篇文章(其实不限制与阿里云的,不是推广阿里云哈,其他云怎么用大家自行选购,因为我用的是阿里云,所以这几篇文章也都是阿里云的一些使用教程):

官网上应该也还有比较完善的使用手册啥的,深入玩一下的话,建议自己多研究研究,上面这几篇文章也是我大体看上去不错的,要想明白究竟怎么用的还是要自己用好搜索引擎。

wget https://github.com/cdr/code-server/releases/download/v3.10.2/code-server-3.10.2-linux-amd64.tar.gz

这一步下载速度可能会很慢,甚至中途失败,可以考虑挂代理,不会 Linux 下挂代理的,看我下面的骚操作

当然,你最好有一个梯子,这样总归是要更快和更稳定的。

下面我将演示如何在 Windows 下下载 code-server 再传到服务器上:

  1. 首先我想介绍一下我使用过那么多的 SSH 最好用的一款软件:Termius

    ​ 这个软件是真正的全平台,而且简直是我这种颜值控福利,终端各种皮肤,贼好看,如果你有幸申请到Github 学生包的话,还有其他不少福利。

    关于 Termius 的使用教程

  2. 在 Windows 下载 code-server 的压缩包

    点击这个链接

    再点这个,就开始下载了

    image

  3. 下载完压缩包之后,找到下载的位置,然后就要介绍 Termius 的SFTP功能

    ​ 选中你的服务器

image

​ 先找到你本地压缩包的网址,选中你本地的压缩包,直接拖到服务器上就行

  1. 传过去之后现在你可以到你的服务器中 ls -a 一下,看看它在不在

image

那么以上就是下载的全部内容了

2 - 解压安装试运行(运行部分可以先不弄,下一步的更好用)

  • 解压
tar -xvzf code-server-3.10.2-linux-amd64.tar.gz
  • 可以改个名
mv code-server-3.10.2-linux-amd64 code-server
  • 运行试下(建议先看下参数列表)

PS:得确保你开了 9999 端口,下面是我的服务器防火墙配置

为啥不用 8080 端口?戳这

image

image

cd code-server
export PASSWORD="你想设置的密码"
./code-server --port 9999 --host 0.0.0.0 --auth password
  • –port 9999 指定端口,缺省时为 8080
  • –host 0.0.0.0 允许公网访问,缺省时为 127.0.0.1,只能本地访问
  • –auth password 指定访问密码,可通过 export 命令设置,参数为 none 时不启用密码
  • 可以看一下参数列表
./code-server --help

image

  • 运行后,打开 Chrome 访问“服务器公网 IP:端口”,效果图:

服务器公网 IP 去哪里查? 戳这

image-20210610164853020

(三)高级配置

​ 我们都知道 Linux 是可以写 shell 脚本的,那么为了简化以上操作,也为了让其根据我们意愿后台运行或者终止,我们着手写两个脚本,start.sh 和 shut.sh(脚本是要写在 code-server 目录的奥)

脚本执行目标

  • start.sh

    • 开启 code-server,后台运行该进程
    • 记录当前进程的 PID,也专门记录一个日志 log 文件便于以后查看
    • 将 PID 存到文件里面
    #start.sh
    export PASSWORD="412523"
    nohup ./code-server --port 9999 --host 0.0.0.0 --auth password > test.log 2>&1 &
    echo $! > save_pid.txt
    
  • shut.sh

    • 读文件中的 PID
    • 杀死进程
    #shut.sh
    kill -9 'cat save_pid.txt'
    

(四)Ios 端/IpadOS 端的最佳使用方式

本来配置完以上,我们用任何设备,只要用浏览器就可以使用了,但是 Ios 端和 IpadOS 端有一个可以更加沉浸体验的软件,推荐给大家

image

  • 以下是使用方法:

image

image

image

选好点Save就可以了,访问效果就如第一步运行效果的图

(五)使用流程总结

  • SSH 登入服务器
  • cd code-server
  • ./start.sh
  • 浏览器直接访问网址/Apple 系列产品的 serveditor
  • 关了,免得一直占用我的服务器:./shut.sh

(六)参考资料

在 Ipad 上使用 Vscode

-------他日江湖相逢 再当杯酒言欢-------

Calvin Haynes
作者: Calvin Haynes ❉
Life is a journey, not a destination.


目录