如何在 Debian 10 上设置 code-server 云 IDE 平台

作者选择了 自由和开源基金作为 写给捐款计划的一部分接受捐款。

介绍

随着开发人员的工具转向云,云 IDE(集成开发环境)平台的创建和采用正在增加。云 IDE允许开发人员团队之间实时协作,在一个统一的开发环境中工作,从而最大限度地减少不兼容性和提高生产力。

代码服务器是 Microsoft Visual Studio Code在远程服务器上运行,可以直接从您的浏览器访问。Visual Studio Code是一个现代代码编辑器,具有集成的Git支持,代码调试器,智能自动完成,以及可自定义和可扩展的功能。

在本教程中,您将在您的 Debian 10 计算机上设置代码服务器云 IDE 平台,并将其暴露在您的域中,以免费的 Let's Encrypt TLS 证书保护。

前提条件

  • 运行 Debian 10 的服务器至少有 2 GB 的 RAM、 root 访问和 sudo 非 root 帐户. 您可以通过遵循 此初始服务器设置指南来设置此设置。
  • Nginx 安装在您的服务器上。 有关如何做到这一点的指南,请完成 如何在 Debian 10 上安装 Nginx 的步骤 1 到 4。
  • 一个完全注册的域名来托管代码服务器,指向您的服务器。 此教程将使用code-server.your-domain在整个服务器上。 您可以在 Namecheap上购买域名,在 Freen上免费

步骤 1 – 安装代码服务器

在本节中,您将在您的服务器上设置代码服务器. 这意味着下载最新版本并创建一个 systemd服务,使代码服务器始终在后台运行。

您将将所有与代码服务器相关的数据存储在名为~/code-server的文件夹中。

1mkdir ~/code-server

导航它:

1cd ~/code-server

您需要转到代码服务器的 Github 发布页面,选择最新的 Linux 构建(该文件将在其名称中包含linux)。

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

然后,通过运行来解包档案:

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

您将收到一个名为完全与您下载的原始文件一样的文件夹,其中包含代码服务器的源代码. 将其复制到 /usr/lib/code-server,这样您将能够通过执行以下命令来访问该系统:

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

然后,在/usr/bin/code-server上创建一个符号链接,指向代码服务器可执行:

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

接下来,为代码服务器创建一个文件夹,其中将存储用户数据:

1sudo mkdir /var/lib/code-server

现在你已经下载了代码服务器并使其在整个系统中可用,你将创建一个 systemd 服务,使代码服务器始终在背景中运行。

您将将服务配置存储在名为 code-server.service 的文件中,在 /lib/systemd/system 目录中,在那里 systemd 存储其服务。

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

添加以下几行:

 1[label /lib/systemd/system/code-server.service]
 2[Unit]
 3Description=code-server
 4After=nginx.service
 5
 6[Service]
 7Type=simple
 8Environment=PASSWORD=your_password
 9ExecStart=/usr/bin/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password
10Restart=always
11
12[Install]
13WantedBy=multi-user.target

在这里,您首先指定服务的描述,然后,您表示nginx服务必须在此之前启动,在[Unit]部分之后,您定义了服务的类型(简单意味着该过程应该简单地运行),并提供将执行的命令。

您还指定全球代码服务器可执行的应该是由几个代码服务器特定的参数开始的。 --bind-addr 127.0.0.1:8080 将其绑定到 localhost 在端口 8080,所以它只能直接从您的服务器内部访问。

记住用你想要的密码代替your_password,然后保存并关闭文件。

下一行告诉 systemd 在所有故障事件中重新启动代码服务器(例如,当它崩溃或进程被杀死时)。

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

1sudo systemctl start code-server

检查它是否开始正确,观察其状态:

1sudo systemctl status code-server

