Application de pile MEAN sans serveur sur MongoDB Atlas et Cloud Run

1. Introduction

Dans cet article,nous allons voir comment Cloud Run et MongoDB s'associent pour offrir une expérience de développement d'applications de pile MEAN entièrement sans serveur. Nous apprendrons à créer une application MEAN sans serveur avec Cloud Run et MongoDB Atlas, la plate-forme de données d'applications multicloud de MongoDB.

Qu'est-ce que Cloud Run ?

Cloud Run vous permet de créer et de déployer des applications conteneurisées évolutives écrites dans n'importe quel langage (y compris Go, Python, Java, Node.js, .NET et Ruby) sur une plate-forme entièrement gérée. Cloud Run se démarque en nous permettant de:

  • Empaqueter le code dans plusieurs conteneurs sans état sensibles aux requêtes et l'appeler via des requêtes HTTP
  • Seules les ressources que vous utilisez sont facturées
  • Compatibilité avec tout langage de programmation, bibliothèque de système d'exploitation de votre choix ou n'importe quel binaire

Consultez ce lien pour découvrir d'autres fonctionnalités en contexte.

Base de données sans serveur avec MongoDB Atlas

Pour résoudre ce problème, MongoDB a lancé des instances sans serveur, un nouveau déploiement de base de données sans serveur et entièrement géré dans Atlas. Avec les instances sans serveur, vous n'avez plus à vous soucier de l'infrastructure. Il vous suffit de déployer votre base de données pour qu'elle s'adapte facilement en fonction de la demande, sans intervention manuelle. De plus, seules les opérations que vous exécutez vous sont facturées. Pour que notre architecture soit véritablement sans serveur, nous allons combiner les fonctionnalités de Cloud Run et de MongoDB Atlas.

Pile MEAN

La pile MEAN est une pile technologique qui permet de créer des applications Web full stack entièrement avec JavaScript et JSON. La pile MEAN est composée de quatre composants principaux : MongoDB, Express, Angular et Node.js.

  • MongoDB est responsable du stockage des données.
  • Express.js est un framework d'applications Web Node.js permettant de créer des API.
  • Angular est une plate-forme JavaScript côté client.
  • Node.js est un environnement d'exécution JavaScript côté serveur. Le serveur utilise le pilote MongoDB Node.js pour se connecter à la base de données, et récupérer et stocker les données.

Ce que vous allez faire

Vous rédigerez une application full stack Employee-Job Role dans MongoDB, Express JS, Angular JS et Node.js. Il comprend :

  • Une application serveur dans Node.js et Express JS, conteneurisée
  • Une application cliente dans AngularJS, conteneurisée
  • Les deux applications sont déployées dans Cloud Run
  • L'application serveur se connecte à l'instance MongoDB sans serveur à l'aide du pilote MongoDB NodeJS
  • L'API du serveur effectue les interactions en lecture/écriture avec la base de données
  • L'application cliente est l'interface utilisateur de l'application Employé-Emploi

Points abordés

  • Créer des instances MongoDB sans serveur
  • Configurer un projet Cloud Run
  • Déployer des applications Web dans Google Cloud Run
  • Créer et déployer une application de pile MEAN

2. Conditions requises

  • Un navigateur tel que Chrome ou Firefox
  • Un projet Google Cloud Platform contenant votre instance Cloud Run et MongoDB Atlas
  • La section suivante présente la liste des étapes à suivre pour créer l'application MEAN Stack.

3. Créer l'instance et la base de données MongoDB sans serveur

e5cc775a49f2fb0.png

  • Une fois inscrit, cliquez sur "Créer une base de données". pour créer une instance sans serveur. Sélectionnez la configuration suivante:

fca10bf6f031af7a.png

  • Une fois votre instance sans serveur provisionnée, vous devriez la voir opérationnelle.

d13c4b8bdd9569fd.png

  • Cliquez sur le bouton « Connecter » bouton permettant d'ajouter une adresse IP de connexion et un utilisateur de base de données
  • Pour cet atelier de programmation, nous allons utiliser l'option "Autoriser l'accès depuis n'importe où" . MongoDB Atlas est fourni avec un ensemble de fonctionnalités de sécurité et d'accès. Pour en savoir plus, consultez l'article de documentation sur les fonctionnalités de sécurité
  • Utilisez les identifiants de votre choix pour le nom d'utilisateur et le mot de passe de la base de données. Une fois ces étapes terminées, le résultat suivant doit s'afficher:

bffeef16de1d1cd2.png

  • Cliquez sur le bouton "Choisir une méthode de connexion" puis en sélectionnant "Connect your application" (Connecter votre application).

75771e64427acd5e.png

  • Copiez la chaîne de connexion qui s'affiche et remplacez le mot de passe par le vôtre. Nous utiliserons cette chaîne pour nous connecter à notre base de données dans les sections suivantes

4. Configurer un projet Cloud Run

  • Tout d'abord, connectez-vous à la console Cloud, créez un projet ou réutilisez un projet existant.
  • Mémorisez l'ID du projet que vous avez créé.
  • L'image ci-dessous montre la page du nouveau projet, où vous pouvez voir l'ID de votre projet à mesure que vous le créez.

f32dbd4eb2b7501e.png

  • Activez ensuite l'API Cloud Run depuis Cloud Shell:
  • Activez Cloud Shell depuis la console Cloud. Cliquez simplement sur "Activer Cloud Shell".
  • Une fois connecté à Cloud Shell, vous êtes en principe authentifié, et le projet est déjà défini avec votre ID de projet. Si, pour une raison quelconque, le projet n'est pas défini, exécutez simplement la commande suivante :
gcloud config set project PROJECT_ID

3da173210a016316.png

  • Exécutez la commande suivante:
gcloud services enable run.googleapis.com
  • Nous utiliserons Cloud Shell et l'éditeur Cloud Shell pour les références de code. Pour accéder à l'éditeur Cloud Shell, cliquez sur "Ouvrir l'éditeur" dans le terminal Cloud Shell:

83793a577f08e4d4.png

5. Cloner le projet de pile MEAN

  • Nous allons déployer une application Web de gestion des employés. L'API REST est conçue avec Express et Node.js. l'interface Web, avec Angular, Les données seront stockées dans l'instance MongoDB Atlas créée précédemment
  • Clonez le dépôt du projet en exécutant la commande suivante dans le terminal Cloud Shell:
git clone https://github.com/mongodb-developer/mean-stack-example.git

6. Déployer l'API REST Express et Node.js

Fichier de configuration Docker

  • Nous allons commencer par déployer un service Cloud Run pour l'API REST Express. Le fichier le plus important pour notre déploiement est le fichier de configuration Docker. Examinons-la de plus près:

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 configuration configure Node.js, puis copie et crée le projet. Lorsque le conteneur démarre, la commande ci-dessous lance le service
node dist/server.js
  • Pour lancer un nouveau déploiement Cloud Run, cliquez sur l'icône Cloud Run dans la barre latérale gauche:

48c73bda3aa4ea02.png

  • Cliquez ensuite sur l'icône "Deploy to Cloud Run" (Déployer sur Cloud Run) :

cde124ba8ec23b34.png

  • Renseignez la configuration de service comme suit:
  • Nom du service: node-express-api
  • Plate-forme de déploiement: Cloud Run (entièrement géré)
  • Région: sélectionnez une région proche de la région de votre base de données pour réduire la latence
  • Authentification: autoriser les appels non authentifiés
  • Sous "Paramètres de révision", cliquez sur "Afficher les paramètres avancés" pour les développer:
  • Port du conteneur: 5 200
  • Variables d'environnement Ajoutez la paire clé-valeur suivante et assurez-vous d'ajouter la chaîne de connexion pour votre propre déploiement MongoDB Atlas:
ATLAS_URI:mongodb+srv:/<username>:<password>@sandbox.pv0l7.mongodb.net/meanStackExample?retryWrites=true&w=majority
  • Dans "Environnement de compilation", sélectionnez "Cloud Build"
  • Enfin, dans la section "Build Settings", sélectionnez:
  • Compilateur: Docker
  • Docker: mean-stack-example/server/Dockerfile
  • Cliquez sur le bouton "Déployer", puis sur "Afficher les journaux détaillés" pour suivre le déploiement de votre premier service Cloud Run.
  • Une fois la compilation terminée, vous devriez voir l'URL du service déployé:

759c69ba52a85b10.png

  • Ouvrez l'URL et ajoutez "/employees" jusqu'à la fin
  • Vous devriez voir un tableau vide, car la base de données ne contient actuellement aucun document.

Déployons l'interface utilisateur pour pouvoir en ajouter.

7. Déployer l'application Web Angular

Notre application Angular se trouve dans le répertoire client. Pour le déployer, nous allons utiliser le serveur Nginx et Docker. Sachez qu'il existe également une option vous permettant d'utiliser Firebase Hosting pour le déploiement de votre application Angular, car vous pouvez diffuser votre contenu directement sur un CDN (réseau de diffusion de contenu).

Fichiers de configuration

Examinons les fichiers de configuration:

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;
       }
   }
}
  • Dans la configuration Nginx, nous spécifions le port par défaut (8080) et le fichier de départ (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;"]
  • Dans la configuration Docker, nous installons les dépendances Node.js et nous compilons le projet. Ensuite, nous copions les fichiers compilés dans le conteneur, puis nous configurons et démarrons le service Nginx.
  • Enfin, nous devons configurer l'URL de l'API REST afin que notre application cliente puisse lui envoyer des requêtes. Étant donné que nous n'utilisons l'URL que dans un seul fichier du projet, nous allons la coder en dur. Vous pouvez également associer la variable d'environnement à l'objet window et y accéder à partir 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'; 
...
  • Nous sommes prêts à effectuer le déploiement sur Cloud Run. Démarrez un nouveau déploiement avec les paramètres de configuration suivants:
      - Service Settings: Create a service
    
  • Nom du service: angular-web-app
  • Plate-forme de déploiement: Cloud Run (entièrement géré)
  • Authentification: autoriser les appels non authentifiés
  • Dans "Environnement de compilation", sélectionnez "Cloud Build"
  • Enfin, dans la section "Build Settings", sélectionnez:
  • Compilateur: Docker
  • Docker: mean-stack-example/client/Dockerfile
  • Cliquez à nouveau sur le bouton "Deploy" (Déployer) et surveillez les journaux pendant l'expédition de votre application vers le cloud. Une fois le déploiement terminé, vous devriez voir l'URL de l'application cliente.

5da1d7defc1082fc.png

  • Ouvrez l'URL et jouez avec votre application !

db154f1cd57e38f0.png

8. Effectuer un nettoyage

Pour éviter que les ressources utilisées dans cet atelier soient facturées sur votre compte Google Cloud, procédez comme suit :

Arrêter des instances MongoDB

  1. Accéder aux clusters d'instance MongoDB
  2. Sélectionnez le cluster (l'instance que vous avez créé)
  3. Cliquez sur les points de suspension à côté du nom du cluster et sélectionnez "Arrêter" dans la liste.

Supprimer les déploiements Cloud Run

  1. Accédez à la page Cloud Run dans la console Google Cloud.
  2. Sélectionnez le service Cloud Run que vous souhaitez supprimer
  3. Cliquez sur l'icône de suppression en haut de la console.

9. Félicitations

Félicitations, vous avez créé l'application Web MEAN Stack sur Cloud Run !