Aplicativo de pilha MEAN sem servidor no MongoDB Atlas e no Cloud Run

1. Introdução

Nesta postagem,veremos como o Cloud Run e o MongoDB se unem para oferecer uma experiência de desenvolvimento de aplicativos de pilha MEAN completamente sem servidor. Vamos aprender a criar um aplicativo MEAN sem servidor com o Cloud Run e o MongoDB Atlas, a plataforma de dados de aplicativos multicloud do MongoDB.

O que é o Cloud Run?

O Cloud Run permite criar e implantar apps conteinerizados escalonáveis, escritos em qualquer linguagem (incluindo Go, Python, Java, Node.js, .NET e Ruby) em uma plataforma totalmente gerenciada. O Cloud Run se destaca da concorrência porque nos permite:

  • Empacotar o código em vários contêineres sem estado que reconhecem solicitações e invocá-lo usando solicitações HTTP
  • Apenas pelos recursos exatos que você usar
  • Suporte a qualquer linguagem de programação ou biblioteca de sistema operacional de sua escolha, ou qualquer binário

Confira este link para mais recursos em contexto completo.

Banco de dados sem servidor com o MongoDB Atlas

Para resolver esse problema, o MongoDB lançou as instâncias sem servidor, uma nova implantação de banco de dados sem servidor e totalmente gerenciada no Atlas. Com instâncias sem servidor, você nunca precisa se preocupar com a infraestrutura. Basta implantar seu banco de dados e ele será escalonado verticalmente de acordo com a demanda, sem necessidade de gerenciamento prático. E o melhor: você só vai pagar pelas operações que executar. Para tornar nossa arquitetura verdadeiramente sem servidor, vamos combinar os recursos do Cloud Run e do MongoDB Atlas.

Pilha MEAN

A pilha MEAN é uma pilha de tecnologia para criar aplicativos da Web de pilha completa inteiramente com JavaScript e JSON. A pilha MEAN é composta por quatro componentes principais: MongoDB, Express, Angular e Node.js.

  • O MongoDB é responsável pelo armazenamento de dados.
  • Express.js é uma biblioteca de aplicativos da Web em Node.js para criar APIs.
  • Angular é uma plataforma JavaScript do lado do cliente.
  • O Node.js é um ambiente de execução JavaScript do lado do servidor. O servidor usa o driver Node.js do MongoDB para se conectar ao banco de dados, além de recuperar e armazenar dados.

O que você vai criar

Você vai criar um aplicativo de pilha completa Employee-Job Role em MongoDB, Express JS, Angular JS e Node JS. Ele contém:

  • Um aplicativo de servidor em Node.js e Express JS, conteinerizado
  • Um aplicativo cliente criado em AngularJS, conteinerizado
  • Os dois aplicativos são implantados no Cloud Run
  • O app do servidor se conecta à instância do MongoDB sem servidor usando o driver do MongoDB NodeJS
  • A API do servidor realiza as interações de leitura/gravação com o banco de dados
  • O aplicativo cliente é a interface do usuário para o aplicativo Função do funcionário

O que você vai aprender

  • Como criar instâncias do MongoDB sem servidor
  • Como configurar um projeto do Cloud Run
  • Como implantar aplicativos da Web no Google Cloud Run
  • Como criar e implantar um aplicativo de pilha MEAN

2. Requisitos

  • Use um navegador, como o Chrome ou o Firefox.
  • Um projeto do Google Cloud Platform que contém a instância do Cloud Run e do MongoDB Atlas
  • A próxima seção apresenta a lista de etapas para criar o aplicativo MEAN Stack

3. Criar a instância e o banco de dados do MongoDB sem servidor

e5cc775a49f2fb0.png

  • Depois de se inscrever, clique em "Build a Database" para criar uma instância sem servidor. Selecione a seguinte configuração:

fca10bf6f031af7a.png

  • Depois que a instância sem servidor for provisionada, ela vai aparecer em execução.

