Implementa automáticamente la aplicación web Genkit de Node.js de IA generativa desde el control de versiones hasta Cloud Run

1. Descripción general

Implementar una aplicación web por primera vez puede ser intimidante. Incluso después de la primera implementación, si el proceso requiere demasiado trabajo, es posible que evites implementar versiones nuevas de tu aplicación. Con la implementación continua, puedes implementar los cambios de tu aplicación de forma automática y sencilla.

En este lab, escribirás una aplicación web y configurarás Cloud Run para que implemente automáticamente tu aplicación cuando se realice un cambio en el código fuente de la aplicación. Luego, modificas la aplicación y la vuelves a implementar.

Qué aprenderás

• Cómo escribir una aplicación web con el editor de Cloud Shell
• Almacena el código de tu aplicación en GitHub
• Implementa tu aplicación automáticamente en Cloud Run

• Agrega IA generativa a tu aplicación con Genkit
• Administra las instrucciones de LLM con la biblioteca dotprompt

2. Requisitos previos

1. Si aún no tienes una Cuenta de Google, debes crear una.
   • Usa una cuenta personal en lugar de una cuenta de trabajo o de institución educativa. Es posible que las cuentas de trabajo o de instituciones educativas tengan restricciones que te impidan habilitar las APIs necesarias para este lab.
2. Si aún no tienes una cuenta de GitHub, debes crear una
   .
   • Usa una cuenta de GitHub existente si tienes una. Es más probable que GitHub bloquee una cuenta nueva como spam.
   • Configura la autenticación de dos factores en tu cuenta de GitHub para reducir las probabilidades de que se marque como spam.

3. Configura el proyecto

1. Accede a la consola de Google Cloud.
2. Habilita la facturación en la consola de Cloud.
   • Completar este lab debería costar menos de USD 1 en recursos de Cloud.
   • Puedes seguir los pasos que se indican al final de este lab para borrar recursos y evitar cargos adicionales.
   • Los usuarios nuevos son aptos para la prueba gratuita de USD 300.
   • ¿Asisterás a un evento de IA generativa para desarrolladores? Es posible que haya un crédito de USD 1 disponible.
3. Crea un proyecto nuevo o elige reutilizar uno existente.

4. Abrir el editor de Cloud Shell

1. Navega al Editor de Cloud Shell.
2. Si la terminal no aparece en la parte inferior de la pantalla, ábrela:
   • Haz clic en el menú de opciones .
   • Haz clic en Terminal.
   • Haz clic en Terminal nueva.
3. En la terminal, configura tu proyecto con este comando:
   • Formato:

     gcloud config set project [PROJECT_ID]
     

   • Ejemplo:

     gcloud config set project lab-project-id-example
     

   • Si no recuerdas el ID de tu proyecto, haz lo siguiente:
     • Puedes enumerar todos los IDs de tus proyectos con lo siguiente:

       gcloud projects list | awk '/PROJECT_ID/{print $2}'
       

     
4. Si se te solicita autorización, haz clic en Autorizar para continuar.
5. Deberías ver el siguiente mensaje:

   Updated property [core/project].
   

   Si ves un WARNING y se te pregunta Do you want to continue (Y/N)?, es probable que hayas ingresado el ID del proyecto de forma incorrecta. Presiona N, presiona Enter y vuelve a intentar ejecutar el comando gcloud config set project.

5. Habilita las APIs

En la terminal, habilita las APIs:

gcloud services enable \
  run.googleapis.com \
  cloudbuild.googleapis.com \
  aiplatform.googleapis.com

Este comando puede tardar unos minutos en completarse, pero, en algún momento, debería mostrar un mensaje de éxito similar al siguiente:

Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.

6. Configurar Git

1. Establece tu correo electrónico de usuario global de git:

   git config --global user.email "[e-mail]"
   

2. Establece tu nombre de usuario global de git:

   git config --global user.name "Your Name"
   

3. Establece la rama predeterminada de git global en main:

   git config --global init.defaultBranch main
   

7. Escribe el código

