Desarrollo de InnerLoop mediante Cloud Workstations con NodeJS

1. Descripción general

En este lab, se muestran las funciones y capacidades diseñadas para optimizar el flujo de trabajo de desarrollo de los ingenieros de software encargados de desarrollar aplicaciones de NodeJS en un entorno alojado en contenedores. El desarrollo típico de contenedores requiere que el usuario comprenda sus detalles y el proceso de compilación de estos. Además, por lo general, los desarrolladores tienen que interrumpir el flujo y salir del IDE para probar y depurar sus aplicaciones en entornos remotos. Con las herramientas y tecnologías mencionadas en este instructivo, los desarrolladores pueden trabajar de manera eficaz con aplicaciones alojadas en contenedores sin salir de su IDE.

Qué aprenderás

En este lab, aprenderás métodos para desarrollar con contenedores en Google Cloud, incluidos los siguientes:

• Crea una aplicación de inicio de Nodejs
• Configurar la aplicación de Nodejs para el desarrollo de contenedores
• Programación de un servicio simple de REST de CRUD
• Implementar en GKE
• Depura un estado de error
• Usa puntos de interrupción o registros
• Implementando cambios en caliente de vuelta en GKE
• Opcional: Integra Cloud SQL para la persistencia del backend

2. Configuración y requisitos

Cómo configurar el entorno a tu propio ritmo

1. Accede a Google Cloud Console y crea un proyecto nuevo o reutiliza uno existente. Si aún no tienes una cuenta de Gmail o de Google Workspace, debes crear una.

• El Nombre del proyecto es el nombre visible de los participantes de este proyecto. Es una cadena de caracteres que no se utiliza en las APIs de Google. Puedes actualizarla en cualquier momento.
• El ID del proyecto es único en todos los proyectos de Google Cloud y es inmutable (no se puede cambiar después de configurarlo). La consola de Cloud genera automáticamente una cadena única. por lo general, no te importa qué es. En la mayoría de los codelabs, deberás hacer referencia al ID del proyecto (por lo general, se identifica como PROJECT_ID). Si no te gusta el ID generado, puedes generar otro aleatorio. También puedes probar el tuyo propio y ver si está disponible. No se puede cambiar después de este paso y se mantendrá mientras dure el proyecto.
• Para tu información, hay un tercer valor, un número de proyecto que usan algunas APIs. Obtén más información sobre estos tres valores en la documentación.

Precaución: El ID de un proyecto es único a nivel global y ninguna otra persona puede usarlo después de seleccionarlo. Eres el único usuario de ese ID. Incluso si se borra un proyecto, el ID no se puede volver a usar.

Nota: Si usas una cuenta de Gmail, puedes configurar la ubicación predeterminada como Sin organización. Si usas una cuenta de Google Workspace, elige una ubicación adecuada para tu organización.

2. A continuación, deberás habilitar la facturación en la consola de Cloud para usar las APIs o los recursos de Cloud. Ejecutar este codelab no debería costar mucho, tal vez nada. Para cerrar recursos y evitar que se te facture más allá de este instructivo, puedes borrar los recursos que creaste o borrar todo el proyecto. Los usuarios nuevos de Google Cloud son aptos para participar en el programa Prueba gratuita de USD 300.

Inicia el editor de Cloud Shell

Este lab se diseñó y probó para usarse con el editor de Google Cloud Shell. Para acceder al editor,

1. accede a tu proyecto de Google en https://console.cloud.google.com.
2. En la esquina superior derecha, haz clic en el ícono del editor de Cloud Shell.

3. Se abrirá un panel nuevo en la parte inferior de la ventana.
4. Haz clic en el botón Abrir editor.

5. El editor se abrirá con un explorador a la derecha y un editor en el área central.
6. También debería haber un panel de terminal disponible en la parte inferior de la pantalla.
7. Si la terminal NO está abierta, usa la combinación de teclas “ctrl+” para abrir una nueva ventana de terminal.

Configura gcloud

En Cloud Shell, configura el ID del proyecto y la región en la que quieres implementar la aplicación. Guárdalos como variables PROJECT_ID y REGION.

