作为 Write for DOnations 计划的一部分，作者选择了 Free and Open Source Fund 来接受捐赠。
介绍
随着开发人员工具迁移到云端，云 IDE（集成开发环境）平台的创建和采用正在增长。 云 IDE 允许开发人员团队之间的实时协作，以便在统一的开发环境中工作，从而最大限度地减少不兼容性并提高生产力。 云 IDE 可通过 Web 浏览器访问，适用于各种现代设备。
code-server 是 Microsoft Visual Studio Code 运行在远程服务器上，可直接从浏览器访问。 Visual Studio Code 是一个现代代码编辑器，具有集成的 Git 支持、代码调试器、智能自动完成以及可自定义和可扩展的功能。 这意味着您可以使用运行不同操作系统的各种设备，并且始终拥有一致的开发环境。
在本教程中，您将在您的 Ubuntu 20.04 机器上设置代码服务器云 IDE 平台并在您的域中公开它，并使用免费的 Let's Encrypt TLS 证书进行保护。 最后，您将在您的 Ubuntu 20.04 服务器上运行 Microsoft Visual Studio Code，该代码在您的域中可用并受密码保护。
先决条件
- 一台运行 Ubuntu 20.04 的服务器，至少有 2GB RAM、root 访问权限和一个 sudo、非 root 帐户。 您可以按照 这个初始服务器设置指南 进行设置。
- Nginx 安装在您的服务器上。 有关如何执行此操作的指南，请完成 如何在 Ubuntu 20.04 上安装 Nginx 的步骤 1 到 4。
- 托管代码服务器的完全注册域名，指向您的服务器。 本教程将自始至终使用
code-server.your-domain。 您可以在 Namecheap 上购买一个域名，在 Freenom 上免费获得一个域名，或者使用您选择的域名注册商。 对于DigitalOcean，您可以关注这个DigitalOcean DNS的介绍，详细了解如何添加它们。
第 1 步 — 安装代码服务器
在本节中，您将在服务器上设置代码服务器。 这需要下载最新版本并创建一个 systemd 服务，该服务将使代码服务器始终在后台运行。 您还将为服务指定重新启动策略，以便代码服务器在可能的崩溃或重新启动后保持可用。
您将把与代码服务器有关的所有数据存储在名为 ~/code-server 的文件夹中。 通过运行以下命令创建它：
mkdir ~/code-server
导航到它：
cd ~/code-server
您需要前往代码服务器的 Github 发布 页面并选择最新的 Linux 版本（该文件的名称中将包含“linux”）。 在撰写本文时，最新版本是 3.3.1。 通过运行以下命令，使用 wget 下载它：
wget https://github.com/cdr/code-server/releases/download/v3.3.1/code-server-3.3.1-linux-amd64.tar.gz
然后，运行以下命令解压缩存档：
tar -xzvf code-server-3.3.1-linux-amd64.tar.gz
您将获得一个与您下载的原始文件完全相同的文件夹，其中包含代码服务器源代码。 将其复制到 /usr/lib/code-server 以便您可以通过运行以下命令在系统范围内访问它：
sudo cp -r code-server-3.3.1-linux-amd64 /usr/lib/code-server
然后，在 /usr/bin/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 存储其服务的位置。 使用您的文本编辑器创建它：
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 将其绑定到端口 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; vendor preset: enabled)
Active: active (running) since Wed 2020-05-20 13:03:40 UTC; 12s ago
Main PID: 14985 (node)
Tasks: 18 (limit: 2345)
Memory: 26.1M
CGroup: /system.slice/code-server.service
├─14985 /usr/lib/code-server/bin/../lib/node /usr/lib/code-server/bin/.. --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth>
└─15010 /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
May 20 13:03:40 code-server-update-2004 systemd[1]: Started code-server.
May 20 13:03:40 code-server-update-2004 code-server[15010]: info Wrote default config file to ~/.config/code-server/config.yaml
May 20 13:03:40 code-server-update-2004 code-server[15010]: info Using config file ~/.config/code-server/config.yaml
May 20 13:03:40 code-server-update-2004 code-server[15010]: info Using user-data-dir /var/lib/code-server
May 20 13:03:40 code-server-update-2004 code-server[15010]: info code-server 3.3.1 6f1309795e1cb930edba68cdc7c3dcaa01da0ab3
May 20 13:03:40 code-server-update-2004 code-server[15010]: info HTTP server listening on http://127.0.0.1:8080
May 20 13:03:40 code-server-update-2004 code-server[15010]: info - Using password from $PASSWORD
May 20 13:03:40 code-server-update-2004 code-server[15010]: info - To disable use `--auth none`
May 20 13:03:40 code-server-update-2004 code-server[15010]: info - Not serving HTTPS
要在服务器重新启动后自动启动代码服务器，请通过运行以下命令启用其服务：
sudo systemctl enable code-server
在此步骤中，您已下载代码服务器并使其在全球范围内可用。 然后，您为它创建了一个 systemd 服务并启用了它，因此 code-server 将在每次服务器启动时启动。 接下来，您将通过将 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
添加以下行：
/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 请求标头，这些标头是代码服务器广泛使用的 WebSocket 正确运行所需的。
要激活此站点配置，您需要通过运行在 /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
您现在可以在您的域中访问您的代码服务器安装。 在下一步中，您将通过应用免费的 Let's Encrypt TLS 证书来保护它。
第 3 步 — 保护您的域
在本节中，您将使用 Let's Encrypt TLS 证书保护您的域，您将使用 Certbot 进行配置。
要安装最新版本的 Certbot 及其 Nginx 插件，请运行以下命令：
sudo apt install certbot python3-certbot-nginx
作为先决条件的一部分，您已启用 ufw（简单防火墙）并将其配置为允许未加密的 HTTP 流量。 为了能够访问受保护的站点，您需要通过运行以下命令将其配置为接受加密流量：
sudo ufw allow https
输出将是：
OutputRule added Rule added (v6)
与 Nginx 类似，您需要重新加载它才能使配置生效：
sudo ufw reload
输出将显示：
OutputFirewall reloaded
然后，在您的浏览器中，导航到您用于代码服务器的域。 您将看到代码服务器登录提示。
code-server 要求您输入密码。 输入上一步设置的，按进入IDE。 您现在将进入 code-server 并立即看到它的编辑器 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：
OutputPlease 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。
输出将与此类似：
OutputIMPORTANT 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 步 — 使用代码服务器接口
在本节中，您将使用代码服务器接口的一些功能。 由于 code-server 是运行在云端的 Visual Studio Code，它与独立桌面版具有相同的界面。
在 IDE 的左侧，有一个垂直的一排六个按钮，用于打开被称为活动栏的侧面板中最常用的功能。
此栏是可自定义的，因此您可以将这些视图移动到不同的顺序或从栏中删除它们。 默认情况下，第一个按钮在下拉菜单中打开常规菜单，而第二个视图打开资源管理器面板，该面板提供项目结构的树状导航。 您可以在此处管理您的文件夹和文件——根据需要创建、删除、移动和重命名它们。 下一个视图提供对搜索和替换功能的访问。
在此之后，按照默认顺序，是您对源代码控制系统的视图，例如 Git。 Visual Studio 代码还支持其他源代码控制提供程序，您可以在此 文档 中找到使用编辑器的源代码控制工作流程的进一步说明。
活动栏上的调试器选项提供了面板中调试的所有常用操作。 Visual Studio Code 内置了对 Node.js 运行时调试器和任何转换为 Javascript 的语言的支持。 对于其他语言，您可以为所需的调试器安装 extensions。 您可以将调试配置保存在launch.json文件中。
活动栏中的最后一个视图提供了一个菜单，用于访问 Marketplace 上的可用扩展。
GUI 的中心部分是您的编辑器，您可以通过选项卡将其分开以进行代码编辑。 您可以将编辑视图更改为网格系统或并排文件。
通过文件菜单创建新文件后，将在新选项卡中打开一个空文件，保存后，文件名将在资源管理器侧面板中查看。 可以通过右键单击资源管理器侧边栏并单击 New Folder 来创建文件夹。 您可以通过单击文件夹名称来展开文件夹，也可以将文件和文件夹拖放到层次结构的上部以将它们移动到新位置。
您可以通过输入 CTRL+SHIFT+` 或单击上方菜单下拉菜单中的 Terminal 并选择 New Terminal 来访问终端。 终端将在下方面板中打开，其工作目录将设置为项目的工作区，其中包含资源管理器侧面板中显示的文件和文件夹。
您已经浏览了代码服务器接口的高级概述并查看了一些最常用的功能。
结论
您现在拥有代码服务器，一个多功能的云 IDE，安装在您的 Ubuntu 20.04 服务器上，在您的域中公开并使用 Let's Encrypt 证书进行保护。 您现在可以单独处理项目，也可以在团队协作环境中工作。 运行云 IDE 可以释放本地计算机上的资源，并允许您在需要时扩展资源。 有关详细信息，请参阅 Visual Studio 代码文档 以获取有关代码服务器其他组件的附加功能和详细说明。
如果您想在 DigitalOcean Kubernetes 集群上运行代码服务器，请查看我们关于 如何在 DigitalOcean Kubernetes 上设置代码服务器云 IDE 平台的教程。
