关于raspberry-pi:基于树莓派部署-codeserver

原文链接

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 服务，此时拜访 http://code.muyunyun.cn:5555 与拜访 http://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。