如何在Ubuntu 22.04上设置code-server云IDE平台

1 年 ago
文, 翔
5 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的文件夹中。使用以下命令创建它：

  1. mkdir ~/code-server

然后导航到它：

  1. cd ~/code-server

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

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

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

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

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

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

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

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

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

  1. sudo mkdir /var/lib/code-server

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

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

  1. 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服务。

  1. sudo systemctl start code-server

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

  1. 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，请使用以下命令启用其服务。

  1. sudo systemctl enable code-server

您将收到一个响应，说生成了一个符号链接。

Output
Created 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将其公开于您的域名，将Nginx设置为访问者与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目录下。

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

请添加以下行：

以下是/etc/nginx/sites-available/code-server.conf的本土中文释义：

/nginx/站点可用/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请求头，这些请求头对于WebSockets的正确运行非常重要，而code-server广泛使用这些请求头。

保存并关闭文件。

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

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

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

  1. 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。

  1. sudo systemctl restart nginx

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

第三步 — 保护您的域名

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

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

  1. sudo ufw allow https

输出结果将是：

Output
Rule added
Rule added (v6)

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

  1. sudo ufw reload

这个输出将打印出：

Output
Firewall reloaded

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

Screencapture of the code-server login prompt

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

Screencapture of the code-server GUI

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

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

  1. sudo apt install certbot python3-certbot-nginx -y

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

  1. 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配置。您现在可以在浏览器中重新加载您的code-server域，并观察到站点地址左边出现了一个挂锁，这意味着您的连接已经得到适当的安全保护。

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

第四步-使用code-server界面

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

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

Screencapture of the code-server GUI sidepanel with six icon buttons. The folder button has been selected, which expands a sidebar from which folder can be opened.

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

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

Screencapture of the source control menu open to display the Git pane

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

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

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

点击汉堡菜单图标来打开一个选项菜单，然后选择文件菜单，在那里你会创建一个新文件。给文件命名并保存到默认文件夹位置。

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

Screencapture of the code-server GUI Editor with an example file open

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

在这一步中，您回顾了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平台》。

发表回复 0

Your email address will not be published. Required fields are marked *