最近突然兴起(好吧就是今天早上)想建个Web版的vscode,拿着iPad就可以去图书馆敲代码了。

本来打算使用微软官方的visual studio code online进行搭建,可惜运行出错只能放弃。

主要问题在于按照官方文档安装之后(忽略中间缺少依赖/缺少库/缺少模块等一系列问题,反正挨个解决最后安装成功了),yarn web运行出现缺少文件错误。

查了下issue,要使用yarn watch来解决,这命令太耗内存,512M小鸡玩不了玩不了。

没办法又查了下,发现还有一个叫code-server的项目,提供docker/二进制等安装方式,还有商业应用,算是比较成熟的项目了。

简单记录一下安装过程吧,系统是Arch Linux,不过其他使用Systemd的Linux(例如Ubuntu/Debian/CentOS)都可以通用。

先下载二进制包,地址在 https://github.com/cdr/code-server/releases

然后解压,授予权限,放入/usr/local/bin目录(文件名仅供参考,以releases最新版为准)

wget https://github.com/cdr/code-server/releases/download/2.1692-vsc1.39.2/code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz
tar -xzf code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz
cd code-server2.1692-vsc1.39.2-linux-x86_64
chmod +x code-server
mv code-server /usr/local/bin

使用

code-server -h

可以查看帮助

新建systemd service文件

nano /etc/systemd/system/code-server.service

写入如下内容

[Unit]
Description=Code Server
Wants=network-online.target
After=network-online.target

[Service]
Environment=PASSWORD="你设定的密码"
Type=exec
User=http #如果对权限不了解,用户可以直接改成root,以免没有权限无法写入文件.另外Arch Linux的http用户对应Ubuntu/Debian的用户就是www-data
ExecStart=/usr/local/bin/code-server --port 8081#默认的8080是常用端口,--port可以指定

[Install]
WantedBy=multi-user.target

然后运行

systemctl daemon-reload
systemctl start code-server

查看情况

systemctl status code-server

开机启动使用

systemctl enable code-server

接下来配置Cadddy反代,对Caddy不了解的可以查看 :

如何安装使用caddy配合cloudflarecdn实现自动https-quic

Nginx用户可以参考 https://dev.to/babak/how-to-run-vs-code-on-the-server-3c7h

其实主要注意事项就是反代要同时转发websocket,有经验的用户自己配置就完了,没什么复杂的

caddy配置文件如下:

code.example.com {
    proxy / 127.0.0.1:8081 {
        transparent
        websocket
    }
    tls {
        dns cloudflare
    }
}

重启caddy

现在可以访问code.example.com使用在线版的vscode了

在以下系统/浏览器上测试通过。

Windows10 64bit,Chrome 79 ,64bit / Cent Browser 4.1.7.182 ,64bit

iPad Pro 10.5,iOS 13.3 ,Safari

Redmi Note 5,Android 10,Chrome 79