作者选择了 自由和开源基金作为 写给捐款计划的一部分接受捐款。
介绍
随着开发人员的工具转向云,云 IDE(集成开发环境)平台的创建和采用正在增加。云 IDE允许开发人员团队之间实时协作,在一个统一的开发环境中工作,从而最大限度地减少不兼容性和提高生产力。
代码服务器是 Microsoft Visual Studio Code在远程服务器上运行,可以直接从您的浏览器访问。Visual Studio Code是一个现代代码编辑器,具有集成的Git支持,代码调试器,智能自动完成,以及可自定义和可扩展的功能。
在本教程中,您将在您的 Ubuntu 22.04 计算机上设置代码服务器云 IDE 平台,并将其暴露在您的域中,以免费的 Let's Encrypt TLS 证书保护。
前提条件
- 运行 Ubuntu 22.04 的服务器至少有 2GB RAM、 root 访问和 sudo 非 root 帐户. 您可以通过遵循 此初始服务器设置指南来设置此功能。
- Nginx 安装在您的服务器上。 有关如何做到这一点的指南,请完成步骤 1 到 4 的 How To Install Nginx on Ubuntu 22.04。
- 一个完全注册的域名来托管代码服务器,指向您的服务器。 此教程将使用
code-server.your-domain在整个服务器上。 您可以在 Namecheap上购买域名,在 [Freen(INKL3])上免费获取域名
步骤 1 – 安装代码服务器
在此步骤中,您将通过下载最新版本在您的服务器上设置代码服务器,并创建一个 systemd服务,使代码服务器在后台运行。
您将将所有与代码服务器相关的数据存储在名为~/code-server的文件夹中。
1mkdir ~/code-server
然后航行到它:
1cd ~/code-server
您需要从 代码服务器的 Github 版本获取最新的 Linux 构建(该文件将在其名称中包含「linux」)。
1wget https://github.com/coder/code-server/releases/download/v4.8.2/code-server-4.8.2-linux-amd64.tar.gz
然后通过运行来解包档案:
1tar -xzvf code-server-4.8.2-linux-amd64.tar.gz
您将收到一个名为您下载的原始文件的文件夹,其中包含代码服务器的源代码. 运行以下命令将其复制到 /usr/lib/code-server,这样您将能够访问它系统广泛:
1sudo cp -r code-server-4.8.2-linux-amd64 /usr/lib/code-server
然后在/usr/bin/code-server上创建一个符号链接,指向代码服务器可执行:
1sudo ln -s /usr/lib/code-server/bin/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,所以它只能直接从您的服务器内部访问。--user-data-dir /var/lib/code-server设置了其用户数据目录。
请记住用你想要的密码代替your_password。下一行告诉systemd在所有故障事件中重新启动代码服务器(例如,当它崩溃或进程死亡时)。
[安装]部分命令systemd在登录到您的服务器时启动此服务。
保存并关闭文件。
通过运行以下命令启动代码服务器服务:
1sudo systemctl start code-server
检查它是否开始正确,观察其状态:
1sudo systemctl status code-server
您将收到类似于此的输出:
1[secondary_label Output]
2
3● code-server.service - code-server
4 Loaded: loaded (/lib/systemd/system/code-server.service; disabled; preset: enabled)
5 Active: active (running) since Thu 2022-11-03 12:39:26 UTC; 5s ago
6 Main PID: 2670 (node)
7 Tasks: 22 (limit: 1116)
8 Memory: 90.9M
9 CPU: 799ms
10 CGroup: /system.slice/code-server.service
11 ├─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
12 └─2692 /usr/lib/code-server/lib/node /usr/lib/code-server/out/node/entry
要使代码服务器在重新启动服务器后自动启动,请使用以下命令启用其服务:
1sudo systemctl enable code-server
您将收到一个响应,即生成了一个 symlink:
1[secondary_label Output]
2Created symlink /etc/systemd/system/multi-user.target.wants/code-server.service → /lib/systemd/system/code-server.service.
在此步骤中,您下载了代码服务器并使其在全球范围内可用,然后您为代码服务器创建了一个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}
用您想要的域名取代code-server.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 提供该证书。
作为前提条件的一部分,您启用了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
然后,在您的浏览器中,导航到您为代码服务器使用的域。
代码服务器正在询问您的密码. 输入您在上一步设置的密码,然后按 Enter IDE. 您现在将输入代码服务器并立即访问其编辑器的GUI。
现在,您已经检查了代码服务器是否正确暴露在您的域,您将使用 Certbot 安装 Let's Encrypt TLS 证书来保护它。
要安装最新版本的 Certbot 及其 Nginx 插件,请运行以下命令:
1sudo apt install certbot python3-certbot-nginx -y
要要求您的域的证书,运行以下命令:
1sudo certbot --nginx -d code-server.your-domain
在这个命令中,你运行certbot来请求您的域的证书. 你通过域名与-d参数. --nginx旗帜告诉它自动更改 Nginx 网站配置以支持 HTTPS. 记住用您的域名更换code-server.your-domain。
如果这是您第一次运行 Certbot,您将被要求提供紧急通知的电子邮件地址,并接受 EFF 的服务条款。
结果将类似于此:
1[secondary_label Output]
2Requesting a certificate for code-server.your-domain
3
4Successfully received certificate.
5Certificate is saved at: /etc/letsencrypt/live/code-server.your-domain/fullchain.pem
6Key is saved at: /etc/letsencrypt/live/code-server.your-domain/privkey.pem
7This certificate expires on 2023-02-01.
8These files will be updated when the certificate renews.
9Certbot has set up a scheduled task to automatically renew this certificate in the background.
10
11Deploying certificate
12Successfully deployed certificate for code-server.your-domain.com to /etc/nginx/sites-enabled/code-server.conf
13Congratulations! You have successfully enabled HTTPS on https://code-server.your-domain
14
15- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
16If you like Certbot, please consider supporting our work by:
17 * Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate
18 * Donating to EFF: https://eff.org/donate-le
19- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
此输出表明 Certbot 已成功生成 TLS 证书并将其应用到您的域的 Nginx 配置中,您现在可以在浏览器中重新加载您的代码服务器域,并在网站地址的左侧观察到一个锁定,这意味着您的连接是正确的。
现在你有代码服务器可通过安全的 Nginx 反向代理服务器访问到你的域,你已经准备好审查代码服务器的用户界面。
步骤 4 – 使用代码服务器接口
在本节中,您将使用代码服务器界面的一些功能,因为代码服务器是运行在云中的Visual Studio Code,它与独立桌面版本具有相同的界面。
在IDE的左侧,有一个六个按钮的垂直行,在一个被称为活动栏的侧面面板中最常用的功能:
此栏是可自定义的,所以您可以移动这些按钮或从栏中移除它们。默认情况下,第一个按钮(汉堡菜单图标)在下滑时打开一般菜单,而第二个按钮(文件夹图标)打开 Explorer 面板,提供项目结构的树形导航。您可以在这里管理您的文件和文件,根据需要创建、删除、移动和更名。
然后,在默认顺序下,是提供源控制系统视图的图标,例如 Git。
Visual Studio Code 配备了内置的 Node.js运行时调试器和任何转载到 Javascript的语言的支持。 对于其他语言,您可以为所需调试器安装 扩展。 四块按钮,这是活动栏中的最终视图,提供了访问 VSCode Marketplace 上可用的扩展的菜单。
GUI的主要区域是您的编辑器,您可以通过编辑代码的标签来将其分开,您可以将编辑视图更改为网格系统或侧面文件。
在您的浏览器中打开code-server.your-domain/?folder=/var/lib/code-server/User,将加载现有文件夹。
选择汉堡菜单图标打开选项菜单,然后选择 ** 文件 ** 菜单,您将创建一个 ** 新文件 **. 命名文件并将其保存到默认文件夹位置。
一旦保存,该文件将可在 Explorer 侧面板中查看。创建文件夹可以通过右键单击 Explorer 侧面栏并点击 新文件夹。您可以通过点击其名称来扩展文件夹,并将文件和文件夹拖放到层次结构的顶部,将其移动到一个新的位置。
您可以通过点击上下载菜单中的 Terminal来访问终端,然后选择 新终端。您也可以使用菜单中列出的键盘快捷键。
在此步骤中,您审查了代码服务器接口和一些最常用的功能。
结论
您现在有代码服务器,一个多功能的云 IDE,安装在您的 Ubuntu 22.04 服务器上,暴露在您的域,并使用 Let's Encrypt 证书进行安全。您现在可以单独或作为一个团队一起在项目上工作。运行云 IDE 释放了本地机器上的资源,并允许您在需要时扩展资源。
如果您想在您的 DigitalOcean Kubernetes 集群上运行代码服务器,请参阅我们的教程 如何在 DigitalOcean Kubernetes 上设置代码服务器云 IDE 平台。