部署code-server远程vscode网页，在浏览器上写代码！
参考文档 https://developer.aliyun.com/article/876967#slide-7
本文首发于 慕雪的寒舍
注意，这不是在linux系统上安装vscode软件（和windows一样的vscode客户端）
开源仓库 https://github.com/coder/code-server
code-server是一个社区项目（非微软官方）其作用是在你的linux主机（云服务器）上部署一个可以在浏览器上访问的vscode页面，类似官方的vscode.dev
微软官方推出的vscode网页版 https://vscode.dev/
它可以通过浏览器的api访问你电脑上的本地文件，此时浏览器就是一个vscode客户端
code-server同理，其访问的是你linux服务器上的文件，作用类似于vscode插件remote ssh，让我们可以用浏览器，在任何电脑、平板上进行远程开发，无须下载vscode客户端或者ssh软件！
微软官方确实有一个vscode-server，在官网可以下载。我测试了之后，发现它是打了一个隧道，通过vscode.dev的子域名访问，会转发到你的主机上。
在我这里的测试，发现压根连不上微软的服务器。想想其实也很正常，因为vscode-server的文档页面连中文都没有，再加上微软的服务器，国内用不了也是意料之中
截至本文创作时间23-03-09，code-server的最新版本是4.10.1，可以用下面的命令获取到linux下的安装包
wget https://github.com/cdr/code-server/releases/download/v4.10.1/code-server-4.10.1-linux-amd64.tar.gz
如果上面这个命令你无法访问，可以去github的releases里面手动下载安装包
https://github.com/coder/code-server/releases/
我的系统是amd64，即x86架构。在github里面也是找linux amd64的包进行安装
$ uname -a
Linux 1c2261732150 5.10.120 #0 SMP Fri Jan 6 08:05:47 2023 x86_64 x86_64 x86_64 GNU/Linux
如果你使用的是树莓派等设备，请用uname -a确认你的系统架构，并下载对应的包
github的release下载慢，可以用下面这个网站加速（用迅雷下，速度起飞）
https://doget.nocsdn.com/#/
下载完成后，将压缩包用xftp传输到服务器上
使用下面的命令解压刚刚下载好的压缩包
tar -zxvf code-server-4.10.1-linux-amd64.tar.gz
给解压出来的文件夹改个短名字vsc
mv code-server-4.10.1-linux-amd64 vsc
cd进入这个文件夹
cd vsc
ls -l，基本文件如下
total 792
drwxr-xr-x 8 muxue muxue 4096 Mar 4 12:26 .
drwx------ 6 muxue muxue 4096 Mar 9 22:42 ..
drwxr-xr-x 2 muxue muxue 4096 Mar 4 12:26 bin
drwxr-xr-x 3 muxue muxue 4096 Mar 4 12:26 lib
-rw-r--r-- 1 muxue muxue 1084 Mar 3 17:13 LICENSE
drwxr-xr-x 243 muxue muxue 12288 Mar 4 12:26 node_modules
-rw-r--r-- 1 muxue muxue 480100 Mar 4 12:26 npm-shrinkwrap.json
drwxr-xr-x 5 muxue muxue 4096 Mar 3 17:13 out
-rw-r--r-- 1 muxue muxue 5235 Mar 4 12:24 package.json
-rwxr-xr-x 1 muxue muxue 4877 Mar 3 17:13 postinstall.sh
-rw-r--r-- 1 muxue muxue 3056 Mar 3 17:13 README.md
drwxr-xr-x 3 muxue muxue 4096 Mar 3 17:14 src
-rw-r--r-- 1 muxue muxue 180977 Mar 3 17:13 ThirdPartyNotices.txt
drwxr-xr-x 2 muxue muxue 4096 Mar 3 17:14 typings
-rw-r--r-- 1 muxue muxue 76688 Mar 4 12:26 yarn.lock
直接进入bin文件夹，我们需要用的可执行文件就在里头
$ ls
code-server
这个code-server就是我们要的可执行文件
export PASSWORD="配置一个密码"
code-server --port 8888 --host 0.0.0.0 --auth password
上面这个命令，启动之后，会创建一个端口为8888的web服务，此时使用ip:8888的方式，应该就可以访问到你的code-server服务了！
[2023-03-09T14:52:07.081Z] info Wrote default config file to ~/.config/code-server/config.yaml
[2023-03-09T14:52:07.516Z] info code-server 4.10.0 ac1fba8bde0c3f29bf6bc27d3d7d75cb2390a7c2
[2023-03-09T14:52:07.517Z] info Using user-data-dir ~/.local/share/code-server
[2023-03-09T14:52:07.532Z] info Using config file ~/.config/code-server/config.yaml
[2023-03-09T14:52:07.532Z] info HTTP server listening on http://0.0.0.0:8888/
[2023-03-09T14:52:07.532Z] info - Authentication is enabled
[2023-03-09T14:52:07.532Z] info - Using password from $PASSWORD
[2023-03-09T14:52:07.532Z] info - Not serving HTTPS
出现下面的页面，那就是安装成功了！输入你刚刚设置的密码，就可以像使用vscode一样使用code-server了！
首次启动了之后，会在你的用户路径下生成一个.config/code-server文件夹，里面有一个config.yaml
$ ls .config/code-server
config.yaml
打开这个文件，可以在里面配置code-server的密码，以及https访问。其余的配置项我还没有关注过，可以去看看github上的文档
bind-addr: 127.0.0.1:8080
auth: password
password: 64f1881b805917a449d80874
cert: false
默认的密码巨长，改成你自己的即可。在这里还可以修改默认绑定的ip和端口，后续启动code-server，就不需要手动指定了，直接运行即可
./code-server
nohup运行code-server有一点问题，所以要用tmux
如果没有这个软件，先安装
sudo yum install tmux
创建一个新会话，你可以理解为这是一个脱离于bash的独立shell页面，即便当前bash退出了，code-server也不会退出
tmux new -s vscode_online
开启新会话后，进入vsc的bin目录，启动code-server，命令是不变的
./code-server
随后直接关掉当前bash，此时就已经实现了code-server的后台运行
# 接入会话
tmux a -t vscode_online
# 结束会话
tmux kill-session -t vscode_online
我在采用nginx转发的时候，遇到了这个问题
个人猜测，这大概率是因为我在config.yaml里面配置了code-server的https导致的
cert: false # 关闭https
将cert修改回false，再次测试，发现还是有这个问题！
实际上，如果你进行了nginx转发，并不需要配置code-server的https
保持默认的http即可
后来发现是我的nginx转发设置有问题，正确的转发配置如下
location / {
proxy_pass http://127.0.0.1:8888;
proxy_set_header Host $host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header Accept-Encoding gzip;
}
下面给出一个nginx的https的完整配置文件！
server {
listen 443 ssl;
server_name www.example.com; # 域名
# 注意证书文件位置，是从/etc/nginx/下开始算起的
ssl_certificate cert/example.com.crt;
ssl_certificate_key cert/example.com.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
client_max_body_size 1024m;
location / {
proxy_set_header Host $host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header Accept-Encoding gzip;
# 当下是直接用yum安装的nginx，可以直接用本地ip访问
# 如果是docker安装的nginx，需要改为公网ip
proxy_pass http://127.0.0.1:8888;
}
}
# 强制重定向http -> https
server {
listen 80; # 监听80端口
server_name www.example.com; # 域名
#把http的域名请求转成https
return 301 https://$host$request_uri;
}
由于code-server是一个第三方项目，所以一些官方的插件（如pylance）直接在code-server的插件商店里面搜是没有的
我们需要去微软的vscode官网上下载插件的VSIX文件，使用本地文件的方式进行安装
https://marketplace.visualstudio.com/VSCode
不过，pylance用这个办法依旧无法安装。看来有些插件只有官方的vsc才能安装
如果你用过vscode的remote-ssh插件连过你这个服务器，用户目录下面会有两个文件夹
.vsc
.vscode-server
这两个文件夹是vscode的插件remote-ssh生成的，和本文安装的code-server无关！
tmux new 创建默认名称的会话（在tmux命令模式使用new命令可实现同样的功能，其他命令同理，后文不再列出tmux终端命令）
tmux new -s mysession 创建名为mysession的会话
tmux ls 显示会话列表
tmux a 连接上一个会话
tmux a -t mysession 连接指定会话mysession
tmux rename -t s1 s2 重命名会话s1为s2
tmux kill-session 关闭上次打开的会话
tmux kill-session -t s1 关闭会话s1
tmux kill-session -a -t s1 关闭除s1外的所有会话
tmux kill-server 关闭所有会话