在线代码编写环境——云端的vscode：code-server

瀚星空 vscode 实用工具 May 20, 2020

最近，vscode 提供了使用浏览器直接访问的开发云环境：Visual Studio Codespaces

然而，该环境使用微软的服务（Services）器，无法对硬件平台进行控制，并且需要付费，如果我们已经有一台自己的服务器，可以尝试搭建：code-server 这个开源的，可以在浏览器中使用的 vscode。

网络（Network）上搭建 code-server 的教程非常多，但本文重点在 code-server 部署过程中的内网穿透、https 支持，CDN 加速。得到一个公网访问的，传输加密的，静态资源加速的云端开发环境。

1. code-server 的搭建

Code-server 项目地址：Github 地址

在 Github 项目中，详细给出了 code-server 的搭建方法，还给了 docker 可以直接使用。笔者一开始是看了这篇少数派的文章：https://sspai.com/post/60456 第一次接触到 code-server。这个文章里面给出了自己手动搭建的详细过程。

在此基础（Base）之上，为了方便每次服务器开机时自动启动code-server，并使用守护进程（Progress）管理，需要为 code-server 注册启动项。

笔者使用的服务器系统是 Ubuntu Server 18.04，可以通使用 systemd 建立开机启动服务。

在 /etc/systemd/system/ 目录中，建立 code-server.service 文件，编辑其内容如下：

[Unit]
Description=code servier
After=network.target

[Service]
Type=simple
User=启动code-server的用户
Restart=on-failure
RestartSec=20s
Environment=PASSWORD="你设定的访问密码"
ExecStart=/code-server的解压路径/code-server --cert 公钥路径 --cert-key 私钥路径 --bind-addr 0.0.0.0:端口
ExecReload=/code-server的解压路径/code-server --cert 公钥路径 --cert-key 私钥路径 --bind-addr 0.0.0.0:端口

[Install]
WantedBy=multi-user.target

code-server 在启动时，会检测环境变量中 PASSWORD 变量的值，如果未定义，则会使用一个随机（Random）的密码，如果需要手动指定，需要自己设置该环境变量，在 service 文件中，可以定义进程启动时的环境变量，配置文件（Profile）中的 Environment=PASSWORD="你设定的访问密码" 对该变量进行了修改。

如果不启用 https 时，由于安全因素，会导致无法启用剪贴板，因此，这里我们对 code-server 使用的ssl公钥私钥进行了指定，这样，code-server会自动启动https支持，并当使用 http 协议访问时会自动跳转使用 https。笔者的 https 证书是在腾讯云中申请的，该证书需要同时部署在 code-server 端、nginx、以及cdn中，才能保证全程加密。

之后使用命令 systemctl enable code-server 完成开机启动的配置，并使用以下的命令控制守护进程。

# 关闭开机启动
systemctl disable code-server

# 启动服务
systemctl start code-server

# 停止服务
systemctl stop code-server

# 重启服务
systemctl restart code-server

# 查看服务状态
systemctl status code-server

2. 内网穿透

如果你的服务器本来就有公网 ip 地址，那么完全不需要该步骤，但由于笔者使用的服务器在学校的实验室里，没有公网ip地址，因此如果需要公网使用，需要配置内网穿透服务。

笔者现在使用的内网穿透工具是 frp，网络上配置frp的教程也有很多，这不是本文的重点，code-server 需要通过内网穿透工具进行端口映射，把上文中 code-server 配置的端口，映射到有公网ip地址的服务器上的一个端口，这样，访问公网服务器上的该端口，就可以访问到 code-server。

这一步完成之后，我们就可以通过公网服务器 ip 地址 + 端口，访问 code-server 服务了。

3. nginx 反向代理

使用公网ip访问，非常不优雅，而且无法正常使用 https。因此需要使用反向代理的方式，通过指定的域名，让反向代理服务器将对应的请求（Request）发送到本地对应的端口上去，这样就实现了可以直接使用域名来访问，不必再加上端口号。

下面给出了笔者的nginx配置，注意由于 code-server 使用了 ws 协议，因此需要在 nginx中建立一个 upstream （下文中的 upstream wss_code），如果直接在 server 中写死，可能在cdn进行回源时会存在问题。

upstream wss_code {
    server 127.0.0.1:内网穿透/code-server的端口 weight=1;
}
server {
    listen       80;
    server_name  域名;
    server_tokens off;
    location / {
        proxy_pass https://wss_code;      # 转发

        proxy_read_timeout  1200s;
        proxy_set_header Host $host;
        proxy_set_header X-Real_IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr:$remote_port;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;   # 升级协议头
        proxy_set_header Connection upgrade;
    }
}
server {
    listen 443 ssl;
    ssl_certificate  公钥路径;        # path to your cacert.pem
    ssl_certificate_key  私钥路径;   # path to your privkey.pem
    server_name 域名;

    # Diffie-Hellman parameter for DHE ciphersuites, recommended 2048 bits
    ssl_dhparam /usr/local/nginx/conf/ssl/dhparam.pem;

    # secure settings (A+ at SSL Labs ssltest at time of writing)
    # see https://wiki.mozilla.org/Security/Server_Side_TLS#Nginx
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:DHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:DHE-RSA-CAMELLIA256-SHA:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-SEED-SHA:DHE-RSA-CAMELLIA128-SHA:HIGH:!aNULL:!eNULL:!LOW:!3DES:!MD5:!EXP:!PSK:!SRP:!DSS';
    server_tokens off;

    location / {
        proxy_pass https://wss_code;      # 转发

        proxy_read_timeout  1200s;
        proxy_set_header Host $host;
        proxy_set_header X-Real_IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr:$remote_port;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;   # 升级协议头
        proxy_set_header Connection upgrade;
    }
}

反向代理配置好之后，就可以直接输入域名来访问 code-server 了。

4. CDN 配置

由于 code-server 在浏览器加载时，需要请求服务器端的一些资源文件，实测大约需要传输10多M资源，由于笔者的服务器只有 5M 的带宽，访问速度较慢，因此笔者使用 cdn 来尝试对 code-server 的访问进行加速。

笔者选用的 CDN 是腾讯云的 CDN，配置完需要注意这些事项：

选用与 coder-server 以及 nginx 配套的域名证书，启动 https 访问的功能，这样才会启用 code-server 的剪贴板共享
不要启用 cdn 的强制跳转 https，会导致无法使用 ws 协议，导致无法加载。
回源协议使用 https，回源 host 和 nginx 配置的反向代理域名一致。

至此，就完成了 code-server 的搭建，你真正的拥有了一个全平台可用的云端代码编写环境，还可以直接安装 vscode 应用商店中的海量扩展插件（甚至支持vim插件）。

Happy Coding!