在线 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-8-15-centos ~] uname -a
Linux VM-8-15-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-8-15-centos wwwroot] tar -zxvf code-server-3.11.0-linux-amd64.tar.gz
#进入该目录
[root@VM-8-15-centos wwwroot] cd code-server/
#查看有哪些文件
[root@VM-8-15-centos code-server]# 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-8-15-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.启动

cd bin
./code-server

启动后打开浏览器，输入 ip 和端口，然后输入刚刚配置的密码，就可以访问了。
你还可以通过命令启动，如果觉得每次输入命令太长的话，还可以单独新建一个启动的脚本：

1.进入到 code-server 目录，打开 package.json
在配置文件中写入"start": "./code-server"
```
npm start
```

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

Tips1

code server 虽然成功通过命令运行了，但是如果终端关闭后，程序可能就停止了，我们希望它在后台继续运行。这时，就要用到 pm2（前提是已经配置 package.json，同时安装 pm2）

# 启动
pm2 start npm --name code.huxinfeng.com -- run start
# 更新
pm2 update code.huxinfeng.com -- run start

Tips2

这样只能通过 ip 访问 code 编辑器，如果要域名访问，需要配置 proxy 代理

server {
    server_name  code.huxinfeng.com;
    listen       443 ssl;
    listen       80;
    ssl_certificate     code.huxinfeng.com.pem;
    ssl_certificate_key code.huxinfeng.com.key;
    location / {
        proxy_pass https://127.0.0.1:8080;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
    }
    }

访问, 输入密码 123456789
https://code.xxx.com