上课摸鱼必备Vscode网页版的搭建教程

前言

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

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

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

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

（一）运行效果

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

（二）基础配置

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

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

• zhuanlan.zhihu.com/p/368487727
• www.zhihu.com/search?type…
• blog.csdn.net/u011002997/…

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

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 再传到服务器上：

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

​

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

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 端口？戳这

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

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

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

（三）高级配置

​ 我们都知道 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 端有一个可以更加沉浸体验的软件，推荐给大家

• 以下是使用方法：

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

（五）使用流程总结

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

（六）参考资料

在 Ipad 上使用 Vscode