如何在 DigitalOcean Kubernetes 上设置代码服务器云 IDE 平台

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

介绍

随着开发人员工具迁移到云端,云 IDE(集成开发环境)平台的创建和采用正在增长。云 IDE 允许开发团队之间实时协作,在统一的开发环境中工作,最大限度地减少不兼容性并提高生产力。可以通过 Web 浏览器访问,各种类型的现代设备都可以使用云 IDE。云 IDE 的另一个优势是可以利用集群的能力,这可以大大超过单个开发计算机的处理能力。

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

在本教程中,您将在 DigitalOcean Kubernetes 集群上设置代码服务器云 IDE 平台,并将其公开在您的域中,并使用 Let’s Encrypt 证书进行保护。最后,您将在 Kubernetes 集群上运行 Microsoft Visual Studio Code,可通过 HTTPS 访问并受密码保护。

先决条件

  • 一个 DigitalOcean Kubernetes 集群,您的连接配置为kubectl默认设置。创建集群时,有关如何配置的说明kubectl显示在“连接到集群”步骤下。要在 DigitalOcean 上创建 Kubernetes 集群,请参阅Kubernetes 快速入门

  • 安装在本地计算机上的 Helm 包管理器。为此,请完成步骤 1 并添加如何使用 Helm 3 包管理器教程在 Kubernetes 集群上安装软件的stable步骤 2 中的存储库

  • 使用 Helm 安装在集群上的 Nginx 入口控制器和证书管理器,以便使用入口资源公开代码服务器。为此,请遵循如何使用 Helm 在 DigitalOcean Kubernetes 上设置 Nginx Ingress

  • 一个完全注册的域名来托管代码服务器,指向 Nginx Ingress 使用的负载均衡器。本教程将code-server.your_domain贯穿始终。你可以购买一个域名Namecheap,免费获得一个在Freenom,或使用你选择的域名注册商。此域名必须与如何在 DigitalOcean Kubernetes 先决条件教程中设置 Nginx Ingress 中使用的域名不同。

第 1 步 – 安装和公开代码服务器

在本节中,您将使用 Nginx Ingress 控制器将代码服务器安装到您的 DigitalOcean Kubernetes 集群并在您的域中公开它。您还将设置入场密码。

作为 Nginx Ingress Controller 先决条件的一部分,您创建了示例服务和一个 Ingress。在本教程中您不需要它们,因此您可以通过运行以下命令来删除它们:

  • kubectl delete -f hello-kubernetes-first.yaml
  • kubectl delete -f hello-kubernetes-second.yaml
  • kubectl delete -f hello-kubernetes-ingress.yaml

kubectldelete命令在传递-f参数时接受要删除的文件

您将部署配置存储在本地计算机上的名为code-server.yaml. 使用以下命令创建它:

  • nano code-server.yaml

将以下行添加到文件中:

代码服务器.yaml
apiVersion: v1
kind: Namespace
metadata:
  name: code-server
---
apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: code-server
  namespace: code-server
  annotations:
    kubernetes.io/ingress.class: nginx
spec:
  rules:
  - host: code-server.your_domain
    http:
      paths:
      - backend:
          serviceName: code-server
          servicePort: 80
---
apiVersion: v1
kind: Service
metadata:
 name: code-server
 namespace: code-server
spec:
 ports:
 - port: 80
   targetPort: 8080
 selector:
   app: code-server
---
apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: code-server
  name: code-server
  namespace: code-server
spec:
  selector:
    matchLabels:
      app: code-server
  replicas: 1
  template:
    metadata:
      labels:
        app: code-server
    spec:
      containers:
      - image: codercom/code-server:latest
        imagePullPolicy: Always
        name: code-server
        env:
        - name: PASSWORD
          value: "your_password"

此配置定义了一个命名空间、一个部署、一个服务和一个入口。命名空间被调用code-server并将代码服务器安装与集群的其余部分分开。Deployment 包含codercom/code-serverDocker 镜像的一个副本,以及一个PASSWORD指定访问密码的环境变量

