DEV Community

Francisco Javier Guerrero Martinez
Francisco Javier Guerrero Martinez

Posted on

Desplegando un Backend Graphql NodeJS Azure Container Apps

En esta entrada realizaremos el despliegue de un backend utilizando Azure DevOPS (pipelines), Azure Registries y Azure Containers Apps

Requisitos

Cuenta en Azure
Servicio Azure Registries Activo
Servicio Azure Containers Apps Activo
Cuenta en Azure DevOps

Creando servicio Registries

Partiré de la premisa que ya cuentas con una cuenta en Azure, navegamos en el buscador de servicios y buscamos el Servicio Azure Container Registries

Image description

Una vez dentro, deberás de llenar los campos marcados como obligatorios

Image description

Para esta entrada te recomendaré que utilices en SKU: Basic, esto para reducir el gasto en la factura y si tu APP no tiene bastante demanda.

Image description

Al ser un registro básico, este estará público aplicará el mismo caso para el tipo de Encryptation. Si deseas agregar los tags puedes hacerlo para este ejemplo dejaré todo en blanco y saltaré hasta la última pantalla

Image description

Damos clic en el botón create para crear el recurso.

Conectado Azure DevOPS Pipelines con Azure Registries

En esta parte conectaremos nuestro repositorio a Registries a fin de obtener la imagen Docker que posteriormente desplegaremos.

Ingresamos al apartado pipelines de nuestro Azure DevOPS y crearemos una nueva

Image description

Seleccionamos Azure Repos Git y posteriormente el proyecto con el que vamos a trabajar. En mi caso es testProject

Image description

A continuación nos aparecerán las opciones disponibles, para esta entrada seleccionaremos la segunda opción de Docker (Build and Push and Image to Azure Container Registry)

Image description

Ahora seleccionamos la subscripción en la que desplegaremos el contenedor.

Image description

En la siguiente pantalla vamos a validar a que registro enviaremos la imagen, así como también el nombre que llevará la imagen. Para este caso dejaré todo como aparece en el asistente y hacemos clic en el Validate and Configure

Image description

En la siguiente pantalla nos aparecerá la pantalla del archivo de configuración del pipeline ya finalizado. Hacemos clic en Save and Run, damos commit y esperamos a que se ejecute el pipeline

Image description

Image description

Una vez que finalizó nuestro Pipeline, procedos a regresar al Registries. En el apartado Repositories podemos observar nuestra imagen desplegada.

Image description

Desplegando el contenedor a Azure Container App

Para este apartado crearemos un nuevo recurso de tipo Azure Container App.

Image description

Una vez creado el recurso, ingresamos y buscamos el apartado Containers. Probablemente tengamos el contenedor "hello-world", esto porque me he bricando un paso cuando estaba creando el recurso

Image description

Hacemos clic en Edit

Nos aperecerá la siguiente ventana donde eliminaremos el contenedor de ejemplo

Image description

Hacemos clic en el botón Add (+) y nos aparecerá un cuadro de diálogo donde se deberá ingresar la información para conectar el contenedor que acabamos de desplegar en Registries

Image description

Si nos aparece ese error es porque no tenemos permisos para leer las imagenes del Registro, para ello regresamos al Registro

En el apartado Access Keys habilitamos la opción Admin user

Image description

Te recomiendo guardar para uso futuro el password que aparece.

Una vez realizado esta modificación regresamos al Container Apps y volvemos a agregar el contenedor.

Image description

Ahora podemos tener acceso al registro y las imagenes de contenedor que este tiene.

Image description

Al final tienes un apartado Environment Variables, aquí configuras las variables de entorno de tu App, ejemplo conexión a base de datos, puertos, etc.

Como este es un simple hola mundo, solo agregaré la variable de entorno PORT, que es la necesaria para que la app pueda funcionar.

Finalizando las configuraciones hacemos clic en Add

Con esto tendremos nuestra aplicación contenerizada desplegada en Azure Containers App.

Image description

Probando el endpoint en Altair Graphql

Image description

Top comments (0)