Ubuntu 22.04搭建code-server：打造你的云端VS Code开发环境

3 年 ago

文, 翔

4 minutes

引言

随着开发者工具向云端迁移，云集成开发环境（Cloud IDE）平台的创建和采用正在增长。云IDE可以实现开发团队之间的实时协作，在统一的开发环境中工作，最大程度地减少不兼容性，并提高工作效率。通过Web浏览器可以访问云IDE，适用于所有类型的现代设备。

code-server 是 Microsoft Visual Studio Code 在远程服务器上运行，并可直接通过浏览器访问。Visual Studio Code 是一个现代化的代码编辑器，具有集成的 Git 支持、代码调试器、智能自动补全和可自定义和可扩展的功能。通过 code-server，您可以在运行不同操作系统的各种设备上使用，并始终拥有一个一致的开发环境可用。

在本教程中，您将在Ubuntu 22.04机器上设置code-server云IDE平台，并将其映射到您的域名上，并使用免费的Let’s Encrypt TLS证书进行保护。在教程结束时，您将能够在您的Ubuntu 22.04服务器上运行Microsoft Visual Studio Code，并且可以通过您的域名进行访问，并使用密码进行保护。

先决条件

A server running Ubuntu 22.04 with at least 2GB RAM, root access, and a sudo, non-root account. You can set this up by following this initial server setup guide.

Nginx installed on your server. For a guide on how to do this, complete Steps 1 to 4 of How To Install Nginx on Ubuntu 22.04.

A fully registered domain name to host code-server, pointed to your server. This tutorial will use code-server.your-domain throughout. You can purchase a domain name on Namecheap, get one for free on Freenom, or use the domain registrar of your choice. For Silicon Cloud, you can follow this introduction to Silicon Cloud DNS for details on how to add them.

步骤1 — 安装code-server

在这一步中，您将通过下载最新版本并创建一个系统服务在服务器上设置code-server。您还将指定一个重启策略，以便在可能的崩溃或重新启动后，code-server保持可用。

您将存储与code-server相关的所有数据在名为~/code-server的文件夹中。使用以下命令创建它：

mkdir ~/code-server

然后导航到它：

cd ~/code-server

你需要从code-server的Github releases获取最新的Linux版本（文件名中会包含linux）。在撰写本文时，最新的版本是4.8.2。通过运行以下命令使用wget进行下载：

wget https://github.com/coder/code-server/releases/download/v4.8.2/code-server-4.8.2-linux-amd64.tar.gz

然后通过运行解压缩存档文件。

tar -xzvf code-server-4.8.2-linux-amd64.tar.gz

你将会得到一个名称与你下载的原始文件完全相同的文件夹，其中包含了 code-server 的源代码。运行以下命令将其复制到 /usr/lib/code-server，这样你就可以在整个系统中访问它了。

sudo cp -r code-server-4.8.2-linux-amd64 /usr/lib/code-server

然后在/usr/bin目录下创建一个符号链接，将它指向code-server可执行文件。

sudo ln -s /usr/lib/code-server/bin/code-server /usr/bin/code-server

接下来，请创建一个文件夹，用于存储 code-server 的用户数据。

sudo mkdir /var/lib/code-server

现在，您已经下载了code-server并使其在整个系统中可用，您将创建一个systemd服务，以使code-server一直在后台运行。

将服务配置存储在/lib/systemd/system目录下的名为code-server.service的文件中，该目录是systemd存储其服务的位置。你可以使用文本编辑器（本教程使用nano）创建该文件。

sudo nano /lib/systemd/system/code-server.service

请添加以下的内容：

/lib/systemd/system/code-server.service 的中文表达: 代码服务器服务。

[Unit]
Description=code-server
After=nginx.service

[Service]
Type=simple
Environment=PASSWORD=your_password
ExecStart=/usr/bin/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password
Restart=always

[Install]
WantedBy=multi-user.target

首先，你需要指定服务的描述。然后，你要说明在启动本服务之前必须先启动nginx服务。在[Unit]部分之后，你需要定义服务的类型（简单意味着进程只需要简单运行），并提供将要执行的命令。

你也可以指定全局的 code-server 可执行文件应该使用一些特定于 code-server 的参数启动。

–bind-addr 127.0.0.1:8080 binds it to localhost at port 8080, so it’s only directly accessible from inside of your server.
–user-data-dir /var/lib/code-server sets its user data directory.
–auth password specifies that it should authenticate visitors with a password, specified in the PASSWORD environment variable declared on the line above it.

请记住将“your_password”替换为您想使用的密码。下一行告诉systemd在所有故障事件中重新启动code-server（例如，崩溃或进程被终止时）。

[安装] 部分指示 systemd 在可以登录到服务器时开始启动此服务。

保存并关闭文件。

通过运行以下命令启动code-server服务。

sudo systemctl start code-server

通过观察其状态来确认它已正确启动。

