Acceso a datos en Azure Cosmos DB mediante Mongoose con Azure Static Web Apps

Mongoose es el cliente de ODM (asignación de documentos de objetos) más popular para Node.js. Mongoose permite diseñar una estructura de datos y aplicar la validación, y proporciona todas las herramientas necesarias para interactuar con bases de datos que admiten la API de MongoDB. Cosmos DB admite las API de MongoDB necesarias y está disponible como una opción de servidor back-end en Azure.

Requisitos previos

• Una cuenta de Azure. Si no tiene ninguna suscripción a Azure, cree una cuenta de evaluación gratuita.
• Una cuenta de GitHub.
• Cuenta sin servidor de Cosmos DB. Si usa una cuenta sin servidor, solo paga por los recursos que se usan y no es necesario crear una infraestructura completa.

1. Creación de una base de datos sin servidor de Cosmos DB

Complete los pasos siguientes para crear una BD sin servidor de Cosmos.

1. Inicie sesión en Azure Portal.
2. Seleccione Crear un recurso.
3. Introduzca Azure Cosmos DB en el cuadro de búsqueda.
4. Seleccione Azure Cosmos DB.
5. Seleccione Crear.
6. Si se le solicita, en API de Azure Cosmos DB para MongoDB, seleccione Crear.
7. Configure su cuenta de Azure Cosmos DB con la siguiente información:
   • Suscripción: seleccione la suscripción que desea usar.
   • Recurso: seleccione Crear nuevo y establezca el nombre en aswa-mongoose.
   • Nombre de cuenta: se requiere un valor único.
   • Ubicación: Oeste de EE. UU. 2.
   • Modo de capacidad: sin servidor (versión preliminar) .
   • Versión: 4.0
8. Seleccione Revisar + crear.
9. Seleccione Crear.

El proceso de creación tarda unos minutos. Se vuelve la base de datos para recopilar la cadena de conexión después de crear una aplicación web estática.

2. Creación de una aplicación web estática

En este tutorial se usa un repositorio de plantillas de GitHub para ayudarle a crear la aplicación.

1. Vaya a la plantilla de inicio.

2. Seleccione el propietario (si usa una organización que no sea la cuenta principal).

3. Asigne al repositorio el nombre aswa-mongoose-tutorial.

4. Seleccione Create repository from template (Crear repositorio a partir de plantilla).

5. Vuelva a Azure Portal.

6. Seleccione Crear un recurso.

7. Introduzca aplicación web estática en el cuadro de búsqueda.

8. Seleccione Static Web App.

9. Seleccione Crear.

10. Configure la instancia de Azure Static Web Apps con la siguiente información:

    • Suscripción: elija la misma suscripción que antes.
    • Grupo de recursos: seleccione aswa-mongoose.
    • Nombre: aswa-mongoose-tutorial.
    • Región: Oeste de EE. UU. 2.
    • Seleccione Iniciar sesión con GitHub.
    • Seleccione Autorizar si se le pide que permita a Azure Static Web Apps crear la acción de GitHub para habilitar la implementación.
    • Organización: nombre de la cuenta de GitHub.
    • Repositorio: aswa-mongoose-tutorial.
    • Rama: principal.
    • Valores preestablecidos de compilación: elija React.
    • Ubicación de la aplicación: /
    • Ubicación de la API: api.
    • Ubicación de salida: build

11. Seleccione Revisar y crear.

12. Seleccione Crear.

13. El proceso de creación tarda unos minutos; una vez aprovisionada la aplicación web estática, seleccione Ir al recurso.

3. Configuración de la cadena de conexión de base de datos

Para permitir que la aplicación web se comunique con la base de datos, la cadena de conexión de base de datos se almacena como una configuración de la aplicación. Los valores de configuración son accesibles en Node.js mediante el objeto process.env.

1. Seleccione Inicio en la esquina superior izquierda de Azure Portal (o vuelva a https://portal.azure.com).
2. Seleccione Grupos de recursos.
3. Seleccione aswa-mongoose.
4. Seleccione el nombre de la cuenta de base de datos; tiene un tipo de API de Azure Cosmos DB para Mongo DB.
5. En Configuración, seleccione Cadena de conexión.
6. Copie la cadena de conexión que aparece en CADENA DE CONEXIÓN PRINCIPAL.
7. En las rutas de navegación, seleccione aswa-mongoose.
8. Seleccione aswa-mongoose-tutorial para volver a la instancia del sitio web.
9. En Configuración, seleccione Configuración.
10. Seleccione Agregar y cree una nueva configuración de la aplicación con los valores siguientes:
    • Nombre: AZURE_COSMOS_CONNECTION_STRING
    • Valor: <pegue la cadena de conexión copiada anteriormente>
11. Seleccione Aceptar.
12. Seleccione Agregar y cree una nueva configuración de la aplicación con los valores siguientes para el nombre de la base de datos:
    • Nombre: AZURE_COSMOS_DATABASE_NAME
    • Valor: todo
13. Seleccione Aceptar.
14. Seleccione Guardar.

4. Acceso al sitio

Ahora puede explorar su aplicación web estática.

1. En Azure portal, seleccione Información general.
2. Seleccione la dirección URL que se muestra en la esquina superior derecha.
   1. Tiene un aspecto similar a https://calm-pond-05fcdb.azurestaticapps.net.
3. Seleccione Iniciar sesión para ver la lista de tareas.
4. Seleccione Otorgar consentimiento para acceder a la aplicación.
5. Para crear una nueva lista, introduzca un nombre en el cuadro de texto con la etiqueta Crear nueva lista y seleccione Guardar.
6. Para crear una nueva tarea, introduzca un título en el cuadro de texto con la etiqueta Crear nuevo elemento y seleccione Guardar.
7. Confirme que se muestra la tarea (puede tardar un momento).
8. Para marcar la tarea como completada, seleccione la casilla; la tarea se moverá a la sección Elementos listos de la página.
9. Actualice la página para confirmar que se está utilizando una base de datos.

Limpieza de recursos

Si no va a seguir usando esta aplicación, elimine el grupo de recursos mediante los siguientes pasos:

1. Vuelva a Azure Portal.
2. Seleccione Grupos de recursos.
3. Seleccione aswa-mongoose.
4. Seleccione Eliminar grupo de recursos.
5. Introduzca aswa-mongoose en el cuadro de texto.
6. Seleccione Eliminar.

Pasos siguientes

Pase al siguiente artículo, donde aprenderá a configurar el desarrollo local.

Configuración del desarrollo local