Aplicación de pila MEAN sin servidores en MongoDB Atlas y Cloud Run

1. Introducción

En esta publicación,veremos cómo Cloud Run y MongoDB se unen para permitir una experiencia de desarrollo de aplicaciones de pila MEAN completamente sin servidores. Aprenderemos a compilar una aplicación MEAN sin servidores con Cloud Run y MongoDB Atlas, la plataforma de datos de aplicaciones de múltiples nubes de MongoDB.

¿Qué es Cloud Run?

Cloud Run te permite implementar y compilar apps escalables alojadas en contenedores escritas en cualquier lenguaje (como Go, Python, Java, Node.js, .NET y Ruby) en una plataforma completamente administrada. Cloud Run se destaca de la liga porque nos permite hacer lo siguiente:

  • Empaqueta código en varios contenedores sin estado que reconocen solicitudes y los invocan a través de solicitudes HTTP
  • Solo se te cobrará por los recursos exactos que uses
  • Admite cualquier lenguaje de programación o biblioteca de sistema operativo que elijas, o cualquier objeto binario.

Consulta este vínculo para conocer más funciones en contexto completo.

Base de datos sin servidores con MongoDB Atlas

Para solucionar este problema, MongoDB lanzó instancias sin servidores, una nueva implementación de base de datos sin servidores y completamente administrada en Atlas. Con las instancias sin servidores, nunca tendrás que preocuparte por la infraestructura. Solo tienes que implementar tu base de datos y se ampliará y reducirá la escala verticalmente sin interrupciones según la demanda, sin necesidad de una administración práctica. Y lo mejor de todo es que solo se te cobrará por las operaciones que ejecutes. Para que nuestra arquitectura sea realmente sin servidores, combinaremos las capacidades de Cloud Run y MongoDB Atlas.

Pila media

La pila MEAN es una pila tecnológica para compilar aplicaciones web de pila completa completamente con JavaScript y JSON. La pila MEAN se compone de cuatro componentes principales: MongoDB, Express, Angular y Node.js.

  • MongoDB es responsable del almacenamiento de datos.
  • Express.js es un marco de trabajo de aplicaciones web de Node.js para compilar APIs.
  • Angular es una plataforma de JavaScript del cliente.
  • Node.js es un entorno de ejecución de JavaScript del servidor. El servidor usa el controlador MongoDB para Node.js para conectarse a la base de datos y recuperar y almacenar datos.

Qué compilarás

Escribirás una aplicación de pila completa de rol Empleado-trabajo en MongoDB, Express JS, Angular JS y Node JS. Contiene los siguientes elementos:

  • Una aplicación de servidor en Node JS y Express JS, alojada en contenedores
  • Una aplicación cliente compilada en AngularJS, alojada en contenedores
  • Ambas aplicaciones se implementan en Cloud Run
  • La app del servidor se conecta a la instancia de MongoDB sin servidores con el controlador MongoDB NodeJS
  • La API del servidor realiza las interacciones de lectura y escritura con la base de datos
  • La aplicación cliente es la interfaz de usuario de la aplicación de Empleado-Trabajo

Qué aprenderás

  • Cómo crear instancias de MongoDB sin servidores
  • Cómo configurar un proyecto de Cloud Run
  • Cómo implementar aplicaciones web en Google Cloud Run
  • Cómo crear e implementar una aplicación de pila MEAN

2. Requisitos

  • Un navegador, como Chrome o Firefox.
  • Un proyecto de Google Cloud Platform que contenga tu instancia de Cloud Run y MongoDB Atlas
  • En la siguiente sección, se muestra la lista de pasos para crear la aplicación MEAN Stack

3. Crea la instancia y la base de datos sin servidores de MongoDB

e5cc775a49f2fb0.png

  • Después de registrarte, haz clic en el botón “Build a Database” para crear una nueva instancia sin servidores. Selecciona la siguiente configuración:

fca10bf6f031af7a.png

  • Una vez aprovisionada tu instancia sin servidores, deberías verla en funcionamiento

d13c4b8bdd9569fd.png

  • Haz clic en “Conectar” botón para agregar una dirección IP de conexión y un usuario de base de datos
  • En este codelab, usaremos la opción "Permitir acceso desde cualquier lugar" del lugar. MongoDB Atlas incluye un conjunto de funciones de seguridad y acceso. Puedes obtener más información sobre ellas en el artículo de documentación sobre las funciones de seguridad
  • Usa las credenciales que desees para el nombre de usuario y la contraseña de la base de datos. Una vez que completes estos pasos, deberías ver lo siguiente:

bffeef16de1d1cd2.png

  • Para continuar, haz clic en “Elige un método de conexión” y, luego, selecciona "Conectar tu aplicación"

8271e74313e856465.png

  • Copia la cadena de conexión que ves y reemplaza la contraseña por una propia. Usaremos esa cadena para conectarnos a nuestra base de datos en las siguientes secciones

4. Configura un proyecto de Cloud Run

  • Primero, accede a la consola de Cloud, crea un proyecto nuevo o reutiliza uno existente.
  • Recuerda el ID del proyecto que creaste.
  • A continuación, se incluye una imagen que muestra la página del nuevo proyecto, donde puedes ver el ID del proyecto a medida que lo creas.

f32dbd4eb2b7501e.png

  • Luego, habilita la API de Cloud Run desde Cloud Shell:
  • Activa Cloud Shell desde la consola de Cloud. Simplemente haz clic en Activar Cloud Shell
  • Una vez conectado a Cloud Shell, deberías ver que ya estás autenticado y que el proyecto ya está configurado con tu ID DE PROYECTO. Si, por algún motivo, el proyecto no está configurado, solo emite el siguiente comando:
