如何在 Ubuntu 18.04 上设置代码服务器云 IDE 平台

笔记首页 >> 教程系列 >> 如何在 Ubuntu 18.04 上设置代码服务器云 IDE 平台

如何在 Ubuntu 18.04 上设置代码服务器云 IDE 平台

作为Write for DOnations计划的一部分，作者选择了免费和开源基金来接受捐赠。

介绍

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

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

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

先决条件

运行 Ubuntu 18.04 的服务器，具有至少 2GB RAM、root 访问权限和 sudo、非 root 帐户。您可以按照此初始服务器设置指南进行设置。
您的服务器上安装了 Nginx。有关如何执行此操作的指南，请完成如何在 Ubuntu 18.04 上安装 Nginx 的步骤 1 到 4 。
托管代码服务器的完全注册域名，指向您的服务器。本教程将贯穿始终。你可以购买一个域名Namecheap，免费获得一个在Freenom，或使用你选择的域名注册商。对于 DigitalOcean，您可以按照DigitalOcean DNS的介绍了解有关如何添加它们的详细信息。code-server.your-domain

第 1 步 – 安装代码服务器

在本节中，您将在服务器上设置代码服务器。这需要下载最新版本并创建一个systemd服务，使代码服务器始终在后台运行。您还将为服务指定重新启动策略，以便代码服务器在可能的崩溃或重新启动后保持可用。

您将所有与代码服务器相关的数据存储在名为~/code-server. 通过运行以下命令来创建它：

mkdir ~/code-server

导航到它：

cd ~/code-server

您需要转到代码服务器的Github 发布页面并选择最新的 Linux 版本（该文件的名称中将包含“linux”）。在撰写本文时，最新版本是3.2.0。wget通过运行以下命令下载它：

wget https://github.com/cdr/code-server/releases/download/3.2.0/code-server-3.2.0-linux-x86_64.tar.gz

然后，通过运行解压缩存档：

tar -xzvf code-server-3.2.0-linux-x86_64.tar.gz

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

sudo cp -r code-server-3.2.0-linux-x86_64 /usr/lib/code-server

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

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

接下来，为 code-server 创建一个文件夹，它将存储用户数据：

sudo mkdir /var/lib/code-server

现在您已经下载了 code-server 并使其在系统范围内可用，您将创建一个 systemd 服务，以保持 code-server 始终在后台运行。

您将服务配置存储在 systemd 存储其服务code-server.service的/lib/systemd/system目录中名为的文件中。使用文本编辑器创建它：

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

您还指定全局代码服务器可执行文件应以一些特定于代码服务器的参数启动。 --bind-addr 127.0.0.1:8080将其绑定到localhostport 8080，因此只能从服务器内部直接访问它。--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; vendor preset: enabled)
   Active: active (running) since Tue 2020-05-12 20:53:29 UTC; 11s ago
 Main PID: 3236 (node)
    Tasks: 14 (limit: 2362)
   CGroup: /system.slice/code-server.service
           ├─3236 /usr/lib/code-server/node /usr/lib/code-server/out/node/entry.js --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth pas
           └─3258 /usr/lib/code-server/node /usr/lib/code-server/out/node/entry.js --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth pas

May 12 20:53:29 code-server-update systemd[1]: Started code-server.
May 12 20:53:30 code-server-update code-server[3236]: info  code-server 3.2.0 fd36a99a4c78669970ebc4eb05768293b657716f
May 12 20:53:30 code-server-update code-server[3236]: info  HTTP server listening on http://127.0.0.1:8080
May 12 20:53:30 code-server-update code-server[3236]: info    - Using custom password for authentication
May 12 20:53:30 code-server-update code-server[3236]: info    - Not serving HTTPS
May 12 20:53:30 code-server-update code-server[3236]: info  Automatic updates are enabled

要在服务器重新启动后自动启动代码服务器，请通过运行以下命令启用其服务：

sudo systemctl enable code-server

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

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

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

正如您在 Nginx 先决条件步骤中了解到的，它的站点配置文件存储在下面，/etc/nginx/sites-available并且必须稍后被符号链接以/etc/nginx/sites-enabled激活。

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

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。接下来的三行（以开头proxy_set_header）命令 Nginx 携带一些 HTTP 请求标头，这些标头是代码服务器广泛使用的 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 提供该证书。

要安装最新版本的 Certbot，您需要通过运行以下命令将其包存储库添加到您的服务器：

sudo add-apt-repository ppa:certbot/certbot

你需要按ENTER接受。

然后，安装 Certbot 及其 Nginx 插件：