Para escribir una aplicación en Node.js, sigue estos pasos:

1. Navega al directorio principal:

   cd ~
   

2. Crea el directorio codelab-genai:

   mkdir codelab-genai
   

3. Navega al directorio codelab-genai:

   cd codelab-genai
   

4. Crea un archivo index.js:

   touch index.js
   

5. Crea el archivo package.json:

   npm init es6 -y
   

6. Agrega express como una dependencia

   npm install express
   

7. Se agregó el archivo .gitignore para evitar confirmar node_modules

   echo node_modules/ >> .gitignore
   

   .
8. Abre el archivo index.js en el editor de Cloud Shell:

   cloudshell edit index.js
   

   Ahora debería aparecer un archivo vacío en la parte superior de la pantalla. Aquí es donde puedes editar el archivo index.js.
9. Copia el siguiente código y pégalo en el archivo index.js abierto:

   import express from 'express';
   
   const app = express();
   app.get('/', async (req, res) => {
       res.send('Hello world!');
   });
   
   const port = process.env.PORT || 8080;
   app.listen(port, () => {
       console.log(`codelab-genai: listening on port ${port}`);
   });
   

   Después de unos segundos, el editor de Cloud Shell guardará tu código automáticamente. Este código responde a las solicitudes HTTP con nuestro saludo “Hello world!”.

El código inicial de tu aplicación está terminado y listo para almacenarse en el control de versión.

8. Crea un repositorio

1. Regresa a la terminal de Cloud Shell en la parte inferior de la pantalla.
2. Asegúrate de estar en el directorio correcto:

   cd ~/codelab-genai
   

3. Inicializa tu repositorio de git

   git init -b main
   

4. Accede a GitHub CLI

   gh auth login
   

   Presiona Enter para aceptar las opciones predeterminadas y sigue las instrucciones de la herramienta de GitHub CLI, incluidas las siguientes:
   1. ¿A qué cuenta quieres acceder? GitHub.com
   2. ¿Cuál es tu protocolo preferido para las operaciones de Git en este host? HTTPS
   3. ¿Quieres autenticar Git con tus credenciales de GitHub? Y (omite este paso si no aparece).
   4. ¿Cómo te gustaría autenticar GitHub CLI? Login with a web browser
   5. Copia tu código de un solo uso
   6. Abre https://github.com/login/device.
   7. Pega el código de uso único
   8. Haz clic en Autorizar GitHub.
   9. Completa el acceso
5. Confirma que accediste:

   gh api user -q ".login"
   

   Si accediste correctamente, se debería mostrar tu nombre de usuario de GitHub.
6. Crea una variable GITHUB_USERNAME

   GITHUB_USERNAME=$(gh api user -q ".login")
   

7. Confirma que creaste la variable de entorno:

   echo ${GITHUB_USERNAME}
   

   Si creaste la variable correctamente, se debería mostrar tu nombre de usuario de GitHub.
8. Crea un repositorio de GitHub vacío llamado codelab-genai:

   gh repo create codelab-genai --private
   

   Si recibes el error:

   GraphQL: Name already exists on this account (createRepository)
   

   Significa que ya tienes un repositorio llamado codelab-genai. Tienes dos opciones para seguir con este instructivo:
   • Borra el repositorio de GitHub existente
   • Crea un repositorio con un nombre diferente y recuerda cambiarlo en los siguientes comandos.
9. Agrega el repositorio codelab-genai como el origin remoto:

   git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai
   

9. Comparte tu código

1. Confirma que estás en el directorio correcto:

   cd ~/codelab-genai
   

2. Agrega todos los archivos del directorio actual a esta confirmación:

   git add .
   

3. Crea la primera confirmación:

   git commit -m "add http server"
   

4. Envía tu confirmación a la rama main del repositorio origin:

   git push -u origin main
   

Puedes ejecutar este comando y visitar la URL resultante para ver el código de tu aplicación en GitHub:

echo -e "\n\nTo see your code, visit this URL:\n \
    https://github.com/${GITHUB_USERNAME}/codelab-genai/blob/main/index.js \n\n"