gcloud config set project PROJECT_ID

3da173210a016316.png

  • Usa el siguiente comando:
gcloud services enable run.googleapis.com
  • Utilizaremos Cloud Shell y el Editor de Cloud Shell para las referencias de código. Para acceder al editor de Cloud Shell, haz clic en Abrir editor en la terminal de Cloud Shell:

83793a577f08e4d4.png

5. Clonar proyecto de pila de MEAN

  • Implementaremos una aplicación web de administración de empleados. La API de REST se compila con Express y Node.js. la interfaz web con Angular; y se almacenarán en la instancia de MongoDB Atlas que creamos anteriormente.
  • Para clonar el repositorio del proyecto, ejecuta el siguiente comando en la terminal de Cloud Shell:
git clone https://github.com/mongodb-developer/mean-stack-example.git

6. Implementa la API de REST para Express y Node.js

Archivo de configuración de Docker

  • Primero, implementaremos un servicio de Cloud Run para la API de REST de Express. El archivo más importante para nuestra implementación es el archivo de configuración de Docker. Veámoslo.

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"]
  • La configuración configura Node.js, y copia y compila el proyecto. Cuando se inicia el contenedor, el siguiente comando inicia el servicio
node dist/server.js
  • Para iniciar una nueva implementación de Cloud Run, haz clic en el ícono de Cloud Run en la barra lateral izquierda:

48c73bda3aa4ea02.png

  • Luego, haz clic en el ícono Deploy to Cloud Run:

cde124ba8ec23b34.png

  • Completa la configuración del servicio de la siguiente manera:
  • Nombre del servicio: node-Express-api
  • Plataforma de implementación: Cloud Run (completamente administrado)
  • Región: Selecciona una región cercana a la de la base de datos para reducir la latencia
  • Autenticación: Permitir invocaciones no autenticadas
  • En Configuración de revisión, haz clic en Mostrar configuración avanzada para expandirla:
  • Puerto del contenedor: 5200
  • Variables de entorno. Agrega el siguiente par clave-valor y asegúrate de agregar la cadena de conexión para tu propia implementación de MongoDB Atlas:
ATLAS_URI:mongodb+srv:/<username>:<password>@sandbox.pv0l7.mongodb.net/meanStackExample?retryWrites=true&w=majority
  • En Entorno de compilación, selecciona Cloud Build.
  • Por último, en la sección Build Settings, selecciona:
  • Compilador: Docker
  • Docker: mean-stack-example/server/Dockerfile
  • Haz clic en el botón Implementar y, luego, en Mostrar registros detallados para seguir la implementación de tu primer servicio de Cloud Run.
  • Una vez completada la compilación, deberías ver la URL del servicio implementado:

82c7c69802a85b10.png

  • Abre la URL y agrega "/employees". hasta el final
  • Deberías ver un array vacío porque, por el momento, no hay documentos en la base de datos.

Implementemos la interfaz de usuario para poder agregar algo.

7. Implementa la aplicación web de Angular

Nuestra aplicación de Angular está en el directorio del cliente. Para implementarlo, usaremos el servidor Nginx y Docker. Recuerda que también tienes la opción de usar Firebase Hosting en la implementación de tu aplicación de Angular, ya que puedes entregar tu contenido directamente en una CDN (red de distribución de contenidos).

Archivos de configuración

Analicemos los archivos de configuración:

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;
       }
   }
}
  • En la configuración de Nginx, especificamos el puerto predeterminado (8080) y el archivo 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;"]
  • En la configuración de Docker, instalamos las dependencias de Node.js y compilamos el proyecto. Luego, copiamos los archivos compilados en el contenedor, configuramos e iniciamos el servicio Nginx.
  • Por último, debemos configurar la URL de la API de REST para que nuestra aplicación cliente pueda enviarle solicitudes. Como solo usamos la URL en un único archivo del proyecto, la codificaremos. Como alternativa, puedes adjuntar la variable de entorno al objeto window y acceder a él desde allí.

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'; 
...
  • Ya está todo listo para que lo implementes en Cloud Run. Inicia una nueva implementación con los siguientes parámetros de configuración:
      - Service Settings: Create a service
    
  • Nombre del servicio: angular-web-app
  • Plataforma de implementación: Cloud Run (completamente administrado)
  • Autenticación: Permitir invocaciones no autenticadas
  • En Entorno de compilación, selecciona Cloud Build.
  • Por último, en la sección Build Settings, selecciona:
  • Compilador: Docker
  • Docker: mean-stack-example/client/Dockerfile
  • Vuelve a hacer clic en el botón Implementar y observa los registros mientras tu app se envía a la nube. Cuando se complete la implementación, deberías ver la URL de la app cliente.

5da1d7defc1082fc.png

  • Abre la URL y juega con tu aplicación.

db154f1cd57e38f0.png

8. Limpia

Sigue estos pasos para evitar que se apliquen cargos a tu cuenta de Google Cloud por los recursos que usaste en esta publicación.

Finaliza instancias de MongoDB

  1. Ve a los clústeres de Instancia de MongoDB.
  2. Selecciona el clúster, la instancia que creaste
  3. Haz clic en los puntos suspensivos junto al nombre del clúster y selecciona Finalizar en la lista

Borra las implementaciones de Cloud Run

  1. Ve a la página de Cloud Run en la consola de Google Cloud.
  2. Selecciona el servicio de Cloud Run que quieres borrar
  3. Haz clic en el ícono de borrar en la parte superior de la consola.

9. Felicitaciones

Felicitaciones, creaste correctamente la aplicación web MEAN Stack en Cloud Run.