export PROJECT_ID=$(gcloud config get-value project)
export PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format='value(projectNumber)')

Aprovisiona la infraestructura que se usa en este lab

En este lab, implementarás código en GKE y accederás a datos almacenados en una base de datos de Cloud SQL. La siguiente secuencia de comandos de configuración prepara esta infraestructura por ti.

1. Descarga la secuencia de comandos de configuración y haz que sea ejecutable.

wget https://raw.githubusercontent.com/GoogleCloudPlatform/container-developer-workshop/main/labs/nodejs/setup_with_cw.sh
chmod +x setup_with_cw.sh

2. Abre el archivo setup_with_cw.sh y edita los valores de las contraseñas que actualmente están configuradas como CHANGEME
3. Ejecuta la secuencia de comandos de configuración para preparar un clúster de GKE y una base de datos de Cloud SQL que usarás en este lab

./setup_with_cw.sh &

Clúster de Cloud Workstations

1. Abre Cloud Workstations en la consola de Cloud. Espera a que el clúster tenga el estado READY.

Crear configuración de estaciones de trabajo

1. Si se desconectó tu sesión de Cloud Shell, haz clic en “Volver a conectar” y, luego, ejecuta el comando gcloud cli para configurar el ID del proyecto. Reemplaza el ID del proyecto de muestra que aparece a continuación por el ID de tu proyecto de Qwiklabs antes de ejecutar el comando.

gcloud config set project qwiklabs-gcp-project-id

2. Descarga y ejecuta la siguiente secuencia de comandos en la terminal para crear la configuración de Cloud Workstations.

wget https://raw.githubusercontent.com/GoogleCloudPlatform/container-developer-workshop/main/labs/nodejs/workstation_config_setup.sh
chmod +x workstation_config_setup.sh
./workstation_config_setup.sh

3. Verifica los resultados en la sección Configuración. La transición al estado READY tardará 2 minutos.

4. Abre Cloud Workstations en la consola y crea una instancia nueva.

5. Cambia el nombre a my-workstation y selecciona la configuración existente: codeoss-js.

6. Verifica los resultados en la sección Estaciones de trabajo.

Iniciar estación de trabajo

1. Inicia y, luego, inicia la estación de trabajo. La estación de trabajo tardará unos minutos en iniciarse.

2. Permite las cookies de terceros haciendo clic en el ícono de la barra de direcciones.

3. Haz clic en "¿El sitio no funciona?".

4. Haz clic en "Permitir cookies".

5. Una vez que se inicie la estación de trabajo, verás que aparece Code OSS IDE. Haz clic en "Marcar como hecho". En la página Primeros pasos, el IDE de la estación de trabajo

3. Crea una nueva aplicación de inicio de Nodejs

En esta sección, crearás una nueva aplicación de Nodejs.

1. Abre una terminal nueva.

2. En Cloud Shell, crea un directorio nuevo con el nombre mynodejsapp.

mkdir mynodejsapp

Si ves este mensaje, haz clic en el botón Permitir para copiar y pegar en la estación de trabajo.

3. Cambia a este directorio y ábrelo como un lugar de trabajo. Esta acción volverá a cargar el editor creando una configuración de lugar de trabajo en la carpeta recién creada.

cd mynodejsapp && code-oss-cloud-workstations -r --folder-uri="$PWD"

1. Vuelve a abrir una terminal nueva. Instalar Node y NPM con NVM

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
        
        # This loads nvm bash_completion
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  

nvm install stable

nvm alias default stable

4. Crea una aplicación inicial nueva

1. Inicializa la aplicación

Crea un archivo package.json mediante la ejecución del siguiente comando

npm init

    Choose the `entry point: (index.js) src/index.js` and leave default values for the rest of the parameters. This will create the `package.json` file with following contents

