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

介绍 (Introduction)

With developer tools moving to the cloud, creation and adoption of cloud IDE (Integrated Development Environment) platforms is growing. Cloud IDEs allow for real-time collaboration between developer teams to work in a unified development environment that minimizes incompatibilities and enhances productivity. Accessible through web browsers, cloud IDEs are available from every type of modern device. Another advantage of a cloud IDE is the possibility to leverage the power of a cluster, which can greatly exceed the processing power of a single development computer.

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

code-server is Microsoft Visual Studio Code running on a remote server and accessible directly from your browser. Visual Studio Code is a modern code editor with integrated Git support, a code debugger, smart autocompletion, and customizable and extensible features. This means that you can use various devices, running different operating systems, and always have a consistent development environment on hand.

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

In this tutorial, you will set up the code-server cloud IDE platform on your DigitalOcean Kubernetes cluster and expose it at your domain, secured with Let’s Encrypt certificates. In the end, you’ll have Microsoft Visual Studio Code running on your Kubernetes cluster, available via HTTPS and protected by a password.

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

先决条件 (Prerequisites)

• A DigitalOcean Kubernetes cluster with your connection configured as the kubectl default. Instructions on how to configure kubectl are shown under the Connect to your Cluster step when you create your cluster. To create a Kubernetes cluster on DigitalOcean, see Kubernetes Quickstart.

  一个DigitalOcean Kubernetes集群，其连接配置为kubectl默认。 创建集群时，“如何连接到集群”步骤下会显示有关如何配置kubectl说明。 要在DigitalOcean上创建Kubernetes集群，请参阅Kubernetes Quickstart 。

• The Helm package manager installed on your local machine. To do this, complete Step 1 and add the stable repo from Step 2 of the How To Install Software on Kubernetes Clusters with the Helm 3 Package Manager tutorial.

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

• The Nginx Ingress Controller and Cert-Manager installed on your cluster using Helm in order to expose code-server using Ingress Resources. To do this, follow How to Set Up an Nginx Ingress on DigitalOcean Kubernetes Using Helm.

  使用Helm在群集上安装了Nginx Ingress Controller和Cert-Manager，以便使用Ingress资源公开代码服务器。 为此，请遵循如何使用Helm在DigitalOcean Kubernetes上设置Nginx入口 。

• A fully registered domain name to host code-server, pointed at the Load Balancer used by the Nginx Ingress. This tutorial will use code-server.your_domain throughout. You can purchase a domain name on Namecheap, get one for free on Freenom, or use the domain registrar of your choice. This domain name must differ from the one used in the How To Set Up an Nginx Ingress on DigitalOcean Kubernetes prerequisite tutorial.

  主机代码服务器的完整注册域名，指向Nginx Ingress使用的负载均衡器。 本教程将始终使用code-server.your_domain 。 你可以购买一个域名Namecheap ，免费获得一个在Freenom ，或使用你选择的域名注册商。 此域名必须与如何在DigitalOcean Kubernetes必备条件教程中设置Nginx入口中使用的域名不同。

第1步-安装和公开代码服务器 (Step 1 — Installing and Exposing code-server)

In this section, you’ll install code-server to your DigitalOcean Kubernetes cluster and expose it at your domain, using the Nginx Ingress controller. You will also set up a password for admittance.

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

As part of the Nginx Ingress Controller prerequisite, you created example Services and an Ingress. You won’t need them in this tutorial, so you can delete them by running the following commands:

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

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

The kubectl delete command accepts the file to delete when passed the -f parameter.

当传递-f参数时，kubectl delete命令接受要删除的文件。

You’ll store the deployment configuration on your local machine, in a file named code-server.yaml. Create it using the following command:

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

• nano code-server.yaml
  纳米代码server.yaml

Add the following lines to the file:

将以下行添加到文件中：

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"

This configuration defines a Namespace, a Deployment, a Service, and an Ingress. The Namespace is called code-server and separates the code-server installation from the rest of your cluster. The Deployment consists of one replica of the codercom/code-server Docker image, and an environment variable named PASSWORD that specifies the password for access.

