code-server,部署在服务器端的VS Code

发布于 2021-09-14  23 次阅读


code-server,部署在服务器端的VS Code

来自微软的Visual Studio Code(以下简称VS Code或VSC)是一款强大的代码编辑器。而code-server就是部署在服务器上的、可以在任何有网络的地方访问的VS Code,并且保留原有的绝大多数功能。
有什么用?
1. 在具有一致开发环境的任何设备上编写代码
2. 使用云服务器加速测试、编译、下载等
3. 在旅途中延长电池寿命;所有密集型任务都在您的服务器上运行

项目地址|GitHub

cdr/code-server的README中, 提供了两份部署指南, 一份是用于部署在AWS等云服务的deploy, 另一份则是我们要用的用于部署在本地的quickstart.

对于确实是在本地用的人而言, 这就足够了, 但是考虑到要长期运行在服务器端并且需要远程访问, 需要做一些手脚:

  1. 服务器端要架不止一个code-server, 所以端口不能全用默认的8080.
  2. 用http远程访问存在巨大隐患, 但是code-server自带的SSL加密在某次更新后失效了, 所以要用反向代理。

不过反代也是安装完后要做的事情,我们先来看看怎么安装。

安装

可以使用多种方式安装,例如
1. 使用项目提供的脚本进行安装
2. 手动安装指南[本文使用该方式]
3. 使用项目提供的的一键式按钮和指南将代码服务器部署到云提供商

通过二进制文件安装

指南中有大多数系统可用的安装方式,本文架设时使用linux-amd64-CentOS8

大致可以分为三步

  1. 在releases page上找到对应架构和系统的二进制包并下载.
  2. 解包然后运行二进制文件(./code-server).
  3. 在浏览器中通过localhost:8080来访问.

通过wget/curl直接在命令行界面下载到服务器,并且解压:

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

tar zxvf code-server-3.11.1-linux-amd64.tar.gz
mv code-server-3.11.1-linux-amd64 vscode
cd vscode

ll

文件夹内包含以上文件。设置密码到环境变量,其中A123456.可以更改,第一次运行带上参数,用以指定端口、可访问IP、密码passsword或none

export PASSWORD="A123456."
./code-server --port 8008 --host 0.0.0.0 --auth password

8008是端口,可以自己修改,注意不要与其他应用冲突
0.0.0.0是代表可以被所有ip访问
password指密码,为noone时设置为无密码

到这里,如果你的服务器面板(如宝塔)和服务商的防火墙端口设置打开的话你就可以在浏览器通过
服务器IP:端口的形式来访问你的Code-Server了

如果你不想每次启动code-server都输入一长串的话你可以直接修改配置cd ~/.config/code-server

bind-addr: 127.0.0.1:8008
auth: password
password: A123456.
cert: false

然后你就可以使用./code-server进行启动了

反向代理

如果你用宝塔面板的话可以直接copy走改一下,如果不是的话建议看参考资料。

不要直接使用宝塔自带的反向代理功能,我用的有问题。直接修改网站的配置文件,如果通过反代访问出现输入密码后白屏、黑屏则是因为你的配置文件有误,建议对照修改。

将所有8008替换为你设置的端口,所有domainName替换为你的域名

server
{
    listen 80;
    listen [::]:80;
    listen 443 ssl http2;
    server_name domainName;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/domainName;

    if ($server_port !~ 443){
        rewrite ^(/.*)$ https://$host$1 permanent;
    }

    ssl_certificate    /www/server/panel/vhost/cert/domainName/fullchain.pem;
    ssl_certificate_key    /www/server/panel/vhost/cert/domainName/privkey.pem;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    add_header Strict-Transport-Security "max-age=31536000";
    error_page 497  https://$host$request_uri;

    include enable-php-00.conf;

    include /www/server/panel/vhost/rewrite/domainName.conf;

    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }

    location ~ \.well-known{
        allow all;
    }

    location / { # 这一段是关键,最好删除其它不必要的
      proxy_pass http://localhost:8008/;
      proxy_set_header Host $host;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection upgrade;
      proxy_set_header Accept-Encoding gzip;
  }

    access_log  /www/wwwlogs/domainName.log;
    error_log  /www/wwwlogs/domainName.error.log;
}

参考资料

  1. blibili-开发环境统统上云?iPad编程不是梦!(一): Code-Server的配置
  2. csdn-安装Code-server并配置用于多用户的反向代理(Nginx)
  3. github-项目地址
  4. cnblog-Code-server搭建web IDE

蔚蓝天空上的无垠,盲目痴愚后的泯然