10. Configura implementaciones automáticas

1. Deja abierta la pestaña del editor de Cloud Shell. Volveremos a esta pestaña más adelante.
2. En una pestaña nueva, visita la página de Cloud Run.
3. Selecciona el proyecto de Google Cloud correcto en la consola
4. Haz clic en CONNECT REPO.
5. Haz clic en CONFIGURAR CON CLOUD BUILD
   .
   1. Selecciona GitHub como el Proveedor de repositorio
      .
      • Si no accediste a tu cuenta de GitHub en el navegador, accede con tus credenciales.
   2. Haz clic en Autenticar y, luego, en Continuar.
   3. Después de acceder, verás un mensaje en la página de Cloud Run que indica que la app de GitHub no está instalada en ninguno de tus repositorios.
   4. Haz clic en el botón INSTALL GOOGLE CLOUD BUILD.
      • En la página Configuración de instalación, selecciona Solo repositorios seleccionados y elige el repositorio codelab-genai que creaste a través de la CLI.
      • Haz clic en Install.
      • Nota: Si tienes muchos repositorios de GitHub, la carga puede tardar unos minutos.
   5. Selecciona your-user-name/codelab-genai como el repositorio
      .
      • Si el repositorio no está presente, haz clic en el vínculo Administrar repositorios conectados.
   6. Deja Rama como ^main$.
   7. Haz clic en Go, Node.js, Python, Java, .NET Core, Ruby o PHP a través de los paquetes de compilación de Google Cloud
      .
      • Deja los otros campos (Build context directory, Entrypoint y Function target) como están.
   8. Haga clic en Guardar.
6. Desplázate hacia abajo hasta Authentication.
7. Haz clic en Permitir invocaciones no autenticadas.
8. Haz clic en CREAR.

Una vez que finalice la compilación (lo que llevará varios minutos), ejecuta este comando y visita la URL resultante para ver la aplicación en ejecución:

echo -e "\n\nOnce the build finishes, visit your live application:\n \
    "$( \
        gcloud run services list | \
        grep codelab-genai | \
        awk '/URL/{print $2}' | \
        head -1 \
    )" \n\n"

11. Cambia tu código

Regresa al editor de Cloud Shell

Si aún tienes abierto el editor de Cloud Shell, puedes omitir estos pasos.

1. Navega al Editor de Cloud Shell.
2. Si la terminal no aparece en la parte inferior de la pantalla, ábrela:
   • Haz clic en el menú de opciones .
   • Haz clic en Terminal.
   • Haz clic en Terminal nueva.
3. En la terminal, configura tu proyecto con este comando:
   • Formato:

     gcloud config set project [PROJECT_ID]
     

   • Ejemplo:

     gcloud config set project lab-project-id-example
     

   • Si no recuerdas el ID de tu proyecto, haz lo siguiente:
     • Puedes enumerar todos los IDs de tus proyectos con lo siguiente:

       gcloud projects list | awk '/PROJECT_ID/{print $2}'
       

     
4. Si se te solicita autorización, haz clic en Autorizar para continuar.
5. Deberías ver el siguiente mensaje:

   Updated property [core/project].
   

   Si ves un WARNING y se te pregunta Do you want to continue (Y/N)?, es probable que hayas ingresado el ID del proyecto de forma incorrecta. Presiona N, presiona Enter y vuelve a intentar ejecutar el comando gcloud config set project.

Agrega Vertex AI a tu aplicación

1. Regresa a la terminal de Cloud Shell en la parte inferior de la pantalla.
2. Asegúrate de estar en el directorio correcto:

   cd ~/codelab-genai
   

3. Instala el SDK de Genkit de Node.js:

   npm install @genkit-ai/ai
   

4. Instala el SDK de Genkit de Node.js para Vertex AI:

   npm install @genkit-ai/vertexai
   

5. Instala el SDK de Google Auth de Node.js:

   npm install google-auth-library
   

6. Vuelve a abrir index.js en el editor de Cloud Shell

   cloudshell edit ~/codelab-genai/index.js
   

