部署云端 VSCode,随时随地敲代码

code-server 可以让你在任何地方通过浏览器使用 VSCode,它的项目地址是 https://github.com/coder/code-server ,大家可以参考项目的官方部署教程。

这里记录一下使用甲骨文云 Arm 架构 VPS 部署 code-server 的过程。

环境简介

我这里使用的是甲骨文云 Arm 架构的 VPS ,Ubuntu 20.04 LTS 操作系统。为了后续申请 SSL 证书方便,我这里还安装了宝塔面板,以及相应的 LNMP 环境。

code-server 默认使用 8080 端口进行访问,宝塔面板默认使用 8888 端口进行访问。因此在安装这两项之前,应该先打开服务器的相应端口。关于甲骨文如何在服务商处配置网络端口以及如何在操作系统中开放端口,可以查看我以前的博客 小鸡折腾日记

部署方式

官方 GitHub 首页中介绍的是使用一键脚本进行安装,大家可以自行尝试。我这里通过直接运行可执行文件的方式进行部署。

首先远程登录到自己的 VPS,最好使用 root 账户,避免遇到一些乱七八糟的权限问题。

在 code-server 的 Releases页面 找到适合自己机器的可执行程序压缩包,我们将其下载到服务器上。

我这里执行的是

wget https://github.com/coder/code-server/releases/download/v4.5.1/code-server-4.5.1-linux-arm64.tar.gz

几秒钟后下载完成。

将压缩包解压。

tar -xzvf code-server-4.5.1-linux-arm64.tar.gz

解压完毕后,本地会出现 code-server-4.5.1-linux-arm64 的文件夹。
文件夹内部即可看见 code-server 的可执行程序的软链接。

首次执行 ./code-server ,会生成默认配置文件 ~/.config/code-server/config.yaml

我们可以修改该配置文件的内容来修改端口和登录认证密码。

设置守护进程

通过终端运行 code-server 的这种方式伴随着终端的关闭,code-server 的进程也会被关闭,因此这里配置systemd.service 配置守护进程。

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

输入以下内容。

[Unit]
Description=code-server
After=network.target

[Service]
Type=simple
ExecStart=/root/code-server-4.5.1-linux-arm64/code-server
Restart=always
User=root

[Install]
WantedBy=default.target

然后执行 systemctl daemon-reload,现在你就可以使用这些命令来管理程序了:

  • 启动: systemctl start code-server
  • 关闭: systemctl stop code-server
  • 自启: systemctl enable code-server
  • 状态: systemctl status code-server
  • 重启: systemctl restart code-server

接下来启动 code-server 程序并查看运行状态。

配置反向代理和 SSL 证书

这一步是使用宝塔面板建站的常规操作。在以往的博客中我应该都有介绍过。主要分为以下几个步骤。

  1. 申请域名
  2. 域名解析到VPS
  3. 宝塔面板建站并一键申请 SSL 证书
  4. 修改nginx配置文件反向代理code-server

域名我已经提前申请好了,在 cloudflare 中域名添加 A 记录。

在宝塔面板中新建网站。

一键申请 SSL 证书。

修改配置文件。

接下来我们就可以通过域名访问 code-server 了。

登录密码就是配置文件中设置的密码。登陆后就可以像本文封面一样,在浏览器中使用VSCode了,实现随时随地写代码。😏

补充

接下来补充说明几点。

首先是 code-server 是一个比较吃内存的服务,推荐的配置应该是内存不少于 1G 吧,因此有些轻量级的服务器就不太适合运行 code-server 了。如果你依然想在 1G 内存的机器上运行 code-server 的话,那么你可以尝试再设置 1G 大小的交换分区。

wget https://raw.githubusercontent.com/WANG-Guangxin/Utils/master/swap.sh && bash ./swap.sh

其次,code-server 的使用流畅度取决于网络延迟,像我这种白嫖来的国外服务器,网络的延迟还是比较大的,因此流畅性比较不好,使用体验一般。

最后,默认情况下 code-server 中的插件商店不是 VSCode 的原生插件商店。如果想使用原生插件商店的话。那么可以修改 /root/code-server-4.5.1-linux-arm64/lib/vscode/product.json

加入以下内容,并重启 code-server。

"extensionsGallery": {
  "serviceUrl": "https://marketplace.visualstudio.com/_apis/public/gallery",
  "cacheUrl": "https://vscode.blob.core.windows.net/gallery/index",
  "itemUrl": "https://marketplace.visualstudio.com/items",
  "controlUrl": "",
  "recommendationsUrl": ""
}

如果你使用一键安装脚本进行安装,那么你可能需要修改 /usr/lib/code-server/lib/vscode/product.json