如何在 Ubuntu 22.04 上搭建代码服务器 Cloud IDE 平台

作者选择了 Write for DOnations 计划。

介绍

随着开发人员工具转移到云端，云 IDE（集成开发环境）平台的创建和采用正在增长。云 IDE 允许开发团队之间的实时协作，以在统一的开发环境中工作，从而最大限度地减少不兼容性并提高生产力。云 IDE 可通过 Web 浏览器访问，适用于各种类型的现代设备。

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

在本教程中，您将在您的 Ubuntu 22.04 机器上设置代码服务器云 IDE 平台，并将其公开在您的域中，并使用免费的 Let's Encrypt TLS 证书进行保护。在本教程结束时，您将在您的 Ubuntu 22.04 服务器上运行 Microsoft Visual Studio Code，在您的域中可用并受密码保护。

先决条件

<李> 一台运行 Ubuntu 22.04 的服务器，至少有 2GB 内存、root 访问权限和一个 sudo 非 root 帐户。您可以按照此初始服务器设置指南进行设置。 <李> Nginx 安装在您的服务器上。有关如何执行此操作的指南，请完成如何在 Ubuntu 22.04 上安装 Nginx 的步骤 1 到 4。 <李> 托管代码服务器的完全注册域名，指向您的服务器。本教程将始终使用 code-server.your-domain。您可以在本 DigitalOcean DNS 介绍中购买域名，了解如何添加它们的详细信息。

第 1 步 — 安装代码服务器

在此步骤中，您将通过下载最新版本并创建一个 systemd 服务来在您的服务器上设置代码服务器，该服务将使代码服务器在后台运行。您还将为服务指定重启策略，以便代码服务器在任何可能的崩溃或重启后保持可用。

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

mkdir ~/code-server

然后导航到它：

cd ~/code-server

您需要从代码服务器的 Github 版本中获取最新的 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

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

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

然后在 /usr/bin/code-server 创建一个符号链接，指向 code-server 可执行文件：

sudo ln -s /usr/lib/code-server/bin/code-server /usr/bin/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

添加以下行：

[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] 部分之后，您可以定义服务的类型（simple 表示应该简单地运行流程）并提供将要执行的命令。

您还指定全局代码服务器可执行文件应使用一些特定于代码服务器的参数启动：

• --bind-addr 127.0.0.1:8080 将其绑定到端口 8080 的 localhost，因此只能从内部直接访问你的服务器。
• --user-data-dir /var/lib/code-server 设置其用户数据目录。
• --auth password 指定它应该使用密码对访问者进行身份验证，该密码在其上一行声明的 PASSWORD 环境变量中指定。

请记住将 your_password 替换为您想要的密码。下一行告诉 systemd 在所有故障事件中重启代码服务器（例如，当它崩溃或进程被终止时）。

[Install] 部分命令 systemd 在可以登录到您的服务器时启动此服务。

保存并关闭文件。

通过运行以下命令启动代码服务器服务：

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

要使代码服务器在服务器重启后自动启动，请使用以下命令启用其服务：

sudo systemctl enable code-server

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

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

在此步骤中，您下载了代码服务器并使其在全球范围内可用。然后，您为代码服务器创建了一个 systemd 服务并启用它，这样代码服务器将在每次服务器启动时启动。接下来，您将通过配置 Nginx 作为访问者和代码服务器之间的反向代理在您的域中公开它。

第 2 步 — 在您的域中公开代码服务器

在本节中，您将配置 Nginx 作为代码服务器的反向代理。

正如您在 Nginx 先决条件步骤中所经历的那样，站点配置文件存储在 /etc/nginx/sites-available 下，稍后必须链接到 /etc/nginx/sites-enabled 激活。

您将在 /etc/nginx/sites-available 下的名为 code-server.conf 的文件中存储用于在您的域中公开代码服务器的配置。首先使用您的编辑器创建此文件：

sudo nano /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 的代码服务器。接下来的三行（从 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

您将收到以下输出：

Output
nginx: 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

您现在可以在您的域中访问您的代码服务器安装。在下一步中，您将使用免费的 Let's Encrypt TLS 证书对其进行保护。

第 3 步 — 保护您的域

