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

1. Introdução

Nesta postagem,vamos mostrar como o Cloud Run e o MongoDB se unem para permitir uma experiência de desenvolvimento de aplicativos de pilha MEAN totalmente 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?

Com o Cloud Run, é possível 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 por permitir que:

  • Empacotar o código em vários contêineres sem estado que reconhecem solicitações e invocar por solicitações HTTP
  • Pague apenas pelos recursos exatos que você usa
  • 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 no contexto completo.

Banco de dados sem servidor com o MongoDB Atlas

O MongoDB lançou instâncias sem servidor, uma nova implantação de banco de dados sem servidor totalmente gerenciada no Atlas para resolver esse problema. Com instâncias sem servidor, você nunca precisa pensar em infraestrutura. Basta implantar seu banco de dados, e ele vai escalonar verticalmente e diminuir a escala sem problemas com base na demanda, sem exigir gerenciamento prático. E o melhor de tudo é que você só paga pelas operações que executa. Para tornar nossa arquitetura verdadeiramente sem servidor, vamos combinar os recursos do Cloud Run e do MongoDB Atlas.

MEAN Stack

A pilha MEAN é uma pilha de tecnologia para criar aplicativos da Web de pilha completa totalmente 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.
  • O Express.js é um framework de aplicativos da Web do Node.js para criar APIs.
  • O 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 e recuperar e armazenar dados.

O que você vai criar

Você vai escrever um aplicativo full stack de função de funcionário-trabalho em MongoDB, Express JS, Angular JS e Node JS. Ele contém:

  • Um aplicativo de servidor em Node.js e Express.js, em contêineres
  • Um aplicativo cliente criado em AngularJS e 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 e gravação com o banco de dados.
  • O aplicativo cliente é a interface do usuário do aplicativo "Função do funcionário".

O que você vai aprender

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

2. Requisitos

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

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

e5cc775a49f2fb0.png

  • Depois de se inscrever, clique no botão "Criar um banco de dados" 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 a configuração "Permitir acesso de qualquer lugar". O MongoDB Atlas vem com um conjunto de recursos de segurança e acesso. Saiba mais sobre eles no artigo da documentação sobre recursos de segurança
  • Use as credenciais de sua escolha para o nome de usuário e a senha do banco de dados. Depois de concluir essas etapas, você vai ver o seguinte:

bffeef16de1d1cd2.png

  • Clique no botão "Escolher um método de conexão" e selecione "Conectar seu aplicativo".

75771e64427acd5e.png

  • Copie a string de conexão que aparece e substitua a senha pela sua. Vamos usar essa string para nos conectar ao banco de dados nas seções a seguir.

4. Configurar um projeto do Cloud Run

  • Primeiro, faça login no console do Cloud, crie um projeto ou reutilize um existente.
  • Lembre-se do ID do projeto que você criou.
  • A imagem abaixo mostra a página de novo projeto, onde você pode ver o ID do projeto enquanto o cria.

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á estará autenticada e o projeto estará configurado com seu ID do 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 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 o Express e o Node.js, a interface da Web com o Angular, e os dados são armazenados na instância do MongoDB Atlas que criamos anteriormente.
  • 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. Implantar a API REST do Express e do Node.js

Arquivo de configuração do Docker

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

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, 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

  • Em seguida, clique no ícone "Implantar no Cloud Run":

cde124ba8ec23b34.png

  • Preencha as configurações de 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 expandir:
  • Porta do contêiner: 5200
  • Variáveis de ambiente. Adicione o seguinte par de chave-valor e confira se você adicionou a string de conexão da sua própria implantação do MongoDB Atlas:
ATLAS_URI:mongodb+srv:/<username>:<password>@sandbox.pv0l7.mongodb.net/meanStackExample?retryWrites=true&w=majority
  • Em "Ambiente de build", selecione "Cloud Build".
  • Por fim, na seção "Configurações de build", selecione:
  • Builder: 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.
  • Depois que a build for concluída, o URL do serviço implantado vai aparecer:

759c69ba52a85b10.png

  • Abra o URL e adicione "/employees" ao final.
  • Você vai ver uma matriz vazia porque, no momento, não há documentos no banco de dados.

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

7. Implantar o aplicativo da Web Angular

Nosso aplicativo Angular está no diretório do cliente. Para implantar, vamos usar o servidor Nginx e o Docker. Só uma ideia: também há uma opção de usar o Firebase Hosting para a implantação do aplicativo Angular, já que é possível veicular o conteúdo diretamente para uma CDN (rede de fornecimento de conteúdo).

Arquivos de configuração

Vamos analisar os 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. Em seguida, copiamos os arquivos criados para o contêiner, configuramos e iniciamos o serviço Nginx.
  • Por fim, precisamos configurar o URL da API REST para que nosso aplicativo cliente possa enviar solicitações a ela. Como estamos usando o URL em apenas um arquivo no projeto, vamos codificá-lo. Outra opção é anexar a variável de ambiente ao objeto de janela e acessar 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'; 
...
  • Tudo pronto 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
  • Em "Ambiente de build", selecione "Cloud Build".
  • Por fim, na seção "Configurações de build", selecione:
  • Builder: Docker
  • Docker: mean-stack-example/client/Dockerfile
  • Clique no botão "Implantar" novamente e confira os registros enquanto o app é enviado para a nuvem. Quando a implantação for concluída, o URL do app cliente vai aparecer.

5da1d7defc1082fc.png

  • Abra o URL e teste o 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 de cima do console.

9. Parabéns

Parabéns! Você criou um aplicativo da Web da pilha MEAN no Cloud Run.