The original link

Code-server is a server program of VScode. After code-server is deployed on the server, VScode can be accessed on the Web. Thus, the following abilities can be achieved:

  • [Direct] Support cross-device (Mac/iPad/iPhone, etc.) programming, while ensuring the unity of multi-terminal programming environment.
  • [Direct] Support to submit Git code on the Web.
  • [Indirect] Liberate backpack weight 😁.

As for the advantage of deploying code-Server on Raspberry PI compared with the cloud server, the overall cost is low. If you want to replace the cloud server later, you only need to change the Intranet mapping port, which will be very convenient for migration.

Deploy code-Server on raspberry PI

Refer to the official website of code-Server. On raspberry PI, it is recommended to install code-server in YARN mode.

In addition, the node.js version mentioned in the pre-installation should be the same as the version that VSCode’s Electron depends on. The code-server version downloaded by the author is code-server_3.12.0_arm64.deb, which requires Node.js 14.x. Run the following command to install:

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

Install YARN in Debian or Ubuntu as described on the Yarn official website:

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. The list sudo apt update && sudo apt install yarn yarn - version / / 1.22.15Copy the code

Run sudo vim. bashrc to write the execution path of the yarn global installation command to the. Bashrc file.

export PATH="$PATH:`yarn global bin`"
source ~/.bashrc # put into effect
Copy the code

Refer to the installation tutorial of code-server website and run the following command to install code-server:

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

After NPM install -g code-server is used, the installation fails. Yarn Global Add code-server is successfully installed.

Edit the config/code – server/config. Yaml

sudo vim .config/code-server/config.yaml
Copy the code
Bind-addr: 127.0.0.1:5555 auth: password password: XXXXXXXXX cert:false
Copy the code
# start code - server
code-server
Copy the code

Add the following configuration in frpc.ini:

For detailed configurations of FRPC. ini and PM2, see section Intranet Penetration.

[vscode-server-frp-muyunyun-cn-5555]
type = tcp
local_ip = 127.0.0.1
# code-server service runs on port 5555 local to raspberry PI
local_port = 5555
Run externally on port 5555 of the cloud host on the server
remote_port = 5555
Copy the code

Restart the FRPC service using pM2:

cd/ opt/frp_0. 37.0 _linux_arm64 pm2 restart start_frpc. ShCopy the code

In this case, run lsof -I :5555 on the FRPS server (cloud host) to view that the server port 5555 is occupied by the FRPS service.

In addition, you can view that the code-server service is running successfully on the public network

Run code-server with pM2 daemon to enable the related services to restart automatically in case of unexpected (such as 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
Copy the code

The author added the code host record in the domain name resolution office to access code-server service semantically. At this time, visiting code.muyun.cn :5555 and visiting frp.muyunyun.cn:5555 have the same effect.

HTTPS access is supported

When accessing the CODE -server service under HTTP, it is found that functional modules such as plug-ins and clipboards cannot be used completely.

According to the console error message, it is speculated that these modules rely on service work. According to Setting Up to Play with Service workers, service work must be used in Https protocol.

Therefore, to fully use the code-server service, you need to configure HTTPS. The configuration process is described in HTTPS Domain Name Configuration, which describes how to obtain a free HTTPS certificate for a domain name and make HTTPS take effect.

WebSocket can be accessed using HTTPS

After configuring the HTTPS service, vscode cannot be normally used on the Web side when accessing the HTTPS link. It is found that code-server uses WebSocket to maintain a long connection. Therefore, the WebSocket configuration needs to be added to the nginx configuration file.

Perform vim/etc/nginx/conf. D/www.muyunyun.cn.conf editor, 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://$hostThe $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 websocketProxy_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 {
    }
}
Copy the code

After reloading the Nginx configuration, the code-Server capability is now available on the Web side.

Commit git code on the Web side

Log in to raspberry PI and run the following command to generate an SSH key:

# Take Github for example
ssh-keygen -t rsa -C "[email protected]" -f ~/.ssh/github
Copy the code

Then copy the contents of the ~/.ssh/github. Pub public Key to the clipboard and to the Key text box of github SSH.

As it turns out, you can now submit code to Github from the Web.