sudo systemctl status code-server

你会收到类似于这样的输出：

Output● code-server.service - code-server
     Loaded: loaded (/lib/systemd/system/code-server.service; disabled; preset: enabled)
     Active: active (running) since Thu 2022-11-03 12:39:26 UTC; 5s ago
   Main PID: 2670 (node)
      Tasks: 22 (limit: 1116)
     Memory: 90.9M
        CPU: 799ms
     CGroup: /system.slice/code-server.service
             ├─2670 /usr/lib/code-server/lib/node /usr/lib/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password
             └─2692 /usr/lib/code-server/lib/node /usr/lib/code-server/out/node/entry

为了在服务器重启后自动启动 code-server，请使用以下命令启用其服务：

sudo systemctl enable code-server

您将收到一个响应，提示已生成符号链接：

OutputCreated symlink /etc/systemd/system/multi-user.target.wants/code-server.service → /lib/systemd/system/code-server.service.

至此，您已下载并全局可用化了 code-server。接着，您为 code-server 创建了一个 systemd 服务并启用了它，确保 code-server 会在每次服务器启动时自动运行。接下来，您将通过配置 Nginx，将其作为访问者与 code-server 之间的反向代理，从而在您的域名上公开 code-server。

步骤2 — 在您的域名上公开 code-server

在本部分中，您将配置 Nginx 作为 code-server 的反向代理。

正如您在设置 Nginx 的先决条件步骤中所了解的，网站配置文件存储在 /etc/nginx/sites-available 目录下，但必须通过符号链接将其链接到 /etc/nginx/sites-enabled 目录才能正式生效。

使用编辑器创建一个名为 code-server.conf 的文件，用于存储在您的域名下公开 code-server 的配置，文件路径为 /etc/nginx/sites-available/code-server.conf。

sudo nano /etc/nginx/sites-available/code-server.conf

请添加以下内容：

以下是 /etc/nginx/sites-available/code-server.conf 的配置内容：

server {
	listen 80;
	listen [::]:80;

	server_name code-server.your-domain;

	location / {
	  proxy_pass http://localhost:8080/;
	  proxy_set_header Upgrade $http_upgrade;
	  proxy_set_header Connection upgrade;
	  proxy_set_header Accept-Encoding gzip;
	}
}

请将 code-server.your-domain 替换为您希望使用的域名。

在此文件中，您定义了 Nginx 应该监听 HTTP 端口 80。然后，您指定了一个 server_name 来告诉 Nginx 接受请求并应用该特定配置的域名。

在根位置（/）块中，您指定请求应该在本地主机 localhost:8080 上运行的 code-server 之间传递。接下来的三行（以 proxy_set_header 开头）指示 Nginx 传递一些 HTTP 请求头，这些请求头对于 code-server 广泛使用的 WebSockets 的正确运行至关重要。

保存并关闭文件。

要使此网站配置生效，您需要在 /etc/nginx/sites-enabled 文件夹中创建其符号链接。请运行以下命令来执行此操作：

sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf

为了测试配置的有效性，请运行以下命令：

sudo nginx -t

您将会收到以下输出结果：

Outputnginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

为了使配置生效，您需要重新启动 Nginx。

sudo systemctl restart nginx

您现在可以通过您的域名访问您的 code-server 安装。接下来，您将使用免费的 Let’s Encrypt TLS 证书来保证其安全性。

步骤3 — 保护您的域名

在本节中，您将使用 Let’s Encrypt TLS 证书来保护您的域名，这将通过 Certbot 进行配置。一旦配置完成，您的 code-server 安装将在 HTTPS 下运行。

作为先决条件的一部分，您已经启用了 UFW（简化防火墙）并配置其允许未加密的 HTTP 流量。为了能够访问安全的网站，您需要配置它接受加密流量，可以通过运行以下命令来实现：

sudo ufw allow https

输出结果将是：

OutputRule added
Rule added (v6)

与 Nginx 类似，您需要重新加载防火墙以使配置生效。

sudo ufw reload

此命令将打印出：

OutputFirewall reloaded

然后，在您的浏览器中，导航到您用于 code-server 的域名。code-server 的登录提示将加载。

code-server 正在询问您的密码。输入您在之前步骤中设置的密码，然后按下回车键进入 IDE。您现在将进入 code-server 并立即访问其编辑器 GUI 界面。

现在您已经确认 code-server 在您的域名上正确公开，您将使用 Certbot 安装 Let’s Encrypt TLS 证书来保护它。

为安装最新版本的 Certbot 及其 Nginx 插件，请运行以下命令：

sudo apt install certbot python3-certbot-nginx -y

要为您的域名申请证书，请运行以下命令：

sudo certbot --nginx -d code-server.您的域名

在此命令中，您运行 Certbot 来请求您域名的证书。您使用 -d 参数传递域名。--nginx 标志告诉 Certbot 自动更改 Nginx 站点配置以支持 HTTPS。请记住将 code-server.您的域名 替换为您的实际域名。