7. Reemplaza el código de tu archivo index.js por lo siguiente:

   import express from 'express';
   const app = express();
   
   import { generate } from '@genkit-ai/ai';
   import { gemini15Flash, vertexAI } from '@genkit-ai/vertexai';
   
   import { GoogleAuth } from 'google-auth-library';
   const auth = new GoogleAuth();
   
   app.get('/', async (req, res) => {
       const project = await auth.getProjectId();
   
       const animal = req.query.animal || 'dog';
       const prompt = `Give me 10 fun facts about ${animal}. Return this as html without backticks.`
       const result = await generate({
           plugins: [
               vertexAI({ projectId: project, location: 'us-central1' }),
           ],
           model: gemini15Flash,
           prompt,
       });
       const html = result.text;
       res.send(html);
   });
   
   const port = process.env.PORT || 8080;
   app.listen(port, () => {
       console.log(`codelab-genai: listening on port ${port}`);
   });
   

12. Volver a implementar

1. Asegúrate de que aún te encuentras en el directorio correcto en Cloud Shell:

   cd ~/codelab-genai
   

2. Ejecuta estos comandos para confirmar una versión nueva de tu aplicación en tu repositorio de git local:

   git add .
   git commit -m "add latest changes"
   

3. Envía los cambios a GitHub:

   git push
   

4. Una vez que se complete la compilación, ejecuta este comando y visita la aplicación implementada:

   echo -e "\n\nOnce the build finishes, visit your live application:\n \
       "$( \
           gcloud run services list | \
           grep codelab-genai | \
           awk '/URL/{print $2}' | \
           head -1 \
       )" \n\n"
   

La compilación puede tardar varios minutos en completarse antes de que puedas ver los cambios.

Puedes ver el historial de todas las revisiones aquí: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

13. (Opcional) Audita tu uso de Vertex AI

Al igual que con otros servicios de Google Cloud, puedes auditar las operaciones de Vertex AI. Los registros de auditoría te ayudan a responder las preguntas “¿Quién hizo qué, dónde y cuándo?”. Los registros de auditoría administrativa de Vertex AI están habilitados de forma predeterminada. Para auditar las solicitudes de generación de contenido, debes habilitar los registros de auditoría de acceso a los datos:

Los registros de auditoría de datos pueden implicar costos adicionales.

1. En la consola de Google Cloud, ve a la página Registros de auditoría:
   Ve a Registros de auditoría
   Si usas la barra de búsqueda para encontrar esta página, selecciona el resultado cuyo subtítulo es IAM y administración.
2. Asegúrate de que el proyecto de Google Cloud existente sea el en el que crees tu aplicación de Cloud Run.
3. En la tabla Configuración de los registros de auditoría de acceso a los datos, busca y selecciona Vertex AI API en la columna Servicio.
4. En la pestaña Tipos de registro, selecciona los tipos de registros de auditoría de acceso a los datos Admin read y Data read.
5. Haz clic en Guardar.

Después de habilitarlo, podrás ver los registros de auditoría de cada invocación de la aplicación. Para ver los registros de auditoría con los detalles de la invocación, haz lo siguiente:

1. Regresa a la aplicación implementada y actualiza la página para activar el registro.
2. En la consola de Google Cloud, ve a la página Explorador de registros:
   Ir al Explorador de registros
   
3. En la ventana de consulta, escribe:

   LOG_ID("cloudaudit.googleapis.com%2Fdata_access")
   protoPayload.serviceName="aiplatform.googleapis.com"
   

4. Haz clic en Ejecutar consulta.

Los registros de auditoría capturan el uso de la API de Vertex AI, pero no te permiten observar datos relacionados con la carga de trabajo, como instrucciones o detalles de respuestas.

14. Aumenta la observabilidad de tu carga de trabajo de IA (opcional)

Los registros de auditoría no capturan información relacionada con la carga de trabajo. Para aumentar la visibilidad de tus cargas de trabajo, debes registrar esta información de forma explícita. Para ello, puedes usar tu framework de registro favorito. En los siguientes pasos, se muestra cómo hacerlo con el mecanismo de registro nativo de Node.js.

