Deploy code-server based on Raspberry Pi

Original link

code-server is the server-side program of vscode. By deploying code-server on the server, you can access vscode from the web. In turn, the following capabilities can be achieved:

• Support cross-device (Mac/iPad/iPhone, etc.) programming, while ensuring a unified multi-terminal programming environment.
• Support for submitting git code on the web side.
• Free up the weight of the backpack😁.

As for deploying the code-server on the Raspberry Pi compared to the cloud server, the overall cost is lower. If you want to replace the cloud server in the future, you only need to change the internal network mapping port, and the migration will be very convenient.

Deploy code-server on Raspberry Pi

Refer to code-server official website . On Raspberry Pi, it is recommended to use yarn method to install code-server.

In addition, pre-installation mentioned that the node.js version needs to be consistent with the version that the downloaded VSCode's Electron relies on. The code-server version downloaded by the author is code-server_3.12.0_arm64.deb, which requires node.js 14.x version. Execute the following command for pre-installation:

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

Follow the in 161b049f417a1e yarn official website to install yarn on Debian / Ubuntu systems:

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

Execute sudo vim .bashrc to write the execution path of the yarn global installation command into the .bashrc file.

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

Refer to code-server official website installation tutorial and execute the following command to install code-server:

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

The author failed to install successfully with npm install -g code-server, but finally installed with yarn global add code-server.

Edit .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

Add the following configuration in frpc.ini

For the complete configuration instructions of frpc.ini and pm2, please refer to the intranet penetration chapter.

[vscode-server-frp-muyunyun-cn-5555]
type = tcp
local_ip = 127.0.0.1
# code-server 服务运行在树莓派本地的 5555 端口上
local_port = 5555
# 对外运行在服务器端云主机 5555 端口上
remote_port = 5555

Use pm2 to restart the frpc service:

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

lsof -i:5555 in the frps server (cloud host), you can see that the server port 5555 has been occupied by the frps service.

At the same time, you can see that the code-server service has been successfully running on the public network

Use the pm2 daemon to run code-server so that related services can automatically restart when encountering an accident (such as after a power failure):

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

The author added a code host record in the domain name resolution section to semantically access the code-server service. At this time, visit http://code.muyunyun.cn:5555 and visit http://frp.muyunyun.cn:5555 The effect is the same.

Support HTTPS protocol access

After accessing the code-server service under HTTP, it was found that functional modules such as plug-ins and clipboards could not be fully used.

According to the console error message, it is speculated that these modules depend on service work. Check Setting up to play with service workers know that service work must be used in the Https protocol.

Therefore, if you want to use the code-server service completely, you need to configure the HTTPS protocol. The configuration process is recorded in the HTTPS domain name configuration chapter, which introduces the process of obtaining a free Https certificate for a domain name and making Https effective.

Support access to WebSocket in HTTPS protocol

After configuring the HTTPS service, I found that I still can't use vscode on the web side when I access the HTTPS link. The investigation found that the code-server uses WebSocket to maintain a long connection. Therefore, it is necessary to add the WebSocket configuration in the nginx configuration file.

Execute vim /etc/nginx/conf.d/www.muyunyun.cn.conf to edit, the complete nginx configuration is as follows:

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 {
    }
}

After reloading the nginx configuration, the code-server capabilities can already be used on the web side at this time.

Submit git code on the web

Log in to the Raspberry Pi and execute the following command to generate the ssh key:

# 以 github 为例
ssh-keygen -t rsa -C "[e-mail]" -f ~/.ssh/github

Then copy the content in the public key of ~/.ssh/github.pub to the clipboard and copy it to the Key text box of GitHub ssh

It has been verified that the code can be submitted to github in the web so far.