sudo apt install python-certbot-nginx

作为先决条件的一部分，您已启用ufw(Uncomplicated Firewall) 并将其配置为允许未加密的 HTTP 流量。为了能够访问受保护的站点，您需要通过运行以下命令将其配置为接受加密流量：

sudo ufw allow https

输出将是：

Output
Rule added
Rule added (v6)

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

sudo ufw reload

输出将显示：

OutputFirewall reloaded

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

代码服务器登录提示

代码服务器要求您输入密码。输入您在上一步中设置的那个，然后按Enter IDE。您现在将进入 code-server 并立即看到其编辑器 GUI。

代码服务器 GUI

既然您已检查代码服务器在您的域中是否正确公开，您将使用 Certbot 安装 Let’s Encrypt TLS 证书以保护它。

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

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

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

如果这是您第一次运行 Certbot，系统会要求您提供紧急通知的电子邮件地址并接受 EFF 的服务条款。然后，Certbot 将从 Let’s Encrypt 为您的域请求证书。然后它会询问您是否要将所有 HTTP 流量重定向到 HTTPS：

Output
Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate number [1-2] then [enter] (press 'c' to cancel):

建议选择第二个选项以最大限度地提高安全性。输入您的选择后，按ENTER。

输出将类似于：

Output
IMPORTANT NOTES:
- Congratulations! Your certificate and chain have been saved at:
 /etc/letsencrypt/live/code-server.your-domain/fullchain.pem
 Your key file has been saved at:
 /etc/letsencrypt/live/code-server.your-domain/privkey.pem
 Your cert will expire on ... To obtain a new or tweaked
 version of this certificate in the future, simply run certbot again
 with the "certonly" option. To non-interactively renew *all* of
 your certificates, run "certbot renew"
- Your account credentials have been saved in your Certbot
 configuration directory at /etc/letsencrypt. You should make a
 secure backup of this folder now. This configuration directory will
 also contain certificates and private keys obtained by Certbot so
 making regular backups of this folder is ideal.
- 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 的左侧，有一排六个按钮，用于打开称为活动栏的侧面板中最常用的功能。

代码服务器 GUI - 侧面板

此栏是可自定义的，因此您可以将这些视图移动到不同的顺序或从栏中删除它们。默认情况下，第一个按钮在下拉菜单中打开常规菜单，而第二个视图打开资源管理器面板，提供项目结构的树状导航。您可以在此处管理您的文件夹和文件——根据需要创建、删除、移动和重命名它们。下一个视图提供对搜索和替换功能的访问。

在此之后，按照默认顺序，是您对源代码控制系统（例如Git）的视图。Visual Studio 代码还支持其他源代码控制提供程序，您可以在本文档中找到有关使用编辑器的源代码控制工作流的更多说明。

打开上下文菜单的 Git 窗格

活动栏上的调试器选项提供了面板中调试的所有常用操作。Visual Studio Code 内置对Node.js运行时调试器和任何可转换为Javascript 的语言的支持。对于其他语言，您可以为所需的调试器安装扩展。您可以将调试配置保存在launch.json文件中。

带有 launch.json 打开的调试器视图

活动栏中的最终视图提供了一个菜单，用于访问Marketplace上的可用扩展。

代码服务器 GUI - 选项卡

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

编辑器网格视图

通过“文件”菜单创建新文件后，将在新选项卡中打开一个空文件，保存后，可在“资源管理器”侧面板中查看文件名。可以通过右键单击 Explorer 侧栏并单击New Folder来创建文件夹。您可以通过单击文件夹名称以及将文件和文件夹拖放到层次结构的上部以将它们移动到新位置来展开文件夹。

代码服务器 GUI - 新建文件夹

您可以通过输入访问终端CTRL+SHIFT+`，或通过单击码头上部菜单下拉列表，然后选择新航站楼。终端将在较低的面板中打开，其工作目录将设置为项目的工作区，其中包含资源管理器侧面板中显示的文件和文件夹。

您已经探索了代码服务器接口的高级概述并查看了一些最常用的功能。

结论

您现在在您的 Ubuntu 18.04 服务器上安装了代码服务器，这是一个多功能的云 IDE，在您的域中公开并使用 Let’s Encrypt 证书进行保护。您现在可以单独处理项目，也可以在团队协作环境中工作。运行云 IDE 可以释放本地计算机上的资源，并允许您在需要时扩展资源。有关更多信息，请参阅Visual Studio Code 文档以获取有关代码服务器其他组件的附加功能和详细说明。

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

觉得文章有用？

点个广告表达一下你的爱意吧！