Visual Studio Code Server探索

2023-01-06

字数统计: 1k字 | 阅读时长: 4分

前言

一时兴起，折腾折腾，主要是玩具性质。

目的是实现iPad上通过基于Web的方式连接远端VS Code Server编程。

Visual Studio Code Server

在以往的VS Code使用中，我们要么是在本地进行开发，要么是通过VS Code Remote Development extensions连接服务器进行开发。远程开发扩展的工作原理是在远端服务器上安装远程环境，通过本机上的VS Code以SSH连接远端源代码和运行时环境进行编程，它提供了很好的性能（正常网络下SSH不会太卡）和开发体验（像在本地开发一样）。

但如果我们想要在不能安装VS Code的设备上进行开发，或者是无法使用SSH进行连接时进行开发，该怎么办呢？

微软在这方面做了很多尝试，例如将VS Code搬到浏览器中，如果你现在登录到 https://vscode.dev 时，会看到一个完全在浏览器中运行的轻量级 VS Code 版本。

.dev新顶级域名，开发专用域名。
.dev 域名主要面向开发人员，和.app 类似，它要求强制性使用 HTTPS，以阻挡广告恶意程序和 ISP 植入的跟踪代码。

那么我们能否自己搭建一个这样的运行在浏览器中的 VS Code 呢？答案是Yep！

Visual Studio Code Server是一个基于远程扩展使用的相同底层服务器构建的独立的服务，加上一些额外的功能，如交互式 CLI 和与 vscode.dev 更便利的安全连接。

VS Code 服务器允许您以新的方式使用 VS Code，例如：

在 SSH 支持可能受限或需要基于 Web 的访问的远程计算机上进行开发。

在不支持安装 VS Code 桌面的机器上开发，例如 iPad / 平板电脑或 Chromebook。

体验所有代码都可以在浏览器沙箱中执行的客户端安全优势。

VS Code Server的详细信息：https://code.visualstudio.com/docs/remote/vscode-server

vscode.dev的详细信息：https://code.visualstudio.com/blogs/2021/10/20/vscode-dev

在本地搭建VS Code Server

在 Mac 下可以使用 brew 来安装一个 code-server。具体命令为：brew install code-server。安装完成后，配置文件在~/.config/code-server/config.yaml。修改bind-addr，从127.0.0.1:8080修改为0.0.0.0:8080，密码修改为你的密码。如下所示：

bind-addr: 0.0.0.0:8080
auth: password
password: yourpassword
cert: false

然后使用brew services start code-server或直接运行code-server即可启动服务。通过浏览器访问127.0.0.1:8080，按提示输入上述设置的密码即可打开在线编辑器。

在Ubuntu服务器上架设VS Code Server

注意运行服务的端口防火墙需要放开，通常是在云服务器平台进行安全组设置。

自动安装方式一

# check architecture
arch
# download
curl -fOL https://github.com/coder/code-server/releases/download/v4.9.1/code-server_4.9.1_amd64.deb
# install
sudo dpkg -i code-server_4.9.1_amd64.deb
# boot auto-start and start now
sudo systemctl enable --now code-server@$USER
# Now visit http://127.0.0.1:8080. Your password is in ~/.config/code-server/config.yaml
# if you want to let public network user to access the service by public ip
code-server --host "0.0.0.0"

自动安装方式二 (未验证)

# download and install
curl -fsSL https://code-server.dev/install.sh | sh
# start
sudo systemctl start code-server@$USER
# configure
vim ~/.config/code-server/config.yaml # then configure
# restart to make the configuration make effect
sudo systemctl restart code-server@$USER
# boot auto-start
sudo systemctl enable code-server@$USER

卸载

sudo systemctl stop code-server@$USER
rm -rf /usr/lib/code-server
rm -rf ~/.local/share/code-server
rm -rf ~/.config/code-server

在iPad上访问VS Code Server

有两种方式，一种是直接用浏览器访问远端的IP:PORT，另一种是安装软件Servediter for code-server，打开后选择自己的服务器（是免费的），输入地址和密码保存。

后者的沉浸感稍好一点，但需要安装软件略显麻烦。

参考文献

[1] https://blog.csdn.net/day_to_die/article/details/105990565
[2] https://blog.csdn.net/weixin_43681778/article/details/116203039
[3] https://blog.csdn.net/romanticRose/article/details/101351679

后记

首发于 silencezheng.top，转载请注明出处。