随时随地使用 VSCode

注意：这篇文章上次更新于1471天前，文章内容可能已经过时。

This article was last updated1471 days ago, the content may be outdated.

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

Deploy a cloud VSCode and code anywhere, anytime

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页面找到适合自己机器的可执行程序压缩包，我们将其下载到服务器上。

我这里执行的是

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

几秒钟后下载完成。

将压缩包解压。

1	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 配置守护进程。

1	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 证书

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

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

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

在宝塔面板中新建网站。

一键申请 SSL 证书。

修改配置文件。

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

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

补充

接下来补充说明几点。

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

1	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

code-server lets you use VSCode through your browser anywhere. Its project page is https://github.com/coder/code-server; you can refer to the official deployment tutorial there.

Here I document the process of deploying code-server on an Oracle Cloud Arm-based VPS.

Environment Overview

I’m using an Oracle Cloud Arm-based VPS with the Ubuntu 20.04 LTS operating system. For the convenience of applying for SSL certificates later, I also installed the BT panel and the corresponding LNMP environment.

code-server uses port 8080 by default, and the BT panel uses port 8888 by default. So before installing either of them, you should open the corresponding ports on the server. For how to configure network ports with Oracle on the provider side and how to open ports in the OS, see my previous blog post 小鸡折腾日记.

Deployment

The official GitHub homepage describes installing with a one-click script; feel free to try it yourself. Here I deployed by directly running the executable.

First, log in to your VPS remotely, preferably with the root account, to avoid various messy permission problems.

On the Releases page of code-server, find the executable archive suitable for your machine and download it to the server.

What I ran was

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

It finished downloading after a few seconds.

Unzip the archive.

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

After extraction, a folder named code-server-4.5.1-linux-arm64 will appear.
Inside the folder you can see the symlink to the code-server executable.

Running ./code-server for the first time generates the default config file ~/.config/code-server/config.yaml

We can modify this config file to change the port and the login authentication password.

Setting Up a Daemon

Running code-server through a terminal means the process gets killed when the terminal closes, so here I configure a systemd service to daemonize it.

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

Enter the following content.

[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

Then run systemctl daemon-reload, and now you can manage the program with these commands:

Start: systemctl start code-server
Stop: systemctl stop code-server
Auto-start: systemctl enable code-server
Status: systemctl status code-server
Restart: systemctl restart code-server

Next, start the code-server program and check its running status.

Configuring Reverse Proxy and SSL Certificate

This step is routine when building a site with the BT panel. I should have covered it in previous blog posts. It mainly consists of the following steps.

Apply for a domain
Resolve the domain to the VPS
Create a site in the BT panel and apply for an SSL certificate with one click
Modify the nginx configuration file to reverse proxy code-server

I had already applied for the domain in advance; I added an A record for it in Cloudflare.

Create a new site in the BT panel.

Apply for an SSL certificate with one click.

Modify the configuration file.

Now we can access code-server through the domain.

The login password is the one set in the configuration file. After logging in, you can use VSCode in the browser just like the cover of this article, coding anywhere, anytime. 😏

Supplementary

A few additional notes follow.

First, code-server is a fairly memory-hungry service. The recommended configuration should have at least 1G of memory, so some lightweight servers aren’t very suitable for running code-server. If you still want to run code-server on a 1G machine, you can try adding a 1G swap partition.

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

Second, the smoothness of code-server depends on network latency. For a free overseas server like mine, the latency is quite high, so it’s not very smooth and the experience is mediocre.

Lastly, by default the extension marketplace in code-server is not VSCode’s native marketplace. If you want to use the native marketplace, you can modify /root/code-server-4.5.1-linux-arm64/lib/vscode/product.json

Add the following content and restart 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": ""
}

If you installed with the one-click script, you may need to modify /usr/lib/code-server/lib/vscode/product.json