d13c4b8bdd9569fd.png

  • Clique no botão "Conectar". para adicionar um endereço IP de conexão e um usuário do banco de dados
  • Neste codelab, vamos usar o módulo "Permitir acesso de qualquer lugar" do ambiente. O MongoDB Atlas vem com um conjunto de recursos de segurança e acesso. Saiba mais no artigo da documentação sobre recursos de segurança
  • Use credenciais de sua escolha para o nome de usuário e a senha do banco de dados. Depois que essas etapas forem concluídas, você verá o seguinte:

bffeef16de1d1cd2.png

  • Continue clicando em "Escolha um método de conexão" e selecionando "Conectar seu aplicativo"

75771e64427acd5e.png

  • Copie a string de conexão exibida e substitua a senha pela sua própria senha. Usaremos essa string para estabelecer conexão com nosso banco de dados nas próximas seções.

4. Configurar um projeto do Cloud Run

  • Primeiro, faça login no console do Cloud, crie um novo projeto ou reutilize um existente
  • Lembrar o ID do projeto que você criou
  • Confira abaixo uma imagem que mostra a página do novo projeto, onde você pode conferir o ID do projeto ao criá-lo.

f32dbd4eb2b7501e.png

  • Em seguida, ative a API Cloud Run no Cloud Shell:
  • Ative o Cloud Shell no console do Cloud. Basta clicar em "Ativar o Cloud Shell"
  • Depois de se conectar ao Cloud Shell, sua conta já está autenticada e o projeto está configurado com o ID do seu PROJETO. Se, por algum motivo, o projeto não estiver definido, basta emitir o seguinte comando:
gcloud config set project PROJECT_ID

3da173210a016316.png

  • Use o comando abaixo:
gcloud services enable run.googleapis.com
  • Vamos usar o Cloud Shell e o Editor do Cloud Shell para fazer referências de código. Para acessar o editor do Cloud Shell, clique em "Abrir editor" no terminal do Cloud Shell:

83793a577f08e4d4.png

5. Clonar o projeto MEAN Stack

  • Vamos implantar um aplicativo da Web de gerenciamento de funcionários. A API REST é criada com Express e Node.js. na interface da Web, com o Angular, e os dados serão armazenados na instância do MongoDB Atlas
  • Clone o repositório do projeto executando o seguinte comando no terminal do Cloud Shell:
git clone https://github.com/mongodb-developer/mean-stack-example.git

6. Implante a API REST Express e Node.js

Arquivo de configuração do Docker

  • Primeiro, vamos implantar um serviço do Cloud Run para a API REST Express. O arquivo mais importante para nossa implantação é o de configuração do Docker. Vamos dar uma olhada:

mean-stack-example/server/Dockerfile

# Use the official lightweight Node.js 12 image.
# https://hub.docker.com/_/node
FROM node:17-slim
 
WORKDIR /usr/app
COPY ./ /usr/app
 
# Install dependencies and build the project.
RUN npm install
RUN npm run build
 
# Run the web service on container startup.
CMD ["node", "dist/server.js"]
  • A configuração define o Node.js e copia e cria o projeto. Quando o contêiner é iniciado, o comando abaixo inicia o serviço
node dist/server.js
  • Para iniciar uma nova implantação do Cloud Run, clique no ícone do Cloud Run na barra lateral esquerda:

48c73bda3aa4ea02.png

  • Depois, clique no ícone "Implantar no Cloud Run":

cde124ba8ec23b34.png

  • Preencha a configuração do serviço da seguinte maneira:
  • Nome do serviço: node-express-api
  • Plataforma de implantação: Cloud Run (totalmente gerenciado)
  • Região: selecione uma região próxima à do seu banco de dados para reduzir a latência
  • Autenticação: permitir invocações não autenticadas
  • Em Configurações de revisão, clique em Mostrar configurações avançadas para expandi-las:
  • Porta do contêiner: 5200
  • Variáveis de ambiente. Adicione o seguinte par de chave-valor e adicione a string de conexão para sua própria implantação do MongoDB Atlas:
