在浏览器中使用vscode（code server）

vscode作为一个非常强大的IDE，虽然已经适配了linux，mac，但是还是不够，如果有了web端的，那么只要有了浏览器，我们就可以在任何设备上进行访问，今天文章的主题就是搭建一个基于vs code的web ide，当然不是自己去编写代码，而是站在巨人的肩膀上，用到的就是code server，它是基于vscode的一个开源项目，发布在github上（附上网址：code-server/github）。
接下来就说一下code server如何安装使用。

1.下载对应的压缩包

• 先通过ssh连接到linux服务器，查看系统信息，code server也分多个版本，因此，要根据不同的系统下载相对应的版本

[root@VM-4-7-centos ~] uname -a
Linux VM-4-7-centos 3.10.0-1127.19.1.el7.x86_64 #1 SMP Tue Aug 25 17:23:54 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux

• 一般都是x86_64，如果知道的话，该步骤可以跳过，目前github上code server的新版本已经取消了windows和行x86_64版本的，如果显示是x86_64，直接下载amd64版本的，目前最新版的是3.11.0

2.解压

#解压
[root@VM-4-7-centos lsy] tar -zxvf code-server-3.11.0-linux-amd64.tar.gz 
#进入该目录
[root@VM-4-7-centos lsy] cd code-server-3.11.0-linux-amd64/
#查看有哪些文件
[root@VM-4-7-centos code-server-3.11.0-linux-amd64]# ls
bin  lib  node  out  postinstall.sh  src  typings  code-server  LICENSE.txt  node_modules  package.json  README.md  ThirdPartyNotices.txt  yarn.lock

3.配置

• code server有一个配置文件config.yaml，在启动服务前我们先进行修改一下。

[root@VM-4-7-centos ~] vim ~/.config/code-server/config.yaml
#绑定ip和端口，默认端口是8080，注意在防火墙打开对应的端口
bind-addr: 0.0.0.0:8080
auth: password
password: 123456789      #这里输入自己的密码
cert: false

• 注意：如果你选择在公网上搭建code server，请尽量不要使用默认的端口，或者将访问密码设置的复杂一些，因为一旦有其他人进入到了你的vs code网页端，就可以直接通过vs code上的终端访问你服务器上的文件，这是一件极为危险的事。

4.启动

• 进入到bin目录

    cd bin
    ./code-server

• 启动后打开浏览器，输入ip和端口，然后输入刚刚配置的密码，就可以访问了。

• 你还可以通过命令启动，如果觉得每次输入命令太长的话，还可以单独新建一个启动的脚本：

   $ /root/lsy/code-server-3.11.0-linux-amd64/bin/code-server --bind-addr 0.0.0.0:9000
   $ /root/lsy/code-server-3.11.0-linux-amd64/bin/code-server --bind-addr 0.0.0.0:9001
   这里通过命令启动了两个code server，它们同时共用一个配置文件

输入刚刚配置好的密码，就可以进入了，界面和vs code一模一样。

Tips1：

code server虽然成功通过命令运行了，但是如果终端关闭后，程序可能就停止了，我们希望它在后台继续运行。这时，就要用到screen。如果没有的话，可以通过命令安装：

   $ sudo apt-get install screen          
   或
   $ sudo yum install screen

安装完成后直接输入命令screen，这时会重新进入一个终端，在这个终端里面运行code server就好了

• 如果想要查看screen中运行的服务，可通过：

   [root@VM-4-7-centos] screen -ls
   There are screens on:
   18763.pts-0.VM-4-7-centos	(Attached)
   31774.codeserver	(Detached)
   2 Sockets in /var/run/screen/S-root.

• 也可以通过ps 命令查看当前进程，想要结束，就使用命令kill -9 <你的进程pid>来强行结束：
  

• 如果想连接到创建的终端，就输入screen -r <这里输入你的screen_id>：
  

Tips2：

如果你想搭配nginx使用，可以在nginx的配置文件的location部分加上以下配置，甚至，你还可以通过配置文件启动多个code server实现负载均衡

        location / {
              proxy_pass http://localhost:8080;
              proxy_set_header Host $host;
              proxy_set_header Upgrade $http_upgrade;
              proxy_set_header Connection upgrade;
              proxy_set_header Accept-Encoding gzip;
        }

####Tips3：

说一下插件部分，部分插件还无法在线安装，我们可以在微软官方插件库里面下载（附上链接：Extensions for Visual Studio family of products | Visual Studio Marketplace），下载好后，选择从VSIX安装即可。

以上就是这篇文章的所有内容了。