【Linux】浏览器写代码!部署code-server远程vscode网页
慕雪年华

部署code-server远程vscode网页,在浏览器上写代码!

参考文档 https://developer.aliyun.com/article/876967#slide-7

1.什么是code-server?

注意,这不是在linux系统上安装vscode软件(和windows一样的vscode客户端)

开源仓库 https://github.com/coder/code-server

code-server是一个社区项目(非微软官方)其作用是在你的linux主机(云服务器)上部署一个可以在浏览器上访问的vscode页面,类似官方的vscode.dev

微软官方推出的vscode网页版 https://vscode.dev/

它可以通过浏览器的api访问你电脑上的本地文件,此时浏览器就是一个vscode客户端

image

code-server同理,其访问的是你linux服务器上的文件,作用类似于vscode插件remote ssh,让我们可以用浏览器,在任何电脑、平板上进行远程开发,无须下载vscode客户端或者ssh软件!

image

1.1 官方的vscode-server?

微软官方确实有一个vscode-server,在官网可以下载。我测试了之后,发现它是打了一个隧道,通过vscode.dev的子域名访问,会转发到你的主机上。

image

在我这里的测试,发现压根连不上微软的服务器。想想其实也很正常,因为vscode-server的文档页面连中文都没有,再加上微软的服务器,国内用不了也是意料之中

2.安装

2.1 下载安装包

截至本文创作时间23-03-09,code-server的最新版本是4.10.1,可以用下面的命令获取到linux下的安装包

1
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的包进行安装

1
2
$ 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下载慢,可以用下面这个网站加速(用迅雷下,速度起飞)

1
https://doget.nocsdn.com/#/

下载完成后,将压缩包用xftp传输到服务器上

2.2 解压

使用下面的命令解压刚刚下载好的压缩包

1
tar -zxvf code-server-4.10.1-linux-amd64.tar.gz

给解压出来的文件夹改个短名字vsc

1
mv code-server-4.10.1-linux-amd64 vsc

cd进入这个文件夹

1
cd vsc

ls -l,基本文件如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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文件夹,我们需要用的可执行文件就在里头

1
2
$ ls
code-server

这个code-server就是我们要的可执行文件

2.3 启动code-server

1
2
export PASSWORD="配置一个密码"
code-server --port 8888 --host 0.0.0.0 --auth password

上面这个命令,启动之后,会创建一个端口为8888的web服务,此时使用ip:8888的方式,应该就可以访问到你的code-server服务了!

1
2
3
4
5
6
7
8
[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了!

image

2.4 配置文件

首次启动了之后,会在你的用户路径下生成一个.config/code-server文件夹,里面有一个config.yaml

1
2
$ ls .config/code-server
config.yaml

打开这个文件,可以在里面配置code-server的密码,以及https访问。其余的配置项我还没有关注过,可以去看看github上的文档

1
2
3
4
bind-addr: 127.0.0.1:8080
auth: password
password: 64f1881b805917a449d80874
cert: false

默认的密码巨长,改成你自己的即可。在这里还可以修改默认绑定的ip和端口,后续启动code-server,就不需要手动指定了,直接运行即可

1
./code-server

2.5 tmux后台运行

nohup运行code-server有一点问题,所以要用tmux

如果没有这个软件,先安装

1
sudo yum install tmux

创建一个新会话,你可以理解为这是一个脱离于bash的独立shell页面,即便当前bash退出了,code-server也不会退出

1
tmux new -s vscode_online

开启新会话后,进入vsc的bin目录,启动code-server,命令是不变的

1
./code-server

image

随后直接关掉当前bash,此时就已经实现了code-server的后台运行

1
2
3
4
5
# 接入会话
tmux a -t vscode_online

# 结束会话
tmux kill-session -t vscode_online

3.一些问题

3.1 nginx转发遇到1006错误

我在采用nginx转发的时候,遇到了这个问题

image

个人猜测,这大概率是因为我在config.yaml里面配置了code-server的https导致的

1
cert: false # 关闭https

将cert修改回false,再次测试,发现还是有这个问题!

实际上,如果你进行了nginx转发,并不需要配置code-server的https

保持默认的http即可


后来发现是我的nginx转发设置有问题,正确的转发配置如下

1
2
3
4
5
6
7
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的完整配置文件!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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;
}

3.2 C/C++插件

由于code-server是一个第三方项目,所以一些官方的插件(如pylance)直接在code-server的插件商店里面搜是没有的

我们需要去微软的vscode官网上下载插件的VSIX文件,使用本地文件的方式进行安装

https://marketplace.visualstudio.com/VSCode

image

不过,pylance用这个办法依旧无法安装。看来有些插件只有官方的vsc才能安装

3.3 本地文件

如果你用过vscode的remote-ssh插件连过你这个服务器,用户目录下面会有两个文件夹

1
2
.vsc
.vscode-server

这两个文件夹是vscode的插件remote-ssh生成的,和本文安装的code-server无关!

3.4 tmux常用语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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  关闭所有会话