Cómo configurar la plataforma IDE de la nube del servidor de código en Kubernetes de DigitalOcean

El autor seleccionó el Fondo de Código Libre y Abierto para recibir una donación como parte del programa Write for DOnations .

Introducción

A medida que las herramientas de desarrollo se trasladan a la nube, aumenta la creación y adopción de plataformas IDE (entorno de desarrollo integrado) en la nube. Los IDE en la nube permiten la colaboración en tiempo real entre equipos de desarrolladores para trabajar en un entorno de desarrollo unificado que minimiza las incompatibilidades y mejora la productividad. Los IDE en la nube, a los que se puede acceder a través de navegadores web, están disponibles desde cualquier tipo de dispositivo moderno. Otra ventaja de un IDE en la nube es la posibilidad de aprovechar la potencia de un clúster, que puede superar en gran medida la capacidad de procesamiento de una sola computadora de desarrollo.

code-server es Microsoft Visual Studio Code ejecutándose en un servidor remoto y accesible directamente desde su navegador. Visual Studio Code es un editor de código moderno con soporte Git integrado, un depurador de código, autocompletado inteligente y características personalizables y extensibles. Esto significa que puede usar varios dispositivos, ejecutar diferentes sistemas operativos y tener siempre a mano un entorno de desarrollo consistente.

En este tutorial, configurará la plataforma IDE de nube de servidor de código en su clúster Kubernetes de DigitalOcean y la expondrá en su dominio, protegida con certificados Let’s Encrypt. Al final, tendrá Microsoft Visual Studio Code ejecutándose en su clúster Kubernetes, disponible a través de HTTPS y protegido por una contraseña.

Prerrequisitos

• Un clúster de Kubernetes de DigitalOcean con su conexión configurada como kubectlpredeterminada. Las instrucciones sobre cómo configurarlo kubectlse muestran en el paso Conectarse a su clúster cuando crea su clúster. Para crear un clúster de Kubernetes en DigitalOcean, consulte Inicio rápido de Kubernetes .
• El administrador de paquetes Helm 3 instalado en su máquina local. Complete el paso 1 del tutorial Cómo instalar software en clústeres de Kubernetes con el administrador de paquetes Helm 3 .
• El controlador de ingreso de Nginx y el administrador de certificados instalados en su clúster mediante Helm para exponer el servidor de códigos mediante recursos de ingreso. Para ello, siga Cómo configurar un ingreso de Nginx en DigitalOcean Kubernetes mediante Helm .
• Un nombre de dominio completamente registrado para alojar el servidor de código, que apunta al balanceador de carga utilizado por Nginx Ingress. Este tutorial se utilizará code-server.your_domainen todo momento. Puede comprar un nombre de dominio en Namecheap , obtener uno gratis en Freenom o utilizar el registrador de dominios que prefiera. Este nombre de dominio debe ser diferente del que se utiliza en el tutorial de requisitos previos Cómo configurar un Nginx Ingress en Kubernetes de DigitalOcean.

Paso 1: Instalación y exposición del servidor de códigos

En esta sección, instalará el servidor de códigos en su clúster Kubernetes de DigitalOcean y lo expondrá en su dominio mediante el controlador de ingreso de Nginx. También configurará una contraseña para el acceso.

Como parte del requisito previo del controlador de ingreso de Nginx, creó servicios de ejemplo y un ingreso. No los necesitará en este tutorial, por lo que puede eliminarlos ejecutando los siguientes comandos:

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

El deletecomando kubectl acepta el archivo a eliminar cuando se le pasa el -fparámetro.

Almacenarás la configuración de implementación en tu máquina local, en un archivo llamado code-server.yaml. Créalo usando el siguiente comando:

nano code-server.yaml

Añade las siguientes líneas al archivo:

código-servidor.yaml

apiVersion: v1kind: Namespacemetadata:  name: code-server---apiVersion: networking.k8s.io/v1kind: Ingressmetadata:  name: code-server  namespace: code-serverspec:  ingressClassName: nginx  rules:  - host: code-server.your_domain    http:      paths:      - pathType: Prefix        path: "/"        backend:          service:            name: code-server            port:              number: 80---apiVersion: v1kind: Servicemetadata: name: code-server namespace: code-serverspec: ports: - port: 80   targetPort: 8080 selector:   app: code-server---apiVersion: apps/v1kind: Deploymentmetadata:  labels:    app: code-server  name: code-server  namespace: code-serverspec:  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"