如果这是您第一次运行 Certbot，系统会要求您提供一个用于紧急通知的电子邮件地址，并接受 EFF 的服务条款。然后，Certbot 将从 Let’s Encrypt 请求您域名的证书。

输出将类似于：

输出
请求 code-server.您的域名 的证书

成功接收证书。
证书已保存至：/etc/letsencrypt/live/code-server.您的域名/fullchain.pem
密钥已保存至：         /etc/letsencrypt/live/code-server.您的域名/privkey.pem
此证书将于 2023-02-01 到期。
这些文件将在证书续订时更新。
Certbot 已设置计划任务以在后台自动续订此证书。

部署证书
已成功将证书部署到 code-server.您的域名.com 的 /etc/nginx/sites-enabled/code-server.conf
恭喜！您已成功在 https://code-server.您的域名 上启用 HTTPS

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
如果您喜欢 Certbot，请考虑通过以下方式支持我们的工作：
 * 向 ISRG / Let's Encrypt 捐款：   https://letsencrypt.org/donate
 * 向 EFF 捐款：                    https://eff.org/donate-le
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

此输出表明 Certbot 已成功生成 TLS 证书并将其应用于您域名的 Nginx 配置。您现在可以在浏览器中重新加载您的 code-server 域，并观察到站点地址左侧出现一个挂锁图标，这意味着您的连接已得到适当的安全保护。

现在您已通过安全的 Nginx 反向代理在您的域名上使用 code-server，您可以开始探索 code-server 的用户界面了。

第四步 – 使用 code-server 界面

在本部分中，您将使用 code-server 界面的一些功能。由于 code-server 是在云端运行的 Visual Studio Code，因此它具有与独立桌面版相同的界面。

在 IDE 的左侧，有一列垂直按钮，它们是常用功能的侧边栏，称为活动栏。

code-server GUI 侧面板的屏幕截图，包含六个图标按钮。已选择文件夹按钮，这会从侧边栏展开一个菜单，从中可以打开文件夹。

此工具栏可自定义，因此您可以移动这些按钮或从工具栏中删除它们。默认情况下，第一个按钮（汉堡菜单图标）在下拉菜单中打开常规菜单，而第二个按钮（文件夹图标）打开资源管理器面板，提供类似树形导航的项目结构。您可以在此处管理文件夹和文件，根据需要创建、删除、移动和重命名它们。放大镜按钮提供访问搜索和替换功能的途径。

接下来是按默认顺序排列的图标，它可显示源代码管理系统（如 Git）的视图。Visual Studio Code 还支持其他源代码管理提供者。

调试器选项（带有一个小虫子图标的三角形）在面板中提供了常用的调试操作。Visual Studio Code 内置支持 Node.js 运行时调试器以及任何编译为 JavaScript 的语言。对于其他语言，您可以安装所需调试器的扩展。四个方块按钮是活动栏中的最后一个视图，提供了一个菜单，用于访问 VSCode Marketplace 上可用的扩展。

GUI 的主要区域是编辑器，您可以通过标签来分割它进行代码编辑。您可以将编辑视图更改为网格系统或并排的文件。

在浏览器中打开 code-server.您的域名/?folder=/var/lib/code-server/User，它将加载一个现有文件夹。

点击汉堡菜单图标以打开选项菜单，然后选择“文件”菜单，在那里您将创建一个新文件。为文件命名并保存到默认文件夹位置。

一旦保存，文件将显示在资源管理器侧边栏中。通过右键单击资源管理器侧边栏并点击“新建文件夹”可创建文件夹。您还可以通过单击文件夹名称来展开文件夹，并通过拖放文件和文件夹到层次结构的上层来将它们移动到新位置。

点击上部菜单下拉列表中的“终端”，然后选择“新建终端”即可进入终端。您也可以使用菜单中列出的键盘快捷方式。终端将在下方面板中打开，并将其工作目录设置为项目的工作区，其中包含资源管理器侧面板中显示的文件和文件夹。

在这一步中，您回顾了 code-server 界面和一些常用功能。

结论

您现在已在您的 Ubuntu 22.04 服务器上安装了 code-server，一个多功能的云端集成开发环境，并且已在您的域名下暴露出来，并使用了 Let’s Encrypt 证书进行了安全保护。现在您可以个人或团队合作地进行项目工作了。运行云端 IDE 可以释放本地机器的资源，并在需要时进行资源扩展。想要了解更多信息，请参考 Visual Studio Code 的文档，了解其他组件的附加功能和详细指南。

如果您想在您的 Silicon Cloud Kubernetes 集群上运行 code-server，请查阅我们的教程《如何在 Silicon Cloud Kubernetes 上设置 code-server 云 IDE 平台》。

#code-server #Ubuntu 22.04 #VS Code #云IDE #远程开发