1. Vuelve a abrir index.js en el editor de Cloud Shell

   cloudshell edit ~/codelab-genai/index.js
   

2. Después de la llamada a await generativeModel.generateContent(prompt) (línea 19), agrega la siguiente línea:

       console.log(JSON.stringify({
           severity: 'DEBUG',
           message: 'Content is generated',
           prompt: prompt,
           response: resp.response,
       }));
   

   Este código escribe en stdout información sobre el contenido generado con el formato de registro estructurado. Un agente de registro en Cloud Run captura el resultado impreso en stdout y escribe este formato en Cloud Logging.
3. Vuelve a abrir Cloud Shell y escribe el siguiente comando para asegurarte de que estás en el directorio correcto:

   cd ~/codelab-genai
   

4. Confirma los cambios:

   git commit -am "observe generated content"
   

5. Envía los cambios a GitHub para activar la nueva implementación de la versión modificada:

   git push
   

Después de que se implemente la versión nueva, puedes observar la información de depuración sobre las llamadas a Vertex AI.

Para ver los registros de tu aplicación, haz lo siguiente:

1. En la consola de Google Cloud, ve a la página Explorador de registros:
   Ir al Explorador de registros
   
2. En la ventana de consulta, escribe:

   LOG_ID("run.googleapis.com%2Fstdout")
   severity=DEBUG
   

3. Haz clic en Ejecutar consulta.

El resultado de la consulta muestra registros con la instrucción y la respuesta de Vertex AI, incluidas las "calificaciones de seguridad" que se pueden usar para supervisar las prácticas de seguridad.

Ten cuidado cuando registres instrucciones, ya que pueden contener información sensible que no está destinada a la observación. Te recomendamos que ocultes esta información. Consulta la documentación de DLP para obtener más detalles.

15. (Opcional) Limpieza

Si bien Cloud Run no cobra cuando el servicio no se usa, es posible que se te cobre por el almacenamiento de la imagen del contenedor en Artifact Registry. Puedes borrar tu proyecto de Cloud para evitar que se generen cargos. Si borras tu proyecto de Cloud, se detendrá la facturación de todos los recursos que usaste en ese proyecto.

Si lo deseas, borra el proyecto:

gcloud projects delete $GOOGLE_CLOUD_PROJECT

También te recomendamos que borres los recursos innecesarios del disco de CloudShell. Puedes hacer lo siguiente:

1. Borra el directorio del proyecto del codelab:

   rm -rf ~/codelab-genai
   

2. Advertencia. No se puede deshacer esta acción. Si quieres borrar todo en Cloud Shell para liberar espacio, puedes borrar todo el directorio principal. Asegúrate de que todo lo que quieras conservar esté guardado en otro lugar.

   sudo rm -rf $HOME
   

16. Felicitaciones

En este lab, escribiste una aplicación web y configuraste Cloud Run para implementarla automáticamente cuando se realizara un cambio en el código fuente de la aplicación. Luego, modificaste la aplicación y la volviste a implementar.

Si disfrutaste este lab, puedes volver a intentarlo en otro lenguaje de programación o framework:

• Python
• Node.js
• Go
• Java
• Angular
• Next.js

Si te interesa participar en un estudio de investigación de experiencia del usuario (UX) para mejorar los productos con los que trabajaste hoy, regístrate aquí.

Estas son algunas opciones para continuar con tu aprendizaje:

• Documentos: Usa Firebase GenKit como una abstracción de modelo flexible que facilita la integración de cualquier API de modelo y el uso de modelos mantenidos por la comunidad.
• Codelab: Cómo implementar una app de chat potenciada por Gemini en Cloud Run
• Cómo usar las llamadas a funciones de Gemini con Cloud Run
• Cómo usar la API de Video Intelligence de Cloud Run Jobs para procesar un video por escena
• Taller on demand: Integración de Google Kubernetes Engine