用浏览器随时访问VSCode，集中管理代码片段

2025/10/18

这两天决定重新启用服务器上的应用 code-server，用来整理工作中常用的代码和命令，把散乱在各处的片段集中到一起，电脑、手机上都可以通过浏览器访问。

Run VS Code on any machine anywhere and access it in the browser. （在任何地方的任何机器上运行 VS Code，并在浏览器中访问。）

效果图：

安装

root@meta-unicorn-2:~/coder# pwd
/root/coder
root@meta-unicorn-2:~/coder# cat docker-compose.yaml
services:
  code-server:
    image: codercom/code-server:latest
    container_name: code-server
    ports:
      - "8090:8080"
    environment:
      - PASSWORD=xxx
    volumes:
      - ~/code-server-data:/home/coder
    restart: unless-stopped


root@meta-unicorn-2:~/coder# docker compose up -d
[+] Running 2/2
 ✔ Network coder_default  Created                                                                                                                                                                                0.1s
 ✔ Container code-server  Started                                                                                                                                                                                0.5s

root@meta-unicorn-2:~# docker ps -a |head -2
CONTAINER ID   IMAGE                              COMMAND                  CREATED         STATUS                   PORTS                                         NAMES
f4bc53deff9e   codercom/code-server:latest        "/usr/bin/entrypoint…"   3 hours ago     Up 3 hours               0.0.0.0:8090->8080/tcp, :::8090->8080/tcp     code-server

Cloudflare 设置域名解析

nginx 设置反向代理

vi /etc/nginx/conf.d/code.conf

server {
    listen 443 ssl;
    listen [::]:443 ssl;

    server_name code.xxx.com;

    ssl_certificate /home/rjin/cert/cf.pem;
    ssl_certificate_key /home/rjin/cert/cf.key;
    ssl_session_timeout 1d;
    ssl_session_cache shared:MozSSL:10m;
    ssl_session_tickets off;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384';
    ssl_prefer_server_ciphers off;

    location / {
        proxy_pass http://127.0.0.1:8090;
        proxy_redirect off;

        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        proxy_set_header Accept-Encoding gzip;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

    }
}


sudo nginx -s reload

访问 https://code.xxx.com 验证一下。

设置 Cloudflare Zero Trust

访问网页前强制登录，在 code-server 自带的访问密码之上多一层访问控制。

只允许自己的邮箱可以验证。

验证方式是一次性验证码。

效果如下：

设置类 macOS 应用

点击Chrome地址栏上的小图标。

这样就和VSCode app样子很像了。

Alfred 设置快捷键

用option+k可以快速调出界面。

数据定期备份

# 服务器上

cat /root/backup_codeserver.sh
#!/bin/bash
rsync -a /root/code-server-data/ /home/rjin/code-server-data/
chown -R rjin:rjin /home/rjin/code-server-data

# cron job
10 15 * * * /root/backup_codeserver.sh > /root/backup_codeserver.log 2>&1

# 家里 Mac mini 上

cat /Users/jinhuaiyao/Nextcloud/Config/Mac_Script/backup_codeserver.sh
IP="104.xx.xx.xx"
/usr/bin/rsync -avr -e "ssh -p 10086" \
    --exclude='.config' \
    --exclude='.local' \
    --exclude='.cache' \
    rjin@${IP}:/home/rjin/code-server-data/ \
    /Users/jinhuaiyao/Nextcloud/Backup/backup_codeserver/

# cron job
31 1 * * * /bin/bash /Users/jinhuaiyao/Nextcloud/Config/Mac_Script/backup_codeserver.sh > /Users/jinhuaiyao/Log/backup_codeserver.txt 2>&1