原文链接
code-server 是 vscode 的服务端程序，经过布置 code-server 在服务器，能够实现 web 端拜访 vscode。从而能够到达以下才能:
- 【直接】支撑跨设备(Mac/iPad/iPhone 等等)编程，一起确保多端编程环境统一。
- 【直接】支撑在 web 端提交 git 代码。
- 【间接】解放背包重量。
至于将 code-server 布置在树莓派上相比云端服务器好处是综合成本低，后续若要更换云服务器，只需更改内网映射端口即可，搬迁会非常快捷。
树莓派上布置 code-server
参阅 code-server 官网，在树莓派上其推荐运用 yarn 的方法来进行装置 code-server。
此外前置装置说到 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 体系中装置 yarn:
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，将 yarn 大局装置指令的履行途径写入 .bashrc 文件。
export PATH="$PATH:`yarn global bin`"
source ~/.bashrc # 使之收效
参照 code-server 官网装置教程，履行以下指令装置 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 中添加以下装备:
frpc.ini 与 pm2 的完好装备说明能够参阅内网穿透章节。
[vscode-server-frp-muyunyun-cn-5555]
type = tcp
local_ip = 127.0.0.1
# code-server 服务运转在树莓派本地的 5555 端口上
local_port = 5555
# 对外运转在服务器端云主机 5555 端口上
remote_port = 5555
运用 pm2 重启 frpc 服务:
cd /opt/frp_0.37.0_linux_arm64
pm2 restart start_frpc.sh
此刻在 frps 服务器端(云主机)中经过 lsof -i:5555 能够看到服务端端口 5555 现已被 frps 服务占据。
一起在公网中能够看到 code-server 服务已成功运转
运用 pm2 守护运转 code-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 服务，此刻拜访 code.muyunyun.cn:5555 与拜访 frp.muyunyun.cn:5555 作用是相同的。
支撑 HTTPS 协议拜访
拜访 HTTP 下的 code-server 服务，发现不能完好运用插件、剪切板等功能模块。
根据控制台报错信息，推测这些模块依赖了 service work，查阅 Setting up to play with service workers 得知, service work 确实必须在 Https 协议中运用。
因而若要完好地运用 code-server 服务，需要装备 HTTPS 协议，装备进程记录在 HTTPS 域名装备 章节中，其介绍了给域名获取免费的 Https 证书并让 Https 收效的进程。
支撑在 HTTPS 协议中拜访 WebSocket
在装备完 HTTPS 服务后，拜访 HTTPS 链接发现仍是无法在 web 端正常运用 vscode，排查发现 code-server 运用 WebSocket 以保持长衔接，因而需要在 nginx 装备文件中增加对 WebSocket 装备。
履行 vim /etc/nginx/conf.d/www.muyunyun.cn.conf 进行修改，完好的 nginx 装备如下:
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 {
}
}
从头加载 nginx 装备后，此刻现已能够在 web 端运用上 code-server 的才能。
在 web 端中提交 git 代码
登入树莓派端，履行如下指令生成 ssh 密钥:
# 以 github 为例
ssh-keygen -t rsa -C "youremail@example.com" -f ~/.ssh/github
然后将 ~/.ssh/github.pub 公钥中的内容复制到剪贴板，拷贝到 GitHub ssh 的 Key 文本框中。
经验证，至此现已能够在 web 中提交代码到 github。
