Repositorio responsable de los workshops MEAN y Serverless.
¡Durante este workshop aprenderá cómo migrar de manera simple, rápida y dinámica una aplicación MEAN a una arquitectura Serverless usando Azure Functions!
Los datos del Empleado consisten en:
Classe: Funcionario (Empleado)
Si es estudiante en cualquier colegio o universidad, puede crear su cuenta de Azure for Students Azure for Students. Esta cuenta le dará el beneficio de tener un crédito de $ 100 para usar los servicios de forma gratuita, sin tener una tarjeta de crédito. Para activar esta cuenta, haga clic: AQUÍ
Para la realización de los workshops, es necesario tener nociones de: HTML, CSS y JavaScript. Y también nociones de Azure Functions. Abajo hay cursos gratuitos sobre:
Curso Gratuito - Creación de un sitio web sencillo con HTML, CSS y Javascript
Curso Gratuito - Desarrollo de aplicaciones web con Visual Studio Code
front
)> npm install
front
):> ng serve -o
Luego simplemente abra el navegador en localhost: 4200
Antes de comenzar los pasos a continuación, es muy importante que ahora ejecute MongoDb localmente.
api
)> npm install
api
):> nodemon
Luego simplemente abra el Postman en localhost: 8000 y pruebe las requisiciones
Y vòilá! ❤️ ❤️
Para facilitar el desarrollo y la agilidad del proyecto, ya creé dos API que consumen este proyecto en Front End. Para esto, siga los enlaces de apis:
Esta API persiste localmente en MongoDb a través de Azure Functions.
Para ejecutar, solo siga estos pasos:
> npm i
local.settings.json
e incluya el bloque de código:{
"IsEncrypted": false,
"Values": {
"FUNCTIONS_WORKER_RUNTIME": "node",
"AzureWebJobsStorage": "{AzureWebJobsStorage}"
},
"Host": {
"LocalHttpPort": 7071,
"CORS": "*"
}
}
> func host start
Y enumerará todos los endpoints creados y necesarios para persistir junto con nuestro Front-End.
Ahora abre el proyecto front
y vaya: src -> app -> funcionario.service.ts
Al ingresar el archivo funcionario.service.ts
, solo cambia la uri a: http://localhost:7071/api
Ejecute el proyecto angular con el comando:
> ng server -o
Y vòilá! Sólo empezar a persistir!!
> npm i
local.settings.json
e incluya el bloque de código:{
"IsEncrypted": false,
"Values": {
"AzureWebJobsStorage": "",
"FUNCTIONS_WORKER_RUNTIME": "node",
"CosmosDbUrl": "<cosmos-db-url>",
"CosmosDBUser": "crud-serverless-wavy",
"CosmosDBPassword": "<cosmos-db-password>"
},
"Host": {
"LocalHttpPort": 7071,
"CORS": "*"
}
}
> func host start
Y enumerará todos los endpoints creados y necesarios para persistir junto con nuestro Front-End.
Ahora abre el proyecto front
y vaya: src -> app -> funcionario.service.ts
Al ingresar el archivo funcionario.service.ts
, solo cambia la uri a: http://localhost:7071/api
Ejecute el proyecto angular con el comando:
> ng server -o
Y vòilá! Sólo empezar a persistir!!
El proceso de migración de datos persistentes localmente de MongoDb a CosmosDb es bastante simple. Sin embargo, le recomiendo que para facilitar el proceso, descargue el MongodB Compass GUI y tener una cuenta del Conta - Azure. Teniendo estas dos cuentas, podemos continuar.
> meanServerlessResourceGroup
> crud--serverless-<inclua-seu-nome>
> az cosmosdb create --name crud--serverless-<inclua-seu-nome> --resource group meanServerlessResourceGroup --kind MongoDB
Abra el recurso recién creado y capture las cadenas de conexión (clave principal) creadas en el paso anterior.
Paso: ahora importemos los datos localmente de MongoDb a CosmosDb. Simplemente abra MongoDb Compass y haga clic en exportar archivo y guárdelo en la ubicación donde lo desee.
Paso: Ahora ejecutemos el siguiente comando. Este comando será responsable de migrar el archivo creado en el paso anterior para cargarlo en CosmosDb.
> mongoimport.exe --host crud--serverless-<inclua-seu-nome>.documents.azure.com:10255 -u crud--serverless-<inclua-seu-nome> -p <primary-key-criada-cosmosdb> --ssl --sslAllowInvalidCertificates --db crud--serverless-<inclua-seu-nome> --collection funcionarios --file funcionarios.json
Y listo! Cuando se abre el Portal de Azure y acceder al recurso Azure CosmosDb, verá que sus datos locales, se han migrado con éxito en Azure CosmosDb!
Para implementar la aplicación en la nube debemos seguir los pasos: (todos los pasos deben usar el Azure CLI)
Pero antes, debemos ejecutar el comando adentro de la carpeta front
:
> ng build
Vas a generar una otra carpeta llamada dist
. Y es justo ella que iremos necesitar para implementar en la nube! ;)
> az webapp up -n <nombre-de-la-app>
Y listo! Podemos abrir nuestra aplicación! :)
Durante el workshop, hablé sobre muchas documentaciones importantes, enlaces y recursos que pueden ayudarlo a conocer más sobre Azure Functions y Azure.
Si tiene preguntas sobre los códigos de proyecto relacionados con los workshops, no dude en abrir un ISSUE AQUI. ¡Tan pronto como sea posible, responderé cualquier pregunta que pueda tener!