此配置定义了名称空间，部署，服务和入口。 命名空间称为code-server ，将代码服务器的安装与群集的其余部分分开。 部署包括codercom/code-server Docker映像的一个副本，以及一个名为PASSWORD的环境变量，用于指定访问密码。

The code-server Service internally exposes the pod (created as a part of the Deployment) at port 80. The Ingress defined in the file specifies that the Ingress Controller is nginx, and that the code-server.your_domain domain will be served from the Service.

code-server服务在端口80内部公开Pod(作为Deployment的一部分创建)。 文件中定义的Ingress指定Ingress Controller为nginx ，并且将通过Service提供code-server.your_domain域。

Remember to replace your_password with your desired password, and code-server.your_domain with your desired domain, pointed to the Load Balancer of the Nginx Ingress Controller.

切记用所需的密码替换your_password ，并用所需的域替换code-server.your_domain ，指向Nginx Ingress Controller的负载均衡器。

Then, create the configuration in Kubernetes by running the following command:

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

• kubectl create -f code-server.yaml
  kubectl创建-f code-server.yaml

You’ll see the following output:

您将看到以下输出：

   
   

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

You can watch the code-server pod become available by running:

您可以通过运行以下命令查看代码服务器容器的可用状态：

• kubectl get pods -w -n code-server
  kubectl获取pods -w -n代码服务器

The output will look like:

输出将如下所示：

   
   

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

As soon as the status becomes Running, code-server has finished installing to your cluster.

一旦状态变为Running ，代码服务器就完成了对集群的安装。

Navigate to your domain in your browser. You’ll see the login prompt for code-server.

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

code-server is asking you for your password. Enter the one you set in the previous step and press Enter IDE. You’ll now enter code-server and immediately see its editor GUI.

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

You’ve installed code-server to your Kubernetes cluster and made it available at your domain. You have also verified that it requires you to log in with a password. Now, you’ll move on to secure it with free Let’s Encrypt certificates using Cert-Manager.

您已经将代码服务器安装到Kubernetes集群并使其在您的域中可用。 您还验证了它要求您使用密码登录。 现在，您将继续使用Cert-Manager使用免费的“让我们加密”证书来保护它。

第2步-保护代码服务器部署 (Step 2 — Securing the code-server Deployment)

In this section, you will secure your code-server installation by applying Let’s Encrypt certificates to your Ingress, which Cert-Manager will automatically create. After completing this step, your code-server installation will be accessible via HTTPS.

在本部分中，您将对加密证书管理器自动创建的Ingress应用“让我们加密”证书来保护代码服务器的安装。 完成此步骤后，即可通过HTTPS访问您的代码服务器安装。

Open code-server.yaml for editing:

打开code-server.yaml进行编辑：

• nano code-server.yaml
  纳米代码server.yaml

Add the highlighted lines to your file, making sure to replace the example domain with your own:

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

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
...

First, you specify that the cluster-issuer that this Ingress will use to provision certificates will be letsencrypt-prod, created as a part of the prerequisites. Then, you specify the domains that will be secured under the tls section, as well as your name for the Secret holding them.

首先，您指定此Ingress用来提供证书的群集发布者将是letsencrypt-prod ，它是必备组件的一部分。 然后，您可以在tls部分下指定将要保护的域，以及保存它们的Secret的名称。

Apply the changes to your Kubernetes cluster by running the following command:

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

• kubectl apply -f code-server.yaml
  kubectl应用-f code-server.yaml

You’ll need to wait a few minutes for Let’s Encrypt to provision your certificate. In the meantime, you can track its progress by looking at the output of the following command:

您需要等待几分钟，让我们加密来设置您的证书。 同时，您可以通过查看以下命令的输出来跟踪其进度：

• kubectl describe certificate codeserver-prod -n code-server
  kubectl描述证书codeserver-prod -n代码服务器

When it finishes, the end of the output will look similar to this:

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

   
   

    
    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

You can now refresh your domain in your browser. You’ll see the padlock to the left of the address bar in your browser signifying that the connection is secure.

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

