基於樹莓派部署 code-server

牧云云發表於2021-12-08
樹莓派Server

原文連結

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。

相關文章