{
  "name": "mynodejsapp",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2. Agrega un punto de entrada

Abre y edita el archivo package.json en el IDE para incluir el comando de inicio en la secuencia de comandos "start": "node src/index.js",. Después del cambio, las secuencias de comandos deberían verse como el siguiente fragmento de código:

"scripts": {
    "start": "node src/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

3. Agrega la dependencia de Express

El código que agregaremos también usa express, así que vamos a agregar esa dependencia a este archivo package.json. Por lo tanto, después de todos los cambios, el archivo package.json debería verse como se muestra a continuación.

{
 "name": "mynodejsapp",
 "version": "1.0.0",
 "description": "",
 "main": "src/index.js",
 "scripts": {
   "start": "node src/index.js",
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
   "express": "^4.17.3"
 }
}

4. Crea el archivo index.js

Crea un directorio del código fuente llamado src. Para ello, selecciona New Folder en la vista del explorador.

Crea un archivo src/index.js

con el siguiente código

const express = require('express');
const app = express();
const PORT = 8080;

app.get('/', (req, res) => {
    var message="Greetings from Node";
    res.send({ message: message });
  });

app.listen(PORT, () => {
  console.log(`Server running at: http://localhost:${PORT}/`);

});

Ten en cuenta que PORT está configurado en el valor 8080

Generar manifiestos

Skaffold proporciona herramientas integradas para simplificar el desarrollo de contenedores. En este paso, inicializarás Skaffold, que creará automáticamente archivos YAML base para Kubernetes. Ejecuta el siguiente comando para comenzar el proceso.

Ejecuta el siguiente comando en la terminal

skaffold init --generate-manifests

Realice las siguientes acciones cuando se le solicite:

• Ingresa 8080 para el puerto
• Ingresa y para guardar la configuración.

Se agregan dos archivos a la visualización del espacio de trabajo: skaffold.yaml y deployment.yaml

Actualiza el nombre de la app

Los valores predeterminados incluidos en la configuración actualmente no coinciden con el nombre de tu aplicación. Actualiza los archivos para hacer referencia al nombre de tu aplicación en lugar de los valores predeterminados.

1. Cambia las entradas en la configuración de Skaffold

• Abrir skaffold.yaml
• Selecciona el nombre de la imagen establecido actualmente como package-json-image
• Haz clic con el botón derecho y elige Cambiar todos los casos.
• Escribe el nombre nuevo como mynodejsapp.

2. Cambia las entradas en la configuración de Kubernetes

• Abrir archivo deployment.yaml
• Selecciona el nombre de la imagen establecido actualmente como package-json-image
• Haz clic con el botón derecho y elige Cambiar todos los casos.
• Escribe el nombre nuevo como mynodejsapp.

Ten en cuenta que, en el archivo skaffold.yaml, la sección build usa buildpacks para alojar la aplicación en contenedores. Este código no tiene un Dockerfile y el desarrollador no necesita ningún conocimiento de Docker para organizar esta aplicación en contenedores.

Además, esta configuración de Skaffold habilita automáticamente la sincronización en caliente entre el editor y el contenedor en ejecución. No se requiere ninguna configuración adicional para habilitar la sincronización en caliente.

5. Explicación del proceso de desarrollo

En esta sección, seguirás algunos pasos con el complemento de Cloud Code para aprender los procesos básicos y validar la configuración de tu aplicación inicial.

Cloud Code se integra en Skaffold para optimizar tu proceso de desarrollo. Cuando sigas estos pasos para implementar en GKE, Cloud Code y Skaffold compilarán automáticamente tu imagen de contenedor, la enviarán a Container Registry y, luego, implementarán tu aplicación en GKE. Esto sucede detrás de escena, abstrae los detalles del flujo del desarrollador. Cloud Code también mejora tu proceso de desarrollo, ya que proporciona capacidades tradicionales de depuración y hotsync al desarrollo basado en contenedores.

Accede a Google Cloud

1. Haz clic en el ícono de Cloud Code y selecciona “Acceder a Google Cloud”:

2. Haz clic en "Continuar para acceder".

3. Verifica el resultado en la terminal y abre el vínculo:

4. Accede con tus credenciales de estudiantes de Qwiklabs.

5. Selecciona "Permitir":

6. Copia el código de verificación y regresa a la pestaña Workstation.

7. Pega el código de verificación y presiona Intro.

Agregar clúster de Kubernetes

1. Agrega un clúster

2. Selecciona Google Kubernetes Engine:

3. Selecciona un proyecto.

4. Selecciona “mycluster” que se creó en la configuración inicial.

5. El clúster ahora aparece en la lista de clústeres de Kubernetes en Cloud Code. Navega y explora el clúster desde aquí.

Establece el ID del proyecto actual con gcloud cli

1. Copia el ID del proyecto de este lab desde la página de Qwiklabs.

2. En la terminal, ejecuta el comando gcloud cli para configurar el ID del proyecto. Reemplaza el ID del proyecto de muestra antes de ejecutar el comando. SUSTITUYE el ID del proyecto antes de ejecutar el siguiente comando.

gcloud config set project qwiklabs-gcp-project-id

Implementar en Kubernetes

1. En el panel ubicado en la parte inferior del editor de Cloud Shell, selecciona Cloud Code pago.

2. En el panel que aparece en la parte superior, en SESIONES DE DESARROLLO, selecciona Ejecutar en Kubernetes. Si se te solicita, selecciona Sí para usar el contexto actual de Kubernetes.

3. La primera vez que ejecutes el comando, aparecerá un mensaje en la parte superior de la pantalla en el que se te preguntará si quieres conocer el contexto de Kubernetes actual. Selecciona “Yes” aceptar y usar el contexto actual.

4. A continuación, se mostrará un mensaje en el que se te preguntará qué registro de contenedores usar. Presiona Intro para aceptar el valor predeterminado proporcionado

5. Selecciona la pestaña Output en el panel inferior y Kubernetes: Run/Debug en el menú desplegable para ver el progreso y las notificaciones.

6. Selecciona “Kubernetes: Run/Debug - Detail”. En el menú desplegable de canales que se encuentra a la derecha para ver detalles adicionales y registros que se transmiten en vivo desde los contenedores

7. Para volver a la vista simplificada, selecciona "Kubernetes: Run/Debug" en el menú desplegable.
8. Cuando finalicen la compilación y las pruebas, la pestaña Salida indicará Resource deployment/mynodejsapp status completed successfully y aparecerá una URL: “URL reenviada de service demo-app: http://localhost:8080”.
9. En la terminal de Cloud Code, coloca el cursor sobre la URL en el resultado (http://localhost:8080) y, luego, en la sugerencia de herramientas que aparece, selecciona Seguir vínculo.

La respuesta será la siguiente:

{"message":"Greetings from Node"}

Recarga en caliente

1. Navega a src/index.js. Edita el código del mensaje de saludo a 'Hello from Node'

Observa inmediatamente que en la ventana Output, en la vista Kubernetes: Run/Debug, el observador sincroniza los archivos actualizados con el contenedor en Kubernetes.

Update initiated
File sync started for 1 files for gcr.io/myproject/mynodejsapp:latest@sha256:f554756b3b4d6c301c4b26ef96102227cfa2833270db56241248ae42baa1971a
File sync succeeded for 1 files for gcr.io/myproject/mynodejsapp:latest@sha256:f554756b3b4d6c301c4b26ef96102227cfa2833270db56241248ae42baa1971a
Update succeeded

2. Si cambias a la vista Kubernetes: Run/Debug - Detailed, notarás que reconoce los cambios en el archivo y reinicia el nodo

files modified: [src/index.js]
Copying files:map[src/index.js:[/workspace/src/index.js]]togcr.io/myproject/mynodejsapp:latest@sha256:f554756b3b4d6c301c4b26ef96102227cfa2833270db56241248ae42baa1971a
Syncing 1 files for gcr.io/myproject/mynodejsapp:latest@sha256:f554756b3b4d6c301c4b26ef96102227cfa2833270db56241248ae42baa1971a
Watching for changes...
[mynodejsapp]
[mynodejsapp]> mynodejsapp@1.0.0 start /workspace
[mynodejsapp]> node src/index.js
[mynodejsapp]
[mynodejsapp]Server running at: http://localhost:8080/

3. Actualiza el navegador para ver los resultados actualizados.

Depuración

1. Ve a la vista de depuración y detén el subproceso actual .
2. Haz clic en Cloud Code en el menú inferior y selecciona Debug on Kubernetes para ejecutar la aplicación en modo debug.

• En la vista Kubernetes Run/Debug - Detailed de la ventana Output, observa que Skaffold implementará esta aplicación en modo de depuración.
• La aplicación tardará algunos minutos en compilarse e implementarse. Esta vez, verás un depurador adjunto.

Port forwarding pod/mynodejsapp-6bbcf847cd-vqr6v in namespace default, remote port 9229 -> http://127.0.0.1:9229
[mynodejsapp]Debugger attached.

3. La barra de estado inferior cambia de color de azul a naranja, lo que indica que está en modo de depuración.

4. En la vista Kubernetes Run/Debug, observa que se inicia un contenedor Debuggable.

**************URLs*****************
Forwarded URL from service mynodejsapp-service: http://localhost:8080
Debuggable container started pod/mynodejsapp-deployment-6bc7598798-xl9kj:mynodejsapp (default)
Update succeeded
***********************************

Utiliza puntos de interrupción

1. Abrir src/index.js
2. Busca la sentencia que dice var message="Hello from Node";.
3. Para agregar un punto de interrupción a esa línea, haz clic en el espacio en blanco a la izquierda del número de línea. Se mostrará un indicador rojo para indicar que se estableció el punto de interrupción
4. Vuelve a cargar el navegador y observa que el depurador detiene el proceso en el punto de interrupción y te permite investigar las variables y el estado de la aplicación que se ejecuta de forma remota en GKE.
5. Haz clic en la sección de variables hasta que encuentres la variable "message".
6. Para ejecutar la línea, presiona Step over
7. Observa que el valor actual de la variable "message" cambia a "Hello from Node"
8. Haz doble clic en el nombre de variable "target" En la ventana emergente, cambia el valor a uno diferente, como "Hi from Node".
9. Haz clic en el botón Continuar en el panel de control de depuración.
10. Revisa la respuesta en tu navegador, que ahora muestra el valor actualizado que acabas de ingresar.
11. Cómo detener la "depuración" si presionas el botón de detención y, para quitar el punto de interrupción, vuelves a hacer clic en él.

6. Desarrollar un servicio de REST de CRUD simple

En este punto, tu aplicación está completamente configurada para el desarrollo en contenedores, y ya recorriste el flujo de trabajo básico de desarrollo con Cloud Code. En las siguientes secciones, practicarás lo que aprendiste agregando extremos del servicio de REST conectados a una base de datos administrada en Google Cloud.

Configura dependencias

El código de la aplicación usa una base de datos para conservar los datos del servicio de REST. Asegúrate de que las dependencias estén disponibles agregando lo siguiente en el archivo package.json.

1. Agrega dos dependencias más, pg y sequelize, al archivo package.json para compilar una aplicación de CRUD en Postgres. Publicar cambios, la sección de dependencias se verá de la siguiente manera.

    "dependencies": {
    "express": "^4.17.3",
    "pg": "^8.8.0",
    "sequelize": "^6.25.7"
  }

Codificar el servicio de REST

1. Agrega el código de la aplicación CRUD a esta aplicación

wget -O app.zip https://github.com/GoogleCloudPlatform/container-developer-workshop/raw/main/labs/nodejs/app.zip

unzip app.zip

Este código tiene

• Carpeta models con el modelo de entidad para item
• La carpeta controllers con el código que realiza las operaciones de CRUD
• La carpeta routes que enruta patrones de URL específicos a diferentes llamadas
• La carpeta config con los detalles de conectividad de la base de datos

2. Ten en cuenta que la configuración de la base de datos en el archivo db.config.js se refiere a las variables de entorno que se deben proporcionar para conectarse a la base de datos. También debes analizar la solicitud entrante para la codificación URL.
3. Agrega el siguiente fragmento de código a src/index.js para poder conectarte al código CRUD de tu archivo JavaScript principal justo antes de la última sección que comienza con app.listen(PORT, () => {

const bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(
 bodyParser.urlencoded({
   extended: true,
 })
)
const db = require("../app/models");
db.sequelize.sync();
require("../app/routes/item.routes")(app);

4. Edita la implementación en el archivo deployment.yaml para agregar las variables de entorno y proporcionar información de conectividad de la base de datos.

Actualiza la entrada de especificaciones al final del archivo para que coincida con la siguiente definición

    spec:
      containers:
      - name: mynodejsapp
        image: mynodejsapp
        env:
        - name: DB_HOST
          value: ${DB_INSTANCE_IP}        
        - name: DB_PORT
          value: "5432"  
        - name: DB_USER
          valueFrom:
            secretKeyRef:
              name: gke-cloud-sql-secrets
              key: username
        - name: DB_PASS
          valueFrom:
            secretKeyRef:
              name: gke-cloud-sql-secrets
              key: password
        - name: DB_NAME
          valueFrom:
            secretKeyRef:
              name: gke-cloud-sql-secrets
              key: database

5. Reemplaza el valor DB_HOST por la dirección de tu base de datos.

export DB_INSTANCE_IP=$(gcloud sql instances describe mytest-instance \
    --format=json | jq \
    --raw-output ".ipAddresses[].ipAddress")

envsubst < deployment.yaml > deployment.new && mv deployment.new deployment.yaml

Implementa y valida la aplicación

1. En el panel ubicado en la parte inferior del Editor de Cloud Shell, selecciona Cloud Code y, luego, elige Debug on Kubernetes en la parte superior de la pantalla.
2. Cuando se completen la compilación y las pruebas, la pestaña Salida indicará Resource deployment/mynodejsapp status completed successfully y aparecerá la URL "URL reenviada desde el servicio mynodejsapp: http://localhost:8080"
3. Agrega algunos elementos.

En la terminal de cloudshell, ejecuta los siguientes comandos

URL=localhost:8080
curl -X POST $URL/items -d '{"itemName":"Body Spray", "itemPrice":3.2}' -H "Content-Type: application/json"
curl -X POST $URL/items -d '{"itemName":"Nail Cutter", "itemPrice":2.5}' -H "Content-Type: application/json"

4. Ejecuta $URL/items en el navegador para probar GET. También puedes ejecutar curl desde la línea de comandos

curl -X GET $URL/items

5. Prueba la eliminación: Ahora intenta borrar un elemento con el comando que aparece a continuación. Si es necesario, cambia el valor de item-id.

curl -X DELETE $URL/items/1

    This throws an error message

{"message":"Could not delete Item with id=[object Object]"}

Identifica y soluciona el problema

1. La aplicación se está ejecutando en modo de depuración. Así que usa puntos de interrupción para encontrar el problema. A continuación, se incluyen algunas sugerencias:

• Sabemos que hay un problema con DELETE, ya que no muestra el resultado deseado. Por lo tanto, debes establecer el punto de interrupción en el método itemcontroller.js->exports.delete.
• Realiza la ejecución paso a paso y observa las variables en cada paso para observar los valores de las variables locales en la ventana de la izquierda.
• Para observar valores específicos, como request.params, agrega esta variable a la ventana Watch.

2. Ten en cuenta que el valor asignado a id es undefined. Cámbialo para solucionar el problema.

El fragmento de código fijo se vería así.

// Delete a Item with the specified id in the request
exports.delete = (req, res) => {
    const id = req.params.id;

3. Una vez que se reinicie la aplicación, intenta borrarla nuevamente.
4. Para detener la sesión de depuración, haz clic en el cuadrado rojo de la barra de herramientas de depuración

7. Limpieza

¡Felicitaciones! En este lab, creaste una nueva aplicación de Nodejs desde cero y la configuraste para que funcione en modo de implementación en caliente con contenedores. Luego, implementaste y depuraste tu aplicación en un clúster de GKE remoto con el mismo flujo de desarrollador que se encuentra en las pilas de aplicaciones tradicionales.

Sigue estos pasos para realizar una limpieza después de completar el lab:

1. Borra los archivos utilizados en el lab

cd ~ && rm -rf mynodejsapp && rm -f setup.sh

2. Borra el proyecto para quitar toda la infraestructura y los recursos relacionados.