浏览器上的IDE：code-server安装——服务器版的vscode_firefox code server 应用

本文所使用的环境配置：

服务器环境：阿里云ecs 2c4g
操作系统：centos 7.3

前置需求

• Linux基础——Linux系统文件树
• Linux基础——Linux环境变量配置

code-server简介：

• code-server按照官方的介绍，这款应用就是能在服务器上运行的vscode在有浏览器的设备上进行访问，并且因为是在服务器上运行所以不用担心代码部署到服务器时不同环境造成的影响（这是句废话）。
• code-server是服务器应用，所以入门门槛还是有的，请大家综合自己的需求后再决定是否继续。
• code-server使用建议

code-server的优势（官方给出的两个优点）：

• 随时随地编写代码：使用一致的开发环境，在平板电脑和笔记本电脑上设置代码。在 Linux 计算机上进行开发，然后通过 Web 浏览器从任何设备中获取。
• 云服务器支持：利用大型云服务器加快测试、编译、下载等速度。由于服务器上运行所有密集型计算，因此在外出时保留电池寿命。

code-server对服务器的配置需求：

• 64 位操作系统。
• 至少 1GB 的 RAM。
• 建议2核心以上（1 个核心能工作，但不是最佳）。
• 通过 HTTPS 或本地主机安全连接（服务辅助设备和剪贴板支持需要）。
• 对于 Linux：GLIBC 2.17 或更高版本，GLIBCXX 3.4.15 或更高版本。

code-server的搭建

既然是服务器应用，肯定先有个服务器，没有的话快自己去入手一个吧，这里我就默认大家都有云服务器啦。

下载code-server的最新版本

• 下载链接
• 下载对应服务器版本的文件。
  

部署code-server

• 如果是下载到本地，则需要将文件上传到你的服务器中。
• cd到你存放code-server的文件目录下。
  
• 解压code-server到/opt/目录中。

tar -zxvf [你的code-server压缩文件名] -C /opt/
1

• 确认code-server压缩文件已经解压到opt文件目录中。
  

• 将code-server指令添加进系统环境中。

ln -s /opt/[你的code-server目录名]/code-server /usr/local/bin/code-server
1

运行code-server

• 直接输入code-server，服务就自行开启了，默认是8080端口，127.0.0.1的访问ip。
  
• 如果想要自行更换ip或者是端口的话可以在后面添加–bind-addr参数。
  这里如果想让code-server被任意访问的话则需要把IP地址设置为0.0.0.0。
bind-addr参数仅限code-server版本3.2.0及以上才会有，如果想知道具体参数可以输入code-server -h查看参数详情。

code-server --bind-addr 0.0.0.0:[你的端口号]
1

• code-server的所有参数。
  不同版本的参数可能会不一样，具体以code-server -h显示的为准

开启https

• 在启动指令后面添加–cert参数，vscode会自动生成默认证书。

code-server --bind-addr 0.0.0.0:[你的端口号] --cert
1

• 如果需要启用https服务的话则需要提供你域名的ssl认证证书路径。
  https需要你有一个已经认证过的域名并且本地保存了证书和key
  在指令后面添加两个参数。
  • cert: 认证证书的路径（.pem或者.crt）
  • cert-key: 证书key的路径（.key）

code-server --cert [你的证书存放路径] --cert-key [你的key路径] --bind-addr 0.0.0.0:[你的端口号]
1

访问code-server

• 以上操作全都做完后就可以访问了，输入登录密码即可访问。
  密码在代码运行的时候就已经给出，记得保存，或者用auth自行设置密码。
  

让code-server在后台运行

• 因为code-server执行以后关闭ssh会话会自动关闭程序，所以这里需要让code-server挂载在后台运行。这里推荐使用tmux多会话窗口应用。

安装tmux

• tmux一般都可以通过linux的包管理器安装。

# Ubuntu 或 Debian
$ sudo apt-get install tmux

# CentOS 或 Fedora
$ sudo yum install tmux

1
2
3
4
5
6
7

• 创建一个新的会话。

tmux new -s code_server
1

• 在新会话中执行code-server启动指令即可。 关闭ssh会话以后程序继续在后台运行。

code-server --cert [你的证书存放路径] --cert-key [你的key路径] --bind-addr 0.0.0.0:[你的端口号]
1

• 需要再查看code-server运行状态的话，只需要访问code_server会话就行了。

# 接入code_server会话
tmux a -t code_server
# 杀掉code_server会话
tmux kill-session -t code_server
1
2
3
4

• 具体使用方式可以参考:Tmux 使用教程

