0x00 前言简述
最近在逛Github的时候发现了一个66.3k star 项目code-server ,感觉实在有点相见恨晚 💝,它是一个在浏览器中运行VSCode的开源项目,让开发者随时随地的进行Coding,乃至于手机、平板上进行远程开发,给开发者带来了极大的便利。
遂趁着工作休息间隙,在QNAP NAS中部署了code-server(PS: 当然你也可以安装在VPS或者服务器平台上),并通过 openresty 反向代理到公网,此处UP简单的使用一下下,同时记录了部署及使用过程。
什么是 code-server?
在任何位置的任何机器上运行VS代码,并在浏览器中访问它。
为何使用 code-server?
参考|Reference
官网:https://coder.com
项目: https://github.com/coder/code-server
试用:https://github.dev/coder/code-server
作者最新给购买的QNAP 464C2机器(性价比超高的NAS)增加了内存,所以想到直接在QNAP NAS中安装了code-server,一来保障自己代码的存储安全性,二来方便穿透映射到外部,这样就可以在公司/家中随时随地疯狂的Code了 💻, 当然你也可以直接在你云服务器上进行安装部署,前提是安装了 Docker 环境以及可以正常的外网通信。
说得再多,不如实践,下面就跟着作者一步一步的部署配置吧。
Step 1.使用SSH连接工具登录到QNAP 464C2 的SSH终端,作者贴出两种部署方法请自行选择,执行如下命令:
# 创建持久化目录
[manager@QNAP-NAS code-server]$ mkdir -vp /share/Container/code-server/{.local,.config,project}
[manager@QNAP-NAS code-server]$ chown -R manager:everyone /share/Container/code-server
[manager@QNAP-NAS code-server]$ ls -alh
# total 20K
# drwxr-xr-x 5 manager everyone 4.0K 2024-06-21 12:56 ./
# drwxrwx--- 13 admin administrators 4.0K 2024-06-25 11:29 ../
# drwxr-xr-x 2 manager everyone 4.0K 2024-06-21 12:56 .config/
# drwxr-xr-x 2 manager everyone 4.0K 2024-06-21 12:56 .local/
# drwxr-xr-x 2 manager everyone 4.0K 2024-06-21 12:56 project/
# 或者一条命令创建容器
docker run -d -it --name code-server -p 3002:8080 -v "/share/Container/code-server/.local:/home/coder/.local" -v "/share/Container/code-server/.config:/home/coder/.config" -v "/share/Container/code-server/project:/home/coder/project" -u "$(id -u):$(id -g)" -e "DOCKER_USER=$USER" codercom/code-server:latest
或者在QNAP QTS桌面使用容器工作站应用来部署 docker-compose.yaml
配置清单,界面部署后需再次点击启动容器(PS:特别注意,指定的用户名以及uid,我这边是 manager (uid:1000),请根据你实际用户进行更改!)
# 创建网络(此处作者由于在部署 openresty 时已经创建此桥接网络,若你没有创建则需要创建一个)
docker network create --driver bridge --subnet 172.25.0.0/24 --gateway 172.25.0.1 appnet
# 7be4b7f26e819c17eb8ba8c19aeb3423d741d5003697f322907530cf898c7f82
# 命令方式
tee /share/Container/code-server/docker-compose.yaml <<EOF
version: '3.9'
services:
vscode-server:
container_name: code-server
image: registry.cn-hangzhou.aliyuncs.com/weiyigeek/code-server:latest
user: "1000:1000"
ports:
- 3002:8080
environment:
- TZ=Asia/Shanghai
- DOCKER_USER=manager
volumes:
- /share/Container/code-server/.local:/home/coder/.local
- /share/Container/code-server/.config:/home/coder/.config
- /share/Container/code-server/project:/home/coder/project
networks:
- appnet
networks:
appnet:
external: true
EOF
# 创建并启动容器
docker-compose up -d
weiyigeek.top-QNAP桌面部署code-server图
温馨提示:值得注意,当$USER
为root时,其配置和数据持久化的映射容器内部目录为/root/.local
、/root/.config
、以及/home/coder/project
, 反之设置为/home/coder/
目录打头即可。
Step 2.部署完毕后查看code-server
容器日志验证是否部署成功, 并且查看生成的随机登录密码,若成功将如下图所示:
cat /home/coder/.config/code-server/config.yaml
bind-addr: 127.0.0.1:8080
auth: password
password: 387775100f6975930dc2424b
cert: false
weiyigeek.top-code-server容器日志和登录密码图
Step 3.然后参照作者此篇文章《玩转NAS | 打造一个动态网关,部署OpenResty - Nginx与Lua的强强联合》(PS: 可在公众号中搜寻哟!)在QNAP NAS中部署支持 http/https 访问的 Openresty Web代理服务器,并进行反代 code-server 服务,配置如下:
tee /share/Container/gateway-web/conf.d/code.conf <<'EOF'
server {
listen 80;
listen 443 ssl;
http2 on;
server_name code.weiyigeek.top;
charset utf-8;
# SSL
ssl_certificate /etc/nginx/cert/weiyigeek.top.cer;
ssl_certificate_key /etc/nginx/cert/weiyigeek.top.key;
ssl_session_cache shared:MozSSL:10m;
ssl_session_timeout 1d;
ssl_protocols TLSv1 TLSv1.1 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:ECDHE:ECDH:AES:HIGH:EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:!NULL:!aNULL:!eNULL:!EXPORT:!PSK:!ADH:!DH:!DES:!MD5:!RC4;
ssl_prefer_server_ciphers on;
# HSTS ( http 转 https )
add_header Strict-Transport-Security "max-age=15768000;includeSubDomains;preload" always;
# CORS
add_header Access-Control-Allow-Origin 'https://blog.weiyigeek.top';
add_header Access-Control-Allow-Methods 'GET,POST,OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
# XXS-Protection
add_header X-XSS-Protection "1; mode=block";
location / {
proxy_pass http://10.10.107.250:3002;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Accept-Encoding gzip;
proxy_buffering off;
proxy_cache off;
send_timeout 300;
proxy_connect_timeout 300;
proxy_send_timeout 300;
proxy_read_timeout 300;
}
}
EOF
weiyigeek.top-配置域名访问code-server图
Step 4.修改完毕后,热重载 Openresty 容器使之生效进入容器执行nginx -s reload
,添加DNS解析或本地硬解析后访问 https://code.weiyigeek.top
即可看到登录界面所示:
weiyigeek.top-vscode-web进入界面图
Step 5.登录 vscode-server 后即可看到如下界面,点击信任此工作空间,然后便可根据自己的喜欢进行VScode开发界面的样式设置。
weiyigeek.top-vscode-web首页界面图
Step 6.与 vscode 桌面版一样,在 code-server 容器中安装各种开发所需插件后(例如,适用于 VS Code 的中文(简体)语言包),将可以实现远程通过Web连接到 vscode-web 进行开发, 此处作者推荐一下vscode中常用的开发插件,希望对各位开发者有帮助。
weiyigeek.top-使用VScode在线写笔记图
Step 7.Web 在线版的 code-server 同样是支持终端模式,我们点击ctrl + j
打开vscode终端,可以在里面执行linux命令以及各种开发语言的构建运行命令等,只不过需要注意由于使用的容器未持久化的数据将会在容器重启后丢失。
weiyigeek.top-使用VScode终端图
本文到此结束,更多使用技巧可参考VSCode论坛以及Github,或者UP主【全栈工程师修炼指南】公众号,你还等什么,赶紧部署远程coding吧 😆
温馨提示:作者最近10年的工作学习笔记(涉及网络、安全、运维、开发),需要学习实践笔记的看友,可添加作者账号[WeiyiGeeker],当前价格¥199,除了获得从业笔记的同时还可进行问题答疑以及每月远程技术支持,希望大家多多支持,收获定大于付出!