在浏览器上使用 vsCode 进行云开发

项目地址 -> https://github.com/coder/code-server
官方文档 -> https://coder.com/docs/code-server/latest/guide

简单介绍

为了实现在网页上进行云开发，需要用到vsCode开发的一款利器code-server，因为vsCode是基于Electron开发的，而Electron是一款跨平台的、基于Web的桌面GUI应用程序开发框架。

所以code-server就是一款把vsCode托管成Web服务来达到云开发的利器~

需要注意的点

code-server目前不支持登录账号进行配置同步。
code-server本身就是远程连接，即不支持使用ssh-remote进行套娃连接（未来有计划处理）。
部分快捷键和浏览器有冲突，要不处理vsCode，要不就处理浏览器。
使用时会获取服务器权限，暴露端口需做好安全措辞，防止意外。
综上，要在code-server进行日常开发需要大量配置，针对性场景较强（没有电脑的情况下）。

脚本安装

安装

先运行下测试，这条命令只是输出执行安装步骤，不会进行安装。

curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run

可以看到是下载了code-server_4.0.1_amd64.deb包到~/.cache/code-server/下然后继续安装就完事了。
了解了下脚本做的事，接下来直接安装就行了。

curl -fsSL https://code-server.dev/install.sh | sh

这里你会可能会遇到github被墙导致下载不辽或者下载缓慢的问题，这时配置下/etc/ssh/ssh_config中的GSSAPIAuthentication设置为no一般就能解决问题，解决不辽问题的话就只能使用科学的魔法了~

配置

vim ~/.config/code-server/config.yaml

bind-addr: 127.0.0.1:8080	# 转发ip和端口
auth: password	# 是否启用验证
password: ***	# 登录密码
cert: false	# 证书验证

启动

systemctl enable --now code-server@$USER

测试

先使用ssh转发到本地端口后，浏览器打开http://localhost:8080进入登录页面

输入密码登录后就可以看到熟悉的开始页面了~

先不急，为了让大部分快捷键可以正常使用，先把网页添加成应用

之后就开始配置你的vsCode吧~

暴露公网

官方推荐使用SSH进行转发连接，这种连接方式是最安全的，但实际情况反而浏览器使用率高，所以采用域名+https的方式来进行安全连接。

Nginx 代理转发

这里使用Nginx进行代理转发，具体配置请依自身情况进行修改。
使用certbot添加证书验证

# 安装certbot
sudo apt install -y certbot python3-certbot-nginx

# 创建证书 并自动配置 Nginx
sudo certbot --non-interactive --redirect --agree-tos --nginx -d [域名] -m [邮箱]

生成的配置应该是这样子

重载nginx应用配置

nginx -t # 测试
nginx -s reload

这时使用域名就可以直接访问vsCode了

完全卸载

通过删除应用程序目录和用户配置目录，可以完全卸载server-code。

卸载程序

sudo apt remove code-server

删除设置和数据

rm -rf ~/.local/share/code-server ~/.config/code-server

删除安装包

rm -rf ~/.cache/code-server

Sunny was born