Repositório responsável pela realização do workshop de MEAN & Serverless
Repositório responsável pelo workshops de MEAN & Serverless.
Durante esse workshop você aprenderá a realizar a migração de uma maneira simples, rápida e dinâmica uma aplicação MEAN para uma arquitetura Serverless, fazendo uso do Azure Functions!
Os dados do Funcionário consiste em:
Classe: Funcionario
Angular v.9.x
Caso você seja um(a) estudante de alguma Instituição de Ensino de Faculdade ou Universidade, poderá criar sua conta no Azure for Students. Essa conta te dará o benefício em possuir crédito de USD 100,00 para usar os serviços de maneira gratuita, sem necessidade de possuir um cartão de crédito. Para ativar essa conta, bastam acessar o link ao lado: AQUI
Para a realização dos workshops de React.js, se faz necessário ter noções de: HTML, CSS & JavaScript. Pensando nisso, estou disponibilizando abaixo dois cursos grátis de:
front
)> npm install
front
):> ng serve -o
Depois bastam abrir o browser em localhost:4200 (porta padrão de uma aplicação Angular)
Antes de iniciar os passos abaixo é muito importante que você execute nesse momento o MongoDb localmente!
api
)> npm install
api
):> nodemon
Depois bastam abrir o postamn em localhost:8000 e testar as requisições
E vòilá! :heart: :heart:
Visando facilitar o desenvolvimento e agilidade do projeto, já criei duas API que consomem esse projeto no Front-End. Para isso, seguem os links das apis:
Essa API persiste localmente no MongoDb via Azure Functions.
Para executar, bastam seguir os seguintes passos:
> npm i
local.settings.json
e incluir o bloco de código abaixo:{
"IsEncrypted": false,
"Values": {
"FUNCTIONS_WORKER_RUNTIME": "node",
"AzureWebJobsStorage": "{AzureWebJobsStorage}"
},
"Host": {
"LocalHttpPort": 7071,
"CORS": "*"
}
}
> func host start
E ele irá listar todos os endpoints criados e necessários para persistir juntamente com o nosso Front-End.
Agora abre o projeto front
e vão até: src -> app -> funcionario.service.ts
Ao entrar no arquivo funcionario.service.ts
, basta alterar a uri para: http://localhost:7071/api
Execute o projeto Angular com o comando:
> ng serve -o
E vòilá! Só começar a persistir!
> npm i
local.settings.json
e incluir o bloco de código abaixo:{
"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
E ele irá listar todos os endpoints criados e necessários para persistir juntamente com o nosso Front-End.
Agora abre o projeto front
e vão até: src -> app -> funcionario.service.ts
Ao entrar no arquivo funcionario.service.ts
, basta alterar a uri para: http://localhost:7071/api
Execute o projeto Angular com o comando:
> ng server -o
E vòilá! Só começar a persistir!
O processo de migração dos dados localmente persistidos pelo MongoDb para o CosmosDb é bem simples. Porém, recomendo que para deixar o processo mais fácil que baixem o MongodB Compass GUI e possuir uma conta do Conta - Azure. Tendo esses dois recursos,poderemos seguir com os seguintes passos abaixo:
> meanServerlessResourceGroup
> crud--serverless-<inclua-seu-nome>
> az cosmosdb create --name crud--serverless-<inclua-seu-nome> --resource group meanServerlessResourceGroup --kind MongoDB
Abre o recurso recém criado e capture as connections strings (primary key) criada no passo anterior.
Passo: agora vamos importar os dados localmente do MongoDb para o CosmosDb. Para isso, bastam abrir o MongoDb Compass e clicar em export file e salvar num local onde você deseja.
Passo: agora vamos executar o seguinte comando abaixo. Esse comando será responsável por migrar o arquivo criado no passo anterior para enviar para o 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
E pronto! Ao abrir o Portal Azure e acessar o recurso do Azure CosmosDb, verá que os seus dados locais, foram migrados com sucesso no Azure CosmosDb!
Para realizar o deploy da aplicação ao Azure precisamos seguir com alguns pessos:
Mas antes, vá até a pasta front
e execute o seguinte o seguinte comando:
> ng build
Esse comando irá gerar uma pasta chamada dist
. E é justamente essa pasta que precisaremos para realizar o deploy da nossa aplicação MEAN ao Azure.
dist
com o seguinte comando:> az webapp up -n <nombre-de-la-app>
E pronto! Agora podemos abrir a nossa aplicação no browser!
Durante o workshop, comentei sobre importantes documentações, links e recursos que podem auxiliar o seu conhecimento sobre Serverless & Azure Functions
Caso tenham dúvidas aos códigos dos projetos relacionados aos workshops, sintam-se a vontade em abrir uma ISSUE AQUI. Assim que possível, estarei respondendo as todas as dúvidas que tiverem!
documentação em desenvolvimento