使用code-server的小问题

安装插件

• 和刚刚安装的vscode一样，什么插件都没有，非常干净。要安装插件的话直接去插件商城安装就行了。（不过至少装个中文显示插件吧。）
  
• code-server的python插件会自动链接到系统python环境变量，不需要手动配置，就很方便。
  

界面字体调整

• 刚进入code-server准备开始写第一份代码的时候你会发现一个大跌眼界的事情，linux不像windows，没有太多的字体支持，默认的consolas字体简直辣眼睛。
  
• 打开设置->搜索font，将自己想要显示的字体输入进去，重启code-server服务即可生效。
  
• 如果想要使用自己的字体，可以参考：为linux添加新字体

提示git更新版本

• 有些服务器git版本可能比较老，所以每次访问的时候都会提示要更新git到最新版本。
  
• 如果不想更新，直接勾选无视此提示就行了。

code-server使用建议

• 按照我一个学生党研究了4小时后的经验，我发现code-server完全就是一个vscode，不管是运行界面还是快捷方式和vscode一模一样。所以我就有了一个问题：为什么不直接用本地vscode呢？ 针对这个问题，我分析了一下code-server的优缺点，之后会给出适合使用的人群建议。
• code-server的优点：
  • 高便携性：无论你在哪里，只要手边有键盘鼠标电脑，能联网，就可以进行代码的调试。
  • 高安全性：可能有些时候你用的并不是你的电脑，但是你又不得不去完成一些上头给你分配的任务，你可以把代码从git仓库拉取到当前电脑完成，但是可能会留下一些你不想要留下的记录，云编码则是能保证你不留下痕迹的有利选择。
  • 方便调试：因为是在服务器环境上运行代码，所以如果这台服务器正好是你使用的服务器的话，则你所见即所得，无需解决在后续代码部署上的环境兼容问题。
  • 高统一性：有些时候你可能需要多个团队开发同一区域的编码，但是可能你的队友们环境完全不一样甚至会因为环境配置拖慢工程，这个时候创建多个账户分发给你的队友们在服务器上进行云编程，那么可以完美解决这个问题。
• code-server的缺点：
  • 对云服务器有非常高的要求：这不仅仅是对内存和cpu的要求，对网络带宽也有很大的需求。我的阿里云标准服务器的带宽花了整整1分多钟才把vscode页面加载完全，光是这个加载时间就已经可以劝退所有没有钱买高性能服务器的人了，而且运行代码的加载时间相比本地vscode也是有一定的延时。更不用说多人访问了。
    
  • 没有网络就不能写代码：相信很多学生和我一样，学校可能哪天突然网络就断了，而你还在写课设，但是如果你用的是code-server的话可能你今天都不用写代码了。
  • 无法编写太大工程：vscode本生就是一个轻量级ide，如果你要进行一个特别大的网站开发的话，肯定是要用其他ide的，原生支持的开发插件更全面。
  • 无法调试图形化页面：也不是完全不能调试，可以通过浏览器进行访问，但是这需要你的服务器进行更大的带宽，而且代价是更高的延时，可能你只是要写一个html页面，但是每写几行就想预览效果，而code-server需要你等半天将页面从服务器发送过来，这肯定是不能和本地访问相媲美的。
• 使用范围分析：
  • 学生党（装逼用）：对于喜爱计算机的学生们，这个肯定是能博人
    眼球的东西，毕竟学生之间的交流就是这么的简单粗暴。
  • 不经常在固定地点写代码的程序员们：虽然可能我再想有没有这种人，不过世界这么大，总会有的，这些程序员可能需要在不同地点出差，但是又要完成公司的项目，那么这个可能会成为他们的选择。不过现在随便一台便携笔记本cpu都能有4核了吧。。。
  • 公司用：大企业和我们这种穷逼不同，他们有性能非常高的服务器和网络带宽，完全有能力发挥出code-server的优势，像在这疫情期间，说不定还是很好的远程办公工具呢（猜的）。
  • 结合jupyter book效果更佳：一直都很想吐槽jupyter notebook有木有什么更快捷的代码提示方式，虽然下载了插件，但是每次提示都不是主动的，都需要被动提示，而且有些时候运行的结果可能还会占用页面显示，导致和下个区块的代码不连贯，这个时候在code-server上安装jupyter的插件，即可有vscode级别的代码体验。
    

参考文献

• Code Server github
• Code Server – VSCODE 服务器版
  
• code-server像素级仿制的在线VSCode——搭建与扩展安装
• Tmux 使用教程
• CentOS7 如何升级Git
• 为linux添加新字体