/workshop-mean-serverless

Repositório responsável pela realização do workshop de MEAN & Serverless

Primary LanguageTypeScript

Workshop - MEAN & Serverless

bit-community.png

Repositório responsável pelo workshops de MEAN & Serverless.

O que eu vou aprender?! 📙

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

  • idFuncionario: (number - guid gerado pelo MongoDb)
  • nomeFuncionario: string
  • cargo: string
  • numeroIdentificador: number

Recursos Utilizados 🚀

Angular v.9.x

Conta - Azure for Students ⭐️

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

Pré-requisitos 📌

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:

Executando a Aplicação Localmente ❗️

Executando a aplicação no lado do Front-End

  1. Instalar os pacotes com o comando: (dentro da pasta front)
> npm install
  1. Depois executar o seguinte comando para executar a aplicação (dentro da pasta front):
> ng serve -o

Depois bastam abrir o browser em localhost:4200 (porta padrão de uma aplicação Angular)

Executando a aplicação no lado do Back-End

Antes de iniciar os passos abaixo é muito importante que você execute nesse momento o MongoDb localmente!

  1. Instalar os pacotes com o comando: (dentro da pasta api)
> npm install
  1. Depois executar o seguinte comando para executar a aplicação (dentro da pasta api):
> nodemon

Depois bastam abrir o postamn em localhost:8000 e testar as requisições

E vòilá! ❤️ ❤️

Consumindo as API's no Azure Functions(Mongo x CosmosDb) ⚡️

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:

API via MongoDb - Azure Functions

Essa API persiste localmente no MongoDb via Azure Functions.

Para executar, bastam seguir os seguintes passos:

  1. Baixar o projeto abaixo:
  1. Instalar as dependências necessárias com o comando:
> npm i
  1. Criar um arquivo chamado: local.settings.json e incluir o bloco de código abaixo:
{
  "IsEncrypted": false,
  "Values": {
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsStorage": "{AzureWebJobsStorage}"
  },
  "Host": {
    "LocalHttpPort": 7071,
    "CORS": "*"
  }
}
  1. Execute o comando:
> func host start

E ele irá listar todos os endpoints criados e necessários para persistir juntamente com o nosso Front-End.

  1. Agora abre o projeto front e vão até: src -> app -> funcionario.service.ts

  2. Ao entrar no arquivo funcionario.service.ts, basta alterar a uri para: http://localhost:7071/api

  3. Execute o projeto Angular com o comando:

> ng server -o

E vòilá! Só começar a persistir!

API via CosmosDb - Azure Functions

  1. Baixar o projeto abaixo:
  1. Instalar as dependências necessárias com o comando:
> npm i
  1. Criar um arquivo chamado: 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": "*"
  }
}
  1. Execute o comando:
> func host start

E ele irá listar todos os endpoints criados e necessários para persistir juntamente com o nosso Front-End.

  1. Agora abre o projeto front e vão até: src -> app -> funcionario.service.ts

  2. Ao entrar no arquivo funcionario.service.ts, basta alterar a uri para: http://localhost:7071/api

  3. Execute o projeto Angular com o comando:

> ng server -o

E vòilá! Só começar a persistir!

Quero migrar os dados persistidos localmente para o CosmosDb... Como faço?!

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:

  1. Passo: abre o portal Azure e crie um Grupo de Recursos. Se tiver já um criado, ótimo!
> meanServerlessResourceGroup
  1. Passo: agora vamos criar o Base de dados no Azure CosmosDb. Para isso, abre o seu bash no Portal Azure e execute os seguintes comandos abaixo:
> crud--serverless-<inclua-seu-nome>

> az cosmosdb create --name crud--serverless-<inclua-seu-nome> --resource group meanServerlessResourceGroup --kind MongoDB
  1. Abre o recurso recém criado e capture as connections strings (primary key) criada no passo anterior.

  2. 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.

  3. 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!

Deploy para o Azure ☁️

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.

  1. Execute o seguinte comando dentro da pasta dist com o seguinte comando:
> az webapp up -n <nombre-de-la-app>

E pronto! Agora podemos abrir a nossa aplicação no browser!

Links & Recursos Importantes ⭐️

Durante o workshop, comentei sobre importantes documentações, links e recursos que podem auxiliar o seu conhecimento sobre Serverless & Azure Functions

Tenho Dúvidas... O que Faço?! ❓

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