在本节中，您将使用 Let's Encrypt TLS 证书保护您的域，您将使用 Certbot 提供该证书。配置完成后，您的代码服务器安装将在 HTTPS 之后运行。

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

sudo ufw allow https

输出将是：

Output
Rule added
Rule added (v6)

与 Nginx 类似，您需要重新加载它以使配置生效：

sudo ufw reload

此输出将打印：

Output
Firewall reloaded

然后，在您的浏览器中，导航到您用于代码服务器的域。代码服务器登录提示将加载：

代码服务器要求您输入密码。输入上一步设置的，回车IDE。您现在将进入代码服务器并立即访问其编辑器 GUI。

现在您已经检查了代码服务器是否正确暴露在您的域中，您将使用 Certbot 安装 Let's Encrypt TLS 证书来保护它。

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

sudo apt install certbot python3-certbot-nginx -y

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

sudo certbot --nginx -d code-server.your-domain

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

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

输出将与此类似：

Output
Requesting a certificate for code-server.your-domain

Successfully received certificate.
Certificate is saved at: /etc/letsencrypt/live/code-server.your-domain/fullchain.pem
Key is saved at:         /etc/letsencrypt/live/code-server.your-domain/privkey.pem
This certificate expires on 2023-02-01.
These files will be updated when the certificate renews.
Certbot has set up a scheduled task to automatically renew this certificate in the background.

Deploying certificate
Successfully deployed certificate for code-server.your-domain.com to /etc/nginx/sites-enabled/code-server.conf
Congratulations! You have successfully enabled HTTPS on https://code-server.your-domain

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
If you like Certbot, please consider supporting our work by:
 * Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
 * Donating to EFF:                    https://eff.org/donate-le
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

此输出表明 Certbot 已成功生成 TLS 证书并将它们应用于您域的 Nginx 配置。您现在可以在浏览器中重新加载您的代码服务器域，并观察到站点地址左侧的挂锁，这意味着您的连接已得到适当保护。

现在您可以通过安全的 Nginx 反向代理在您的域中访问代码服务器，您可以准备查看代码服务器的用户界面。

第 4 步 — 使用代码服务器接口

在本节中，您将使用代码服务器接口的一些功能。由于代码服务器是在云端运行的 Visual Studio Code，因此它具有与独立桌面版相同的界面。

在 IDE 的左侧，有一排垂直的六个按钮，它们将在称为活动栏的侧面板中提供最常用的功能：

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

在此之后，按照默认顺序，是提供源代码控制系统视图的图标，例如源代码控制提供程序。

调试器选项（带有小错误图标的三角形）提供了在面板中进行调试的常用操作。 Visual Studio Code 内置了对所需调试器扩展的支持。四块按钮是活动栏中的最后一个视图，它提供了一个菜单来访问 VSCode Marketplace 上的可用扩展。

GUI 的主要区域是您的编辑器，您可以通过选项卡将其分开以进行代码编辑。您可以将编辑视图更改为网格系统或并排文件。

在浏览器中打开 code-server.your-domain/?folder=/var/lib/code-server/User，这将加载现有文件夹。

选择汉堡菜单图标以打开选项菜单，然后选择将在其中创建新文件的文件菜单。命名文件并将其保存到默认文件夹位置。

保存后，该文件将在资源管理器侧面板中可见。可以通过右键单击资源管理器侧栏并单击新建文件夹来创建文件夹。您可以通过单击文件夹的名称以及将文件和文件夹拖放到层次结构的上部以将它们移动到新位置来展开文件夹。

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

在此步骤中，您查看了代码服务器界面和一些最常用的功能。

结论

您现在拥有代码服务器，一个多功能的云 IDE，安装在您的 Ubuntu 22.04 服务器上，暴露在您的域中，并使用 Let's Encrypt 证书进行保护。您现在可以单独或以团队协作的方式处理项目。运行云 IDE 可以释放本地计算机上的资源，并允许您在需要时扩展资源。有关更多信息，请参阅 Visual Studio Code 文档以了解有关代码服务器其他组件的其他功能和详细说明。

如果您想在 DigitalOcean Kubernetes 集群上运行代码服务器，请查看我们关于如何在 DigitalOcean Kubernetes 上设置代码服务器云 IDE 平台的教程。