你会看到类似的输出:

 1[secondary_label Output]
 2● code-server.service - code-server
 3   Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled)
 4   Active: active (running) since Wed 2020-05-13 19:31:00 UTC; 13s ago
 5 Main PID: 1851 (node)
 6    Tasks: 14 (limit: 2378)
 7   Memory: 25.7M
 8   CGroup: /system.slice/code-server.service
 9           ├─1851 /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
10           └─1862 /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
11
12May 13 19:31:00 code-server-update systemd[1]: Started code-server.
13May 13 19:31:01 code-server-update code-server[1851]: info code-server 3.2.0 fd36a99a4c78669970ebc4eb05768293b657716f
14May 13 19:31:01 code-server-update code-server[1851]: info HTTP server listening on http://127.0.0.1:8080
15May 13 19:31:01 code-server-update code-server[1851]: info    - Using custom password for authentication
16May 13 19:31:01 code-server-update code-server[1851]: info    - Not serving HTTPS
17May 13 19:31:01 code-server-update code-server[1851]: info Automatic updates are enabled

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

1sudo systemctl enable code-server

在此步骤中,您已下载了代码服务器并在全球范围内提供。然后,您为其创建了一个 systemd 服务,并启用了它,因此代码服务器将在每个服务器启动时启动。

步骤 2 — 在您的域名中曝光代码服务器

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

正如您在 Nginx 前提步骤中所学到的,其网站配置文件存储在/etc/nginx/sites-available下,并必须随后被同步链接到/etc/nginx/sites-enabled才能激活。

您将存储在名为 code-server.conf 的文件中,在 /etc/nginx/sites-available 下显示代码服务器的配置。

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

添加以下几行:

 1[label /etc/nginx/sites-available/code-server.conf]
 2server {
 3    listen 80;
 4    listen [::]:80;
 5
 6    server_name code-server.your-domain;
 7
 8    location / {
 9    	proxy_pass http://localhost:8080/;
10    	proxy_set_header Upgrade $http_upgrade;
11    	proxy_set_header Connection upgrade;
12    	proxy_set_header Accept-Encoding gzip;
13    }
14}

用您想要的域名替换 domain.your-domain,然后保存并关闭文件。

在此文件中,您定义了 Nginx 应该倾听 HTTP 端口 80. 然后,您指定一个 server_name 告诉 Nginx 哪个域接受请求并应用此特定配置。 在下一个块中,对于根位置 (/),您指定了请求应该向运行在 localhost:8080 的代码服务器传递。 接下来的三行(从 proxy_set_header 开始)命令 Nginx 传输一些 HTTP 请求标题,这些请求是为 WebSockets 正确运作所必需的,代码服务器广泛使用。

要激活此网站配置,您需要在 /etc/nginx/sites-enabled 文件夹中创建一个 symlink:

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

要测试配置的有效性,请运行以下命令:

1sudo nginx -t

您将看到以下输出:

1[secondary_label Output]
2nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
3nginx: configuration file /etc/nginx/nginx.conf test is successful

要使配置生效,您需要重新启动 Nginx:

1sudo systemctl restart nginx

现在您的代码服务器安装可以在您的域中访问。在下一步,您将通过应用免费的 Let's Encrypt TLS 证书来保护它。

步骤三:确保您的域名

在本节中,您将使用 Let's Encrypt TLS 证书保护您的域名,您将使用 Certbot 提供该证书。

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

1sudo apt install certbot python-certbot-nginx

作为前提条件的一部分,您已启用ufw(不复杂的防火墙)并配置为允许未加密的 HTTP 流量。

1sudo ufw allow https

产量将是:

1[secondary_label Output]
2Rule added
3Rule added (v6)

类似于 Nginx,您需要重新加载它,以便配置生效:

1sudo ufw reload

结果将显示:

1[secondary_label Output]
2Firewall reloaded

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

code-server login prompt

代码服务器正在询问您的密码. 输入您在上一步设置的密码,然后按 Enter IDE. 您现在将输入代码服务器并立即看到其编辑器的GUI。

code-server GUI

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

要要求您的域的证书,运行以下命令:

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