In this step, you have configured the Ingress to secure your code-server deployment. Now, you can review the code-server user interface.

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

第3步-探索代码服务器界面 (Step 3 — Exploring the code-server Interface)

In this section, you’ll explore some of the features of the code-server interface. Since code-server is Visual Studio Code running in the cloud, it has the same interface as the standalone desktop edition.

在本节中，您将探索代码服务器界面的一些功能。 由于代码服务器是在云中运行的Visual Studio Code，因此它具有与独立台式机版本相同的界面。

On the left-hand side of the IDE, there is a vertical row of six buttons opening the most commonly used features in a side panel known as the Activity Bar.

在IDE的左侧，垂直排成一行的六个按钮在侧面板(称为活动栏)中打开最常用的功能。

This bar is customizable so you can move these views to a different order or remove them from the bar. By default, the first view opens the Explorer panel that provides tree-like navigation of the project’s structure. You can manage your folders and files here—creating, deleting, moving, and renaming them as necessary. The next view provides access to a search and replace functionality.

该栏是可自定义的，因此您可以将这些视图移动到其他顺序或从栏中删除它们。 默认情况下，第一个视图打开“资源管理器”面板，该面板提供了项目结构的树状导航。 您可以在此处管理文件夹和文件-根据需要创建，删除，移动和重命名它们。 下一个视图提供对搜索和替换功能的访问。

Following this, in the default order, is your view of the source control systems, like Git. Visual Studio code also supports other source control providers and you can find further instructions for source control workflows with the editor in this documentation.

接下来，以默认顺序查看源代码管理系统，例如Git 。 Visual Studio代码还支持其他源代码管理提供程序，您可以在本文档中使用编辑器找到有关源代码管理工作流的更多说明。

The debugger option on the Activity Bar provides all the common actions for debugging in the panel. Visual Studio Code comes with built-in support for the Node.js runtime debugger and any language that transpiles to Javascript. For other languages you can install extensions for the required debugger. You can save debugging configurations in the launch.json file.

活动栏上的调试器选项提供了面板中所有常见的调试操作。 Visual Studio Code内置支持Node.js运行时调试器以及任何可转换为Javascript的语言。 对于其他语言，您可以安装所需调试器的扩展 。 您可以将调试配置保存在launch.json文件中。

The final view in the Activity Bar provides a menu to access available extensions on the Marketplace.

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

The central part of the GUI is your editor, which you can separate by tabs for your code editing. You can change your editing view to a grid system or to side-by-side files.

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

After creating a new file through the File menu, an empty file will open in a new tab, and once saved, the file’s name will be viewable in the Explorer side panel. Creating folders can be done by right clicking on the Explorer sidebar and pressing on New Folder. You can expand a folder by clicking on its name as well as dragging and dropping files and folders to upper parts of the hierarchy to move them to a new location.

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

You can gain access to a terminal by pressing CTRL+SHIFT+\, or by pressing on Terminal in the upper menu, and selecting New Terminal. The terminal will open in a lower panel and its working directory will be set to the project’s workspace, which contains the files and folders shown in the Explorer side panel.

您可以按访问终端CTRL+SHIFT+\ ，或者通过在菜单上按下终端 ，并选择新航站楼 。 终端将在下面的面板中打开，其工作目录将设置为项目的工作区，其中包含“资源管理器”侧面板中显示的文件和文件夹。

You’ve explored a high-level overview of the code-server interface and reviewed some of the most commonly used features.

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

结论 (Conclusion)

You now have code-server, a versatile cloud IDE, installed on your DigitalOcean Kubernetes cluster. You can work on your source code and documents with it individually or collaborate with your team. Running a cloud IDE on your cluster provides more power for testing, downloading, and more thorough or rigorous computing. For further information see the Visual Studio Code documentation on additional features and detailed instructions on other components of code-server.

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

翻译自: https://www.digitalocean.com/community/tutorials/how-to-set-up-the-code-server-cloud-ide-platform-on-digitalocean-kubernetes