Cómo configurar la plataforma de IDE en la nube code-server en Kubernetes de DigitalOcean

El autor seleccionó la Free and Open Source Fund para recibir una donación como parte del programa Write for DOnations.

Introducción

Con el traslado de las herramientas de desarrollo a la nube, la creación y la adopción de plataformas de IDE (entorno de desarrollo integrado) en la nube se encuentra en expansión. Los IDE en la nube permiten la colaboración en tiempo real entre los equipos de desarrolladores para trabajar en un entorno de desarrollo unificado, lo cual minimiza las incompatibilidades y mejora la productividad. Los IDE en la nube, a los que se puede acceder a través de los navegadores web, se encuentran disponibles en cualquier tipo de dispositivo moderno. Otra ventaja de un IDE en la nube es la posibilidad de aprovechar el poder de un clúster, que puede superar por mucho el poder de procesamiento de una sola computadora de desarrollo.

code-server es Microsoft Visual Studio Code en ejecución en un servidor remoto, y usted puede acceder a él de forma directa desde su navegador. Visual Studio Code es un editor de código moderno con soporte de Git integrado, un depurador de código, autocompletado inteligente y características personalizables y extensibles. Esto significa que puede usar varios dispositivos con diferentes sistemas operativos y tener siempre a mano un entorno de desarrollo uniforme.

A través de este tutorial, configurará la plataforma de IDE en la nube code-server en su clúster de Kubernetes de DigitalOcean y la mostrará en su dominio, con protección de certificados de Let´s Encrypt. Al finalizar, contará con Microsoft Visual Studio Code activo en su clúster de Kubernetes, disponible a través de HTTPS y protegido por una contraseña.

Requisitos previos

• Un clúster de Kubernetes de DigitalOcean con su conexión configurada como kubectl predeterminado. Verá las instrucciones para configurar kubectl en el paso Establecer conexión con su clúster cuando cree su clúster. Para crear un clúster de Kubernetes en DigitalOcean, consulte Guía rápida de Kubernetes.

• El administrador de paquetes de Helm instalado en su computadora local y Tiller instalado en su clúster. Para hacerlo, complete los pasos 1 y 2 del tutorial Cómo instalar software en clústeres de Kubernetes con el administrador de paquetes de Helm.

• El controlador de Ingress de Nginx y Cert-Manager instalados en su clúster usando Helm para exponer code-server usando los recursos de Ingress. Para hacerlo, siga el artículo Cómo configurar un Ingress de Nginx en Kubernetes de DigitalOcean usando Helm.

• Un nombre de dominio registrado por completo para alojar code-server apuntando al equilibrador de carga utilizado por el Ingress de Nginx. Para este tutorial, se utilizará code-server.your_domain en todo momento. Puede adquirir un nombre de dominio en Namecheap, obtener uno gratuito en Freenom o utilizar un registrador de dominios que elija. Este nombre de dominio debe ser diferente del que se utilizó en el tutorial Cómo configurar un Ingress de Nginx en Kubernetes de DigitalOcean.

Paso 1: Instalar y exponer code-server

En esta sección, instalará code-server en su clúster de Kubernetes de DigitalOcean y lo expondrá en su dominio, usando el controlador de Ingress de Nginx. También configurará una contraseña de acceso.

Almacenará la configuración de implementación en su equipo local, en un archivo llamado code-server.yaml. Créelo usando el siguiente comando:

nano code-server.yaml

Añada las líneas siguientes al archivo:

apiVersion: v1
kind: Namespace
metadata:
  name: code-server
---
apiVersion: extensions/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: 8443
 selector:
   app: code-server
---
apiVersion: extensions/v1beta1
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
        imagePullPolicy: Always
        name: code-server
        args: ["--allow-http"]
        ports:
        - containerPort: 8443
        env:
        - name: PASSWORD
          value: "your_password"

Esta configuración define un espacio de nombres, una implementación, un servicio y un Ingress. El espacio de nombres recibe el nombre code-server y separa la instalación de code-server del resto de su clúster. La implementación consta de una réplica de la imagen de Docker codercom/code-server y una variable de entorno con nombre PASSWORD que especifica la contraseña para tener acceso.

El servicio code-server expone internamente el pod (creado como parte de la implementación) en el puerto 80. El Ingress definido en el archivo especifica que el controlador de Ingress es nginx y que el dominio code-server.your_domain se proporcionará desde el servicio.

Recuerde sustituir your_password por su contraseña deseada y code-server.your_domain por su dominio deseado orientado al equilibrador de carga del controlador de Ingress de Nginx.

A continuación, cree la configuración en Kubernetes ejecutando el siguiente comando:

kubectl create -f code-server.yaml

Verá el siguiente resultado:

Output
namespace/code-server created
ingress.extensions/code-server created
service/code-server created
deployment.extensions/code-server created

Podrá ver que el pod de code-server quedará disponible cuando ejecute lo siguiente:

kubectl get pods -w -n code-server

El resultado tendrá este aspecto:

Output
NAME                          READY   STATUS              RESTARTS   AGE
code-server-f85d9bfc9-j7hq6   0/1     ContainerCreating   0          1m

No bien el estado pase a ser Running, habrá terminado la instalación de code-server en su clúster.

Diríjase a su dominio en su navegador. Verá la solicitud de inicio de sesión para code-server.

Introduzca la contraseña que estableció en code-server.yaml y presione Enter IDE. Ingresará a code-server y de inmediato verá la GUI de su editor.