Esta configuración define un espacio de nombres, una implementación, un servicio y un ingreso. El espacio de nombres se denomina code-servery separa la instalación del servidor de código del resto del clúster. La implementación consta de una réplica de la codercom/code-serverimagen de Docker y una variable de entorno denominada PASSWORDque especifica la contraseña para el acceso.

El code-serverservicio expone internamente el pod (creado como parte de la implementación) en el puerto 80. El ingreso definido en el archivo especifica que el controlador de ingreso es nginxy que el code-server.your_domaindominio será atendido desde el servicio.

Recuerde reemplazar your_passwordcon su contraseña deseada, y code-server.your_domaincon su dominio deseado, apuntando al Balanceador de Carga del Controlador de Ingreso Nginx.

Guarde y cierre el archivo.

Luego, crea la configuración en Kubernetes ejecutando el siguiente comando:

kubectl apply -f code-server.yaml

Verás el siguiente resultado:

Outputnamespace/code-server createdingress.networking.k8s.io/code-server createdservice/code-server createddeployment.apps/code-server created

Puede ver cómo el pod del servidor de códigos está disponible ejecutando lo siguiente:

kubectl get pods -w -n code-server

El resultado será similar a esto:

OutputNAME                           READY   STATUS              RESTARTS   AGEcode-server-6c4745497c-l2n7w   0/1     ContainerCreating   0          12s

Tan pronto como el estado pase a ser Running, code-server habrá terminado de instalarse en su clúster.

Ahora puedes navegar a tu dominio en tu navegador. Verás el mensaje de inicio de sesión para code-server.

code-server te pide tu contraseña. Introduce la que hayas configurado en el paso anterior y pulsa Enter IDE . Ahora entrarás en code-server y verás inmediatamente su interfaz gráfica de usuario del editor.

Has instalado el servidor de códigos en tu clúster de Kubernetes y lo has puesto a disposición en tu dominio. También has verificado que requiere que inicies sesión con una contraseña. Ahora, pasarás a protegerlo con certificados gratuitos de Let’s Encrypt mediante Cert-Manager.

Paso 2: Asegurar la implementación del servidor de código

En esta sección, protegerá la instalación de su servidor de códigos aplicando certificados Let’s Encrypt a su Ingress, que Cert-Manager creará automáticamente. Después de completar este paso, podrá acceder a la instalación de su servidor de códigos a través de HTTPS.

Abierto code-server.yamlpara edición:

nano code-server.yaml

Agregue las líneas resaltadas a su archivo, asegurándose de reemplazar el dominio de ejemplo con el suyo:

código-servidor.yaml

apiVersion: v1kind: Namespacemetadata:  name: code-server---apiVersion: networking.k8s.io/v1kind: Ingressmetadata:  name: code-server  namespace: code-server  annotations:    cert-manager.io/cluster-issuer: letsencrypt-prodspec:  ingressClassName: nginx  tls:  - hosts:    - code-server.your_domain    secretName: codeserver-prod  rules:    - host: code-server.your_domain    http:      paths:      - backend:          service:            name: code-server            port:              number: 80...

En primer lugar, debe especificar que este Ingress utilizará el emisor del clúster letsencrypt-prodpara proporcionar certificados, que creó como parte de los requisitos previos. Luego, debe especificar los dominios que se protegerán en la tlssección, así como su nombre para Secretalmacenarlos.

Guarde y cierre el archivo.

Aplique los cambios a su clúster de Kubernetes ejecutando el siguiente comando:

kubectl apply -f code-server.yaml

Deberá esperar unos minutos para que Let’s Encrypt proporcione su certificado. Mientras tanto, puede seguir su progreso observando el resultado del siguiente comando:

kubectl describe certificate codeserver-prod -n code-server

Cuando termine, el resultado final se verá similar a esto:

OutputEvents:  Type    Reason     Age   From          Message  ----    ------     ----  ----          -------  Normal  Issuing    44m   cert-manager  Issuing certificate as Secret does not exist  Normal  Generated  44m   cert-manager  Stored new private key in temporary Secret resource "codeserver-prod-m7r8v"  Normal  Requested  44m   cert-manager  Created new CertificateRequest resource "codeserver-prod-sc7xm"  Normal  Issuing    44m   cert-manager  The certificate has been successfully issued

Ahora puedes actualizar tu dominio en tu navegador. Verás el candado a la izquierda de la barra de direcciones de tu navegador, lo que significa que la conexión es segura.

En este paso, ha configurado Ingress para proteger la implementación del servidor de códigos. Ahora, puede revisar la interfaz de usuario del servidor de códigos.

Paso 3: Exploración de la interfaz del servidor de códigos

En esta sección, explorará algunas de las características de la interfaz de Code-Server. Dado que Code-Server es Visual Studio Code que se ejecuta en la nube, tiene la misma interfaz que la edición de escritorio independiente.

En el lado izquierdo del IDE, hay una fila vertical de seis botones que abren las funciones más utilizadas en un panel lateral conocido como Barra de actividades.

Esta barra es personalizable; puede reordenar estas vistas o eliminarlas de la barra. De forma predeterminada, la primera vista abre el panel Explorador, que ofrece una navegación en forma de árbol por la estructura del proyecto. Aquí puede administrar sus carpetas y archivos: crearlos, eliminarlos, moverlos y cambiarles el nombre según sea necesario. La siguiente vista proporciona acceso a una función de búsqueda y reemplazo.

A continuación, en el orden predeterminado, se muestra la vista de los sistemas de control de código fuente, como Git . Visual Studio Code también admite otros proveedores de control de código fuente y puede encontrar más instrucciones para los flujos de trabajo de control de código fuente con el editor en esta documentación . Debido a que el proyecto actualmente vacío (que se abre de manera predeterminada) no se inicializa como un repositorio Git, Visual Studio Code le ofrece inicializarlo como tal.

La opción de depurador de la barra de actividades proporciona todas las acciones habituales para la depuración en el panel. Visual Studio Code incluye compatibilidad integrada con el depurador de tiempo de ejecución de Node.js y cualquier lenguaje que se transpile a Javascript . Para otros lenguajes, puede instalar extensiones para el depurador requerido. Puede guardar las configuraciones de depuración en el launch.jsonarchivo.

La vista final en la Barra de actividad proporciona un menú para acceder a las extensiones disponibles en el Marketplace .

La parte central de la interfaz gráfica de usuario es el editor, que se puede separar mediante pestañas para editar el código. Puede cambiar la vista de edición a un sistema de cuadrícula o a archivos uno al lado del otro.

Después de crear un nuevo archivo a través del menú Archivo , se abrirá un archivo vacío en una nueva pestaña. Una vez guardado, el nombre del archivo se podrá ver en el panel lateral del Explorador. Para crear carpetas, haga clic con el botón derecho en la barra lateral del Explorador y seleccione Nueva carpeta . Puede expandir una carpeta haciendo clic en su nombre, así como arrastrando y soltando archivos y carpetas en las partes superiores de la jerarquía para moverlos a una nueva ubicación.

Puede acceder a una terminal presionando CTRL+SHIFT+`, o presionando en Terminal en el menú de hamburguesa y seleccionando Nueva terminal . La terminal se abrirá en un panel inferior y su directorio de trabajo se establecerá en el espacio de trabajo del proyecto, que contiene los archivos y carpetas que se muestran en el panel lateral del Explorador.

Si desea destruir la implementación en su clúster, ejecute el siguiente comando:

kubectl delete -f code-server.yaml

Ha explorado una descripción general de alto nivel de la interfaz del servidor de código y revisado algunas de las características más utilizadas.

Conclusión

Ahora tiene instalado en su clúster Kubernetes de DigitalOcean Code-Server, un IDE en la nube versátil. Puede trabajar con él en su código fuente y documentos de forma individual o colaborar con su equipo. Ejecutar un IDE en la nube en su clúster proporciona más potencia para realizar pruebas, descargas y cálculos más exhaustivos o rigurosos. Para obtener más información, consulte la documentación de Visual Studio Code sobre funciones adicionales e instrucciones detalladas sobre otros componentes de Code-Server.