[ 知识是人生的灯塔，求个关注行不行! ]
0x00 前言简述
最近在逛Github的时候发现了一个66.3k star 项目code-server ，感觉实在有点相见恨晚 💝，它是一个在浏览器中运行VSCode的开源项目，让开发者随时随地的进行Coding，乃至于手机、平板上进行远程开发，给开发者带来了极大的便利。
https://mp.weixin.qq.com/s/MYFYvh-mcl5OYXnkkxRNhQ遂趁着工作休息间隙，在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
2.安装
作者最新给购买的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
温馨提示：值得注意，当$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
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
Step 4.修改完毕后，热重载 Openresty 容器使之生效进入容器执行nginx -s reload，添加DNS解析或本地硬解析后访问 https://code.weiyigeek.top 即可看到登录界面所示：
Step 5.登录 vscode-server 后即可看到如下界面，点击信任此工作空间，然后便可根据自己的喜欢进行VScode开发界面的样式设置。
Step 6.与 vscode 桌面版一样，在 code-server 容器中安装各种开发所需插件后（例如，适用于 VS Code 的中文（简体）语言包)，将可以实现远程通过Web连接到 vscode-web 进行开发, 此处作者推荐一下vscode中常用的开发插件，希望对各位开发者有帮助。
-
Chinese (Simplified) : 适用于 VS Code 的中文（简体）语言包
-
vscode-icons: Visual Studio 代码的图标
-
arkdown All in One: Markdown 所需的一切（键盘快捷键、目录、自动预览等）
-
Go : 对Visual Studio代码的Rich Go语言支持
-
Database Client：Database manager for MySQL/MariaDB, PostgreSQL, SQLite, Redis and ElasticSearch.
-
SQLite：Explore and query SQLite databases.
-
Live Server: 启动具有静态和动态页面实时重新加载功能的本地开发服务器
-
ESLint : 将ESLint JavaScript集成到VS代码中
-
wakatime：记录每天coding的时间
-
:emojisense: 自动追加添加emoji表情符号
Step 7.Web 在线版的 code-server 同样是支持终端模式，我们点击ctrl + j打开vscode终端，可以在里面执行linux命令以及各种开发语言的构建运行命令等，只不过需要注意由于使用的容器未持久化的数据将会在容器重启后丢失。
本文到此结束，更多使用技巧可参考VSCode论坛以及Github，或者UP主【全栈工程师修炼指南】公众号，你还等什么，赶紧部署远程coding吧 😆
温馨提示：作者最近10年的工作学习笔记（涉及网络、安全、运维、开发），需要学习实践笔记的看友，可添加作者账号[WeiyiGeeker]，当前价格￥199，除了获得从业笔记的同时还可进行问题答疑以及每月远程技术支持，希望大家多多支持，收获定大于付出！
如果此篇文章对你有帮助，请你将它转发给更多的人!
学习推荐 往期文章
感觉文章不错的童鞋，请帮忙转发，点 👍、在看，若有疑问的小伙伴，可在评论区留言你想法哟💬！
扫一扫
1425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