code-serverService内部暴露在端口吊舱(作为部署的一部分创建)80文件中定义的 Ingress 指定 Ingress Controller 是nginx,并且code-server.your_domain域将从 Service 提供服务。

记得your_password用你想要的密码替换code-server.your_domain用你想要的域,指向 Nginx 入口控制器的负载均衡器。

然后,通过运行以下命令在 Kubernetes 中创建配置:

  • kubectl create -f code-server.yaml

您将看到以下输出:

Output
namespace/code-server created ingress.networking.k8s.io/code-server created service/code-server created deployment.apps/code-server created

您可以通过运行以下命令来观察代码服务器 pod 是否可用:

  • kubectl get pods -w -n code-server

输出将如下所示:

Output
NAME READY STATUS RESTARTS AGE code-server-6c4745497c-l2n7w 0/1 ContainerCreating 0 12s

一旦状态变为Running,代码服务器就已完成安装到您的集群。

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

代码服务器登录提示

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

代码服务器 GUI

您已将 code-server 安装到 Kubernetes 集群并使其在您的域中可用。您还验证了它要求您使用密码登录。现在,您将继续使用 Cert-Manager 使用免费的 Let’s Encrypt 证书来保护它。

第 2 步 – 保护代码服务器部署

在本节中,您将通过将 Let’s Encrypt 证书应用于 Cert-Manager 将自动创建的 Ingress 来保护您的代码服务器安装。完成此步骤后,您的代码服务器安装将可以通过 HTTPS 访问。

打开code-server.yaml编辑:

  • nano code-server.yaml

将突出显示的行添加到您的文件中,确保将示例域替换为您自己的:

代码服务器.yaml
apiVersion: v1
kind: Namespace
metadata:
name: code-server
---
apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
name: code-server
namespace: code-server
annotations:
  kubernetes.io/ingress.class: nginx
    cert-manager.io/cluster-issuer: letsencrypt-prod
spec:
  tls:
  - hosts:
    - code-server.your_domain
    secretName: codeserver-prod
rules:
- host: code-server.your_domain
  http:
    paths:
    - backend:
        serviceName: code-server
        servicePort: 80
...

首先,您指定此 Ingress 将用于提供证书的集群颁发者将letsencrypt-prod作为先决条件的一部分创建。然后,您指定将在该tls部分下保护的域,以及您Secret持有它们的名称

通过运行以下命令将更改应用到 Kubernetes 集群:

  • kubectl apply -f code-server.yaml

您需要等待几分钟,让 Let’s Encrypt 配置您的证书。同时,您可以通过查看以下命令的输出来跟踪其进度:

  • kubectl describe certificate codeserver-prod -n code-server

完成后,输出的结尾将类似于以下内容:

Output
Events: Type Reason Age From Message ---- ------ ---- ---- ------- Normal GeneratedKey 48s cert-manager Generated a new private key Normal Requested 48s cert-manager Created new CertificateRequest resource "codeserver-prod-2203510748" Normal Issued 22s cert-manager Certificate issued successfully

您现在可以在浏览器中刷新您的域。您会在浏览器地址栏左侧看到挂锁,表示连接是安全的。

在此步骤中,您已配置 Ingress 以保护您的代码服务器部署。现在,您可以查看代码服务器用户界面。

第 3 步 – 探索代码服务器接口

在本节中,您将探索代码服务器接口的一些功能。由于代码服务器是在云中运行的 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+\,或通过按下终端的上一级菜单,并选择新航站楼终端将在较低的面板中打开,其工作目录将设置为项目的工作区,其中包含资源管理器侧面板中显示的文件和文件夹。

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

结论

您现在已经在 DigitalOcean Kubernetes 集群上安装了代码服务器,这是一个多功能的云 IDE。您可以单独处理源代码和文档,也可以与团队协作。在集群上运行云 IDE 可为测试、下载和更彻底或更严格的计算提供更强大的功能。有关更多信息,请参阅有关附加功能Visual Studio Code 文档以及有关代码服务器其他组件的详细说明。

觉得文章有用?

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