Table of Contents
*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 the cloud provider 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 the cloud provider con su conexión configurada como
kubectlpredeterminado. Verá las instrucciones para configurarkubectlen el paso Establecer conexión con su clúster cuando cree su clúster. Para crear un clúster de Kubernetes en the cloud provider, 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 the cloud provider 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 the cloud provider.
Paso 1: Instalar y exponer code-server
En esta sección, instalará code-server en su clúster de Kubernetes de the cloud provider 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:
[label code-server.yaml]
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:
[secondary_label 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:
[secondary_label 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:
[label code-server.yaml]
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:
[secondary_label 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 the cloud provider. 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.