在这个命令中,你运行certbot来请求您的域的证书 - 你通过域名与-d参数。--nginx旗帜告诉它自动更改 Nginx网站配置以支持HTTPS。

如果这是您第一次运行 Certbot,您将被要求提供紧急通知的电子邮件地址,并接受 EFF 的服务条款。

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

建议选择第二种选项以最大限度地提高安全性. 输入选项后,按ENTER。

结果将类似于此:

 1[secondary_label Output]
 2IMPORTANT NOTES:
 3 - Congratulations! Your certificate and chain have been saved at:
 4   /etc/letsencrypt/live/code-server.your-domain/fullchain.pem
 5   Your key file has been saved at:
 6   /etc/letsencrypt/live/code-server.your-domain/privkey.pem
 7   Your cert will expire on ... To obtain a new or tweaked
 8   version of this certificate in the future, simply run certbot again
 9   with the "certonly" option. To non-interactively renew *all* of
10   your certificates, run "certbot renew"
11 - Your account credentials have been saved in your Certbot
12   configuration directory at /etc/letsencrypt. You should make a
13   secure backup of this folder now. This configuration directory will
14   also contain certificates and private keys obtained by Certbot so
15   making regular backups of this folder is ideal.
16 - If you like Certbot, please consider supporting our work by:
17
18   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
19   Donating to EFF:                    https://eff.org/donate-le

这意味着Certbot已经成功地生成了TLS证书,并将其应用到您的域的Nginx配置中,您现在可以在浏览器中重新加载您的代码服务器域,并在网站地址的左侧观察到一个锁定,这意味着您的连接是正确的。

现在你有代码服务器可通过安全的 Nginx 反向代理服务器访问到你的域,你已经准备好审查代码服务器的用户界面。

步骤 4 – 使用代码服务器接口

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

在IDE的左侧,有一个六个按钮的垂直行,在被称为活动栏的侧面面板中打开了最常用的功能。

code-server GUI - Sidepanel

此栏可以自定义,以便您可以将这些视图移动到不同的顺序或从栏中删除它们. 默认情况下,第一个按钮在下滑时打开一般菜单,而第二个视图打开探索器面板,提供项目结构的树形导航。

然后,在默认顺序下,是您对源控制系统的视图,如 Git。Visual Studio 代码也支持其他源控制提供商,您可以在本文档中找到有关源控制工作流的进一步说明(https://code.visualstudio.com/docs/editor/versioncontrol)。

Git pane with context-menu open

活动栏上的调试选项提供了面板上的所有常见调试操作。Visual Studio Code 配备了内置的 Node.js运行时调试器和任何转载到 Javascript的语言的支持。 对于其他语言,您可以为所需调试器安装 扩展。

Debugger View with launch.json open

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

code-server GUI - Tabs

GUI的中心部分是您的编辑器,您可以通过标签来分离编辑代码,您可以将编辑视图更改为网格系统或旁边的文件。

Editor Grid View

通过 ** 文件 ** 菜单创建新文件后,一个空的文件将打开在一个新的卡片中,一旦保存,该文件的名称将可在 Explorer 侧面面板中查看。

code-server GUI - New Folder

您可以通过输入CTRL+SHIFT+来访问终端,或者在上面的下载菜单中点击终端**,然后选择新终端**。

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

结论

您现在有代码服务器,一个多功能的云 IDE,安装在您的 Debian 10 服务器上,暴露在您的域,并使用 Let's Encrypt 证书进行保护。您现在可以单独在项目上工作,也可以在团队协作环境中工作。运行云 IDE 可在本地机器上释放资源,并允许您在需要时扩展资源。

如果您想在您的 DigitalOcean Kubernetes 集群上运行代码服务器,请参阅我们的教程 如何在 DigitalOcean Kubernetes 上设置代码服务器云 IDE 平台。

Published At
Categories with 技术
Tagged with
comments powered by Disqus