什么是 code-server

可以通过端口访问在线的 vscode,从而实现远程编程(比如在 ipad 编程)。

树莓派上部署 code-server

参考 code-server 官网描述,其推荐使用 yarn 的方式来安装。

前置安装,node.js 版本需要与所下载的 VSCode's Electron 一致。

笔者下载的 code-server 版本为 code-server_3.12.0_arm64.deb,其需要 node.js 14.x 版本。

sudo apt-get install -y \
build-essential \
pkg-config \
python3
npm config set python python3

执行如下命令,安装 yarn。参考 Debian / Ubuntu 安装

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install yarn
yarn --version // 1.22.15

执行 sudo vim .bashrc 编辑 bashrc,写入 yarn 全局安装命令的执行路径。

export PATH="$PATH:`yarn global bin`"
source ~/.bashrc # 使之生效

安装 code-server,执行如下命令:

yarn global add code-server
code-server --version # 3.12.0

笔者使用 npm install -g code-server 安装,无法成功。最终使用 yarn global add code-server 安装成功。

编辑 .config/code-server/config.yaml

sudo vim .config/code-server/config.yaml
bind-addr: 127.0.0.1:5555
auth: password
password: xxxxxxxxx
cert: false
# 启动 code server
code-server

frpc.ini 中添加以下配置:

[vscode-server-frp-muyunyun-cn-5555]
type = tcp
local_ip = 127.0.0.1
local_port = 5555
remote_port = 5555

重启 frpc 服务:

cd /opt/frp_0.37.0_linux_arm64
pm2 restart start_frpc.sh

此时在 frps 服务器端(云主机)中通过 lsof -i:5555 可以看到服务端端口 5555 已经被 frps 服务占据。

同时在公网中可以看到 code server 服务已成功运行

使用 pm2 守护运行 vscode server 服务以让相关服务能自动重启(比如断电重启系统后):

cd /opt/frp_0.37.0_linux_arm64
sudo touch start_code_server.sh
sudo chmod 777 start_code_server.sh
sudo echo "code-server" > start_code_server.sh
pm2 start /opt/frp_0.37.0_linux_arm64/start_code_server.sh
pm2 save

笔者在域名解析处新增 code 主机记录以语义化访问 code server 服务,此时访问 http://code.muyunyun.cn:5555 与访问 http://frp.muyunyun.cn:5555 效果是相同的。

支持 Https 协议访问

由于没有支持 Https,code-server 中的剪切板、插件等功能都不能解锁,同时控制台报了与 service work 相关的报错(参考 Setting up to play with service workers, service work 必须依赖 https)。

因此在 code-server 服务完全可用之前,需要支持 Https 协议,读者可以参考 HTTPS 域名配置 一节,其介绍了给域名获取免费的 Https 证书并让 Https 生效的过程。

支持在 Https 协议中访问 Web Socket

在配置完 HTTPS 服务后,访问相关链接还是无法使用,因为 code-server 是基于 Web Socket 来保持长连接的,因此还需要在 nginx 对 websocket 的流量作相关的配置。

执行 vim /etc/nginx/conf.d/www.muyunyun.cn.conf,完整配置如下:

map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
upstream code_muyunyun_cn {
server 127.0.0.1:5555;
}
server {
server_name code.muyunyun.cn;
listen 80;
listen [::]:80;
rewrite ^(.*)$ https://$host$1 permanent;
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name code.muyunyun.cn;
root /usr/share/nginx/html/code.muyunyun.cn;
location / {
proxy_pass http://code_muyunyun_cn;
proxy_set_header Host $host:443;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# support websocket
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
ssl_certificate "/etc/nginx/ssl/code.muyunyun.cn/fullchain.cer";
ssl_certificate_key "/etc/nginx/ssl/code.muyunyun.cn/code.muyunyun.cn.key";
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 10m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}

此时实现了在公网中使用使用 https 访问 code-server。

code-server 同步 ssh

登入树莓派端,输入

ssh-keygen -C "your email" -f ~/.ssh/github

将 ~/.ssh/github.pub 公钥中的内容复制到剪贴板,拷贝到 GitHub ssh 的 Key 文本框中。

执行以下命令测试是否认证成功

ssh -T git@github.com
# Hi github! You've successfully authenticated, but GitHub does not provide shell access.