前言

不少同学学习编程，使用的第一个代码编辑器就是Visual Studio Code。它所具备的高度可扩展性、轻量性以及自定义环境等特征，且少部分功能继承于Visual Stuidio，被大多数人作为前端或者小应用的编写工具。但对于小白来说，配置编程环境往往是开始学习敲代码之前的拦路虎，辛辛苦苦配置好的环境却又不能随身携带电脑，在陌生的PC环境下往往需要一定的学习成本来适应，所以VSCode Online将VSCode服务部署于自己的服务器上，使我们无论在哪里都可以远程登录到VSCode Server来处理临时的代码编写任务。

早在2021年，微软便悄悄发布了VSCode Web服务（vscode.dev），¹但官方发布的Web版开源代码需要复杂的步骤进行部署。目前 Coder Technologies Inc, an Austin TX company 公司开源了一个基于服务器端的 VScode -- code-server，只要服务器端配置好code-server，就可以在任何浏览器上使用VScode 。为了便于配置使用，我对原始的code-server镜像进行一些修改，比如配置了Python和C/C++的编程环境等，达到一个开箱即用的效果，并上传至DockerHub，镜像名为marobytes/code-server

安装步骤

第一步，在宝塔服务器面板安装好Docker管理器

第二步,使用Docker管理器获取镜像marobytes/code-server:latest

第三步，通过SSH连接至服务器，输入部署命令:

docker run -it -p 1024:8080 --name code -v "/home/code-server:/home/code-server" marobytes/code-server:latest

注意：1024为宿主机端口，你可以进行修改，要注意防火墙放行端口

第四步，输入 docker exec -it code /bin/bash 进入到容器终端，使用vi .config/code-server/.config.yaml修改访问密码，也可以关闭访问密码

第五步，更换apt源，输入vi /etc/apt/sources.list 注释掉原来的源，前往清华大学镜像站中的使用帮助获取Debian源，容器Debain版本为bullseye，复制进 sources.list 文件即可，然后运行sudo apt-get update 注意：容器中命令大都需要加上sudo来进行管理员运行，否则经常会发生权限不足错误

第五步，到宝塔Docker管理器中重启Docker服务，启动容器，即可通过IP:端口来访问平台

第六步，在宝塔面板中创建网站，不为其设置php版本，创建好后点击设置，在配置文件中修改Nginx配置为(以下为参考，注意修改域名为自己的，并前往域名控制台做好DNS解析)

server
{

    listen 80;

    server_name code.marobytes.cn;
    #ERROR-PAGE-START  错误页配置，可以注释、删除或修改
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END

    #PHP-INFO-START  PHP引用配置，可以注释或修改
    #include enable-php-00.conf;
    #PHP-INFO-END

    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    #include /www/server/panel/vhost/rewrite/code.marobytes.cn.conf;

    #REWRITE-END
    location / {
        proxy_pass  http://localhost:1024;
        proxy_redirect     off;
        proxy_set_header   Host             $host;          # 传递域名
        proxy_set_header   X-Real-IP        $remote_addr;   # 传递ip
        proxy_set_header   X-Scheme         $scheme;        # 传递协议
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header   Accept-Encoding  gzip;
        # code-server的websocket连接需要Upgrade、Connection这2个头部
        proxy_set_header   Upgrade          $http_upgrade;
        proxy_set_header   Connection       upgrade;
    }

    access_log  /www/wwwlogs/code.marobytes.cn.log;
    error_log  /www/wwwlogs/code.marobytes.cn.error.log;
}

建议部署Let's Encrypt SSL证书，使用DNS验证域名，自动续期，开启强制https访问

配置文件修改如下：

server
{

    listen 80;
    listen 443 ssl http2;
    server_name code.marobytes.cn;

    #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则

    #error_page 404/404.html;

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

    ssl_certificate    /www/server/panel/vhost/cert/code.marobytes.cn/fullchain.pem;
    ssl_certificate_key    /www/server/panel/vhost/cert/code.marobytes.cn/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;
    #SSL-END

    #ERROR-PAGE-START  错误页配置，可以注释、删除或修改
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END

    #PHP-INFO-START  PHP引用配置，可以注释或修改
    #include enable-php-00.conf;
    #PHP-INFO-END

    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    #include /www/server/panel/vhost/rewrite/code.marobytes.cn.conf;
    #REWRITE-END

    location / {
        proxy_pass  http://localhost:1024;
        proxy_redirect     off;
        proxy_set_header   Host             $host;          # 传递域名
        proxy_set_header   X-Real-IP        $remote_addr;   # 传递ip
        proxy_set_header   X-Scheme         $scheme;        # 传递协议
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header   Accept-Encoding  gzip;
        # code-server的websocket连接需要Upgrade、Connection这2个头部
        proxy_set_header   Upgrade          $http_upgrade;
        proxy_set_header   Connection       upgrade;
    }




    access_log  /www/wwwlogs/code.marobytes.cn.log;
    error_log  /www/wwwlogs/code.marobytes.cn.error.log;
}

好了，这下你可以直接通过绑定的域名进行访问了！部署顺利完成！

安装扩展

²code-server目前仅支持在线安装一小部分的插件，插件库不多，有些官方扩展市场上的扩展没有。不过它提供了.VSIX文件的安装方式，能够安装大部分官方插件市场上的插件。

第一步，前往官方插件市场，搜索你需要安装的扩展，这里以C/C++为例

第二步，找到右侧Download Extension按钮，选择不同服务器系统版本的.VSIX文件，根据自己的服务器系统进行下载

第三步，将VSIX文件上传至VSCode Server的文件目录，进入你的云端VSCode，在扩展页面选择以.VSIX文件安装即可

以上只是简单的部署和扩展安装指南，更多个性化操作就请大家自行摸索~

参考资料