ATLAS_URI:mongodb+srv:/<username>:<password>@sandbox.pv0l7.mongodb.net/meanStackExample?retryWrites=true&w=majority
  • Para o ambiente Build, selecione Cloud Build
  • Por fim, na seção "Configurações do build", selecione:
  • Criador: Docker
  • Docker: mean-stack-example/server/Dockerfile
  • Clique no botão "Implantar" e em "Mostrar registros detalhados" para acompanhar a implantação do seu primeiro serviço do Cloud Run.
  • Após a conclusão do build, você verá o URL do serviço implantado:

759c69ba52a85b10.png

  • Abra o URL e anexe "/employees" até o fim
  • Você verá uma matriz vazia porque não há documentos no banco de dados no momento.

Vamos implantar a interface do usuário para adicionar algumas.

7. Implantar o aplicativo da Web Angular

O aplicativo Angular está no diretório do cliente. Para implantá-lo, usaremos o servidor Nginx e o Docker. Também há uma opção para usar o Firebase Hosting para a implantação do aplicativo Angular, já que você pode veicular seu conteúdo diretamente em uma CDN (rede de fornecimento de conteúdo).

Arquivos de configuração

Vamos dar uma olhada nos arquivos de configuração:

mean-stack-example/client/nginx.conf

events{}
 
http {
   include /etc/nginx/mime.types;
   server {
       listen 8080;
       server_name 0.0.0.0;
       root /usr/share/nginx/html;
       index index.html;
 
       location / {
           try_files $uri $uri/ /index.html;
       }
   }
}
  • Na configuração do Nginx, especificamos a porta padrão (8080) e o arquivo inicial index.html.

mean-stack-example/client/Dockerfile

FROM node:17-slim AS build
 
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
 
# Install dependencies and copy them to the container
RUN npm install
COPY . .
 
# Build the Angular application for production
RUN npm run build --prod
 
# Configure the nginx web server
FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /usr/src/app/dist/client /usr/share/nginx/html
 
# Run the web service on container startup.
CMD ["nginx", "-g", "daemon off;"]
  • Na configuração do Docker, instalamos as dependências do Node.js e criamos o projeto. Depois, copiamos os arquivos compilados para o contêiner, configuramos e iniciamos o serviço Nginx
  • Por fim, precisamos configurar o URL para a API REST para que nosso aplicativo cliente possa enviar solicitações a ela. Como estamos usando apenas o URL em um único arquivo no projeto, ele será fixado no código. Como alternativa, você pode anexar a variável de ambiente ao objeto da janela e acessá-la de lá.

mean-stack-example/client/src/app/employee.service.ts

...
@Injectable({
 providedIn: 'root'
})
export class EmployeeService {
 // Replace with the URL of your REST API
 private url = 'https://node-express-api-vsktparjta-uc.a.run.app'; 
...
  • Estamos prontos para implantar no Cloud Run. Inicie uma nova implantação com as seguintes configurações:
      - Service Settings: Create a service
    
  • Nome do serviço: angular-web-app
  • Plataforma de implantação: Cloud Run (totalmente gerenciado)
  • Autenticação: permitir invocações não autenticadas
  • Para o ambiente Build, selecione Cloud Build
  • Por fim, na seção "Configurações do build", selecione:
  • Criador: Docker
  • Docker: mean-stack-example/client/Dockerfile
  • Clique no botão "Deploy" novamente e observe os registros enquanto o app é enviado para a nuvem. Quando a implantação estiver concluída, o URL do app cliente vai aparecer.

5da1d7defc1082fc.png

  • Abra o URL e teste seu aplicativo.

db154f1cd57e38f0.png

8. Limpar

Para evitar cobranças na sua conta do Google Cloud pelos recursos usados nesta postagem, execute as etapas a seguir.

Encerrar instâncias do MongoDB

  1. Acesse os clusters da instância do MongoDB
  2. Selecione o cluster e a instância que você criou
  3. Clique nas reticências ao lado do nome do cluster e selecione "Encerrar" na lista

Excluir as implantações do Cloud Run

  1. Acesse a página do Cloud Run no console do Google Cloud.
  2. Selecione o serviço do Cloud Run que você quer excluir
  3. Clique no ícone de exclusão na parte superior do console

9. Parabéns

Parabéns, você criou com sucesso o aplicativo da Web MEAN Stack no Cloud Run.