分类
文章

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

介绍

随着开发人员工具向云计算的发展,云IDE(集成开发环境)平台的创建和采用正在增长。Cloud IDE允许开发人员团队之间进行实时协作,以在统一的开发环境中工作,从而最大程度地减少不兼容性并提高生产力。可以通过Web浏览器访问,各种类型的现代设备都可以使用Cloud IDE。

代码服务器是运行在远程服务器上的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 。

  • 为服务器设置了以下两个DNS记录。

    • your-domain指向服务器公共IP地址的A记录。
    • 指向服务器公共IP地址的A记录。www.your-domain
  • 托管代码服务器的完整注册域名,指向您的服务器。本教程将通篇使用。你可以购买一个域名Namecheap,免费获得一个在Freenom,或使用你选择的域名注册商。code-server.your-domain

步骤1-安装代码服务器

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

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

  • mkdir ~/code-server

导航到它:

  • cd ~/code-server

您需要转到代码服务器的Github版本页面,并选择最新的Linux版本(该文件的名称中将包含“ linux”)。在撰写本文时,最新版本为2.1692wget通过运行以下命令来下载它:

  • wget https://github.com/cdr/code-server/releases/download/2.1692-vsc1.39.2/code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz

然后,通过运行以下命令解压缩归档文件:

  • tar -xzvf code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz

您将获得一个与下载的原始文件完全相同的文件夹,其中包含代码服务器可执行文件。导航到它:

  • cd code-server2.1692-vsc1.39.2-linux-x86_64

将代码服务器可执行文件复制到,/usr/local/bin以便您可以通过运行以下命令在系统范围内对其进行访问:

  • sudo cp code-server /usr/local/bin

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

  • sudo mkdir /var/lib/code-server

现在,您已经下载了代码服务器并使其在整个系统范围内可用,您将创建一个systemd服务,以使代码服务器始终在后台运行。

您将服务配置存储在目录中名为的文件code-server.service/lib/systemd/system,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/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password
Restart=always

[Install]
WantedBy=multi-user.target

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

您还指定应使用一些特定于代码服务器的参数来启动全局代码服务器可执行文件。 --host 127.0.0.1将其绑定到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 Mon 2019-12-09 20:07:28 UTC; 4s ago Main PID: 5216 (code-server) Tasks: 23 (limit: 2362) CGroup: /system.slice/code-server.service ├─5216 /usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password └─5240 /usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password Dec 09 20:07:28 code-server-ubuntu-1804 systemd[1]: Started code-server. Dec 09 20:07:29 code-server-ubuntu-1804 code-server[5216]: info Server listening on http://127.0.0.1:8080 Dec 09 20:07:29 code-server-ubuntu-1804 code-server[5216]: info - Using custom password for authentication Dec 09 20:07:29 code-server-ubuntu-1804 code-server[5216]: info - Not serving HTTPS

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

  • sudo systemctl enable code-server

在此步骤中,您已经下载了代码服务器并使其在全球范围内可用。然后,您已经为其创建了systemd服务并启用了该服务,因此代码服务器将在每次服务器启动时启动。接下来,通过配置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 port 80。然后,您指定一个server_name告诉Nginx哪个域接受请求并应用此特定配置的。在下一个块中,对于根位置(/),您指定应将请求来回传递给运行在的代码服务器localhost:8080。接下来的三行(以开头proxy_set_header)命令Nginx继承一些HTTP请求标头,这些标头是WebSockets正确运行所必需的,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(未复杂的防火墙)并将其配置为允许未加密的HTTP通信。为了能够访问受保护的站点,您需要通过运行以下命令将其配置为接受加密的流量:

  • sudo ufw allow https

输出将是:

Output
Rule added Rule added (v6)

与Nginx类似,您需要重新加载它才能使配置生效:

  • sudo ufw reload

输出将显示:

Output
Firewall reloaded

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

代码服务器登录提示

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

代码服务器GUI

现在,您已经检查了代码服务器在域中是否正确公开,接下来,您将使用Certbot安装“让我们加密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的调试器视图

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

代码服务器GUI-选项卡

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

编辑器网格视图

通过File菜单创建新文件后,一个空文件将在新选项卡中打开,保存后,该文件的名称将在“资源管理器”侧面板中可见。可以通过右键单击资源管理器侧栏并单击来创建文件夹New Folder。您可以通过以下方式展开文件夹:单击文件夹的名称,然后将文件和文件夹拖放到层次结构的上部,以将其移动到新位置。

代码服务器GUI-新文件夹

您可以通过输入CTRL+SHIFT+`,或单击Terminal上方菜单下拉菜单中的,然后选择来访问终端New Terminal。终端将在下部面板中打开,其工作目录将设置为项目的工作区,其中包含“资源管理器”侧面板中显示的文件和文件夹。

您已经浏览了代码服务器界面的高级概述,并回顾了一些最常用的功能。

结论

现在,您已经在Ubuntu 18.04服务器上安装了代码服务器(一种通用的云IDE),该服务器在您的域中公开,并使用Let’s Encrypt证书进行保护。现在,您可以单独进行项目,也可以在团队协作中进行工作。运行云IDE会释放本地计算机上的资源,并允许您在需要时扩展资源。有关更多信息,请参见Visual Studio代码文档以获取其他功能以及有关代码服务器其他组件的详细说明。

发表评论

电子邮件地址不会被公开。 必填项已用*标注