VSCode 示意图

看这里，这是什么？桌面版的VScode?可惜不是...

可惜是网页版的

使用code-server可以不用安装VSCode，只要有浏览器，随时随地写代码！
而且很有B格，功能和正常的VSCode不分上下，如插件、调试
不过我们需要在code-server的基础上优化亿下，实现完全伪装VSCode

1.安装code-server

注意：强烈不建议使用root用户启动code-server！
打开下载界面找到 deb包并获取链接

按照图示安装，输入以下命令即可，如指定www-data启动

wget -O cs.deb "最新code-server链接"
sudo dpkg -i cs.deb
systemctl enable code-server@www-data

强烈建议提前配置好code-server，输入sudo -u www-data nano ~/.config/code-server/config.yaml，填写这些配置

bind-addr: "127.0.0.1:8080"
auth: password
password: 输入你想要的密码
cert: false

最后启动code-server，可以使用curl测试连通性

systemctl start code-server@www-data
curl localhost:8080 -v

2.nginx配置

很可惜，默认code-server无法兼顾HTTP与HTTPS，且自带的PWA模式与VSCode很不像
于是使用nginx代理+劫持可以做到，这一步需要一些web知识
创建一个 启用了HTTPS server块中，输入这些：

location / {
    proxy_pass                          http://127.0.0.1:8080/;
    proxy_http_version                  1.1;
    proxy_set_header Origin             "http://127.0.0.1:8080";
    proxy_set_header Upgrade            $http_upgrade;
    proxy_set_header Connection         upgrade;
    proxy_set_header Accept-Encoding    gzip;
}

location /_static/src/browser/media/ {
    alias /www/static/vscode/;
}

location = /manifest.json {
    alias "/www/static/vscode/manifest.json";
}

必须是HTTPS才可以安装到桌面
由于默认code-server的源检查比较严格，需要proxy_set_header Origin "http://127.0.0.1:8080";欺骗code-server，否则会显示错误
code-server前后端交互使用WebSocket，因此需要proxy_http_version 1.1;，强烈建议加入到http块中

在/www/static/vscode/中需要这些必须文件
我已经打包好了，点击下载
当然你可以自己定制，我也是自己做的

www-data@izCloud:/ $ tree /www/static/vscode 
/www/static/vscode
├── favicon.ico
├── manifest.json
├── pwa-icon-192.png
├── pwa-icon-512.png
└── templates.png

1 directory, 5 files

到这里，重载nginx，打开HTTPS网页就可以看到右上角冒出的安装应用标志啦，happy coding...

本文由 zlh 创作，采用知识共享署名4.0 国际许可协议进行许可。
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。

将VSCode随身携带--code-server

1.安装code-server

2.nginx配置