Instaló code-server en su clúster de Kubernetes y lo dejó disponible en su dominio. También verificó que le exige iniciar sesión con una contraseña. Ahora, procederá a protegerlo con certificados gratuitos de Let´s Encrypt usando Cert-Manager.

Paso 2: Proteger la implementación de code-server

En esta sección, protegerá su instalación de code-server aplicando certificados de Let´s Encrypt a su Ingress, que Cert-Manager creará de forma automática. Después de completar este paso, el acceso a su instalación de code-server será posible a través de HTTPS.

Abra code-server.yaml para editarlo:

nano code-server.yaml

Añada las líneas resaltadas a su archivo. Asegúrese de sustituir el dominio de ejemplo por el suyo:

apiVersion: v1
kind: Namespace
metadata:
  name: code-server
---
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: code-server
  namespace: code-server
  annotations:
    kubernetes.io/ingress.class: nginx
    certmanager.k8s.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
...

Primero, especificará que el cluster-issuer que este Ingress usará para suministrar certificados será letsencrypt-prod, creado como parte de los requisitos previos. A continuación, especificará los dominios que se protegerán en la sección tls, así como su nombre para el Secret que los contiene.

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

kubectl apply -f code-server.yaml

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

kubectl describe certificate codeserver-prod -n code-server

Cuando termine, la parte final del resultado tendrá un aspecto similar a este:

Output
Events:
  Type    Reason              Age    From          Message
  ----    ------              ----   ----          -------
  Normal  Generated           2m49s  cert-manager  Generated new private key
  Normal  GenerateSelfSigned  2m49s  cert-manager  Generated temporary self signed certificate
  Normal  OrderCreated        2m49s  cert-manager  Created Order resource "codeserver-prod-4279678953"
  Normal  OrderComplete       2m14s  cert-manager  Order "codeserver-prod-4279678953" completed successfully
  Normal  CertIssued          2m14s  cert-manager  Certificate issued successfully

Ahora podrá actualizar su dominio en su navegador. Visualizará el candado en la parte izquierda de la barra de direcciones de su navegador, el cual indicará que la conexión es segura.

En este paso, configuró el Ingress para proteger su implementación de code-server. Ahora, podrá revisar la interfaz de usuario de code-server.

Paso 3: Explorar la interfaz de code-server

En esta sección, explorará algunas de las características de la interfaz de code-server. Debido a que code-server es Visual Studio Code en ejecución en la nube, tiene la misma interfaz que la edición de escritorio independiente.

En el lado izquierdo del IDE, existe una fila vertical de seis botones que abren las características más utilizadas en un panel lateral conocido como la “Barra de actividades”.

Esta barra es personalizable, para que pueda cambiar el orden de estas vistas o eliminarlas de ella. De forma predeterminada, la primera vista abre el panel de Explorer que permite explorar la estructura del proyecto con forma de árbol. Aquí, puede administrar sus carpetas y archivos. Esto incluye crear, eliminar, mover y modificar nombres según sea necesario. En la siguiente vista se proporciona acceso a una funcionalidad de búsqueda y sustitución.

A continuación, en el orden predeterminado, se encuentra la vista de los sistemas de control de fuentes, como Git. El código de Visual Studio también es compatible con otros proveedores de control de fuentes, y puede encontrar más instrucciones para flujos de trabajo de control de fuentes con el editor en esta documentación.

La opción de depuración de la barra de actividades ofrece todas las acciones comunes para realizar depuraciones en el panel. Visual Studio Code ofrece compatibilidad integrada con el depurador en tiempo de ejecución Node.js y cualquier lenguaje que se trasmita a Javascript. En el caso de otros lenguajes, puede instalar extensiones para el depurador requerido. Puede guardar las configuraciones de depuración en el archivo launch.json.

En la vista final de la barra de actividades se ofrece un menú para acceder a las extensiones disponibles en Marketplace.

La parte central de la GUI es su editor, que usted puede separar por pestañas para editar su código. Puede cambiar la vista de edición a un sistema de cuadrícula o a archivos en paralelo.

Una vez que se cree un nuevo archivo a través del menú File, se abrirá un archivo vacío en una nueva pestaña y una vez que este se haya guardado su nombre será visible en el panel lateral Explorer. Se pueden crear carpetas haciendo clic con el botón secundario en la barra lateral de Explorer y seleccionando New Folder. Puede expandir una carpeta haciendo clic en su nombre, y también arrastrando archivos y carpetas y soltándolos en partes superiores de la jerarquía para trasladarlas a una nueva ubicación.

Puede obtener acceso a un terminal presionando CTRL+SHIFT+\ o seleccionando Terminal en el menú superior y luego New Terminal. La terminal se abrirá en un panel inferior y su directorio de trabajo fijará en el espacio de trabajo del proyecto, que contiene los archivos y las carpetas que se muestran en el panel lateral de Explorer.

Exploró una descripción general de alto nivel de la interfaz de code-server y revisó algunas de las características más utilizadas.

Conclusión

Ahora dispone de code-server, un IDE en la nube versátil, instalado en su clúster de Kubernetes de DigitalOcean. Con él puede trabajar en su código fuente y sus documentos de forma individual o colaborar con su equipo. Ejecutar un IDE en la nube en su clúster proporciona más capacidad para pruebas y descargas, y una computación más completa o rigurosa. Para obtener más información, consulte la documentación de Visual Studio Code respecto de características adicionales e instrucciones detalladas relacionadas con otros componentes de code-server.