Applicazione stack MEAN serverless su MongoDB Atlas e Cloud Run

1. Introduzione

In questo post vedremo come Cloud Run e MongoDB si uniscono per consentire un'esperienza di sviluppo di applicazioni MEAN stack completamente serverless. Impareremo come creare un'applicazione MEAN serverless con Cloud Run e MongoDB Atlas, la piattaforma dati per applicazioni multi-cloud di MongoDB.

Che cos'è Cloud Run?

Cloud Run consente di creare ed eseguire il deployment di app containerizzate scalabili scritte in qualsiasi linguaggio (tra cui Go, Python, Java, Node.js, .NET e Ruby) su una piattaforma completamente gestita. Cloud Run si distingue dalla concorrenza perché ci consente di:

  • Pacchettizzare il codice in più container stateless sensibili alle richieste e richiamarlo tramite richieste HTTP
  • Ti verranno addebitate solo le risorse esatte che utilizzi
  • Supporta qualsiasi linguaggio di programmazione o libreria di sistema operativo di tua scelta, oppure qualsiasi programma binario

Visita questo link per vedere altre funzionalità nel contesto completo.

Database serverless con MongoDB Atlas

MongoDB ha lanciato istanze serverless, un nuovo deployment di database serverless completamente gestito in Atlas, per risolvere questo problema. Con le istanze serverless non devi mai preoccuparti dell'infrastruttura: esegui il deployment del tuo database per fare lo scale up e lo scale down senza problemi in base alla domanda, senza bisogno di alcuna gestione pratica. Inoltre, ti verranno addebitate solo le operazioni che esegui. Per rendere la nostra architettura realmente serverless, combineremo le funzionalità di Cloud Run e MongoDB Atlas.

Stack MEAN

MEAN stack è uno stack tecnologico per la creazione di applicazioni web full stack interamente con JavaScript e JSON. Lo stack MEAN è composto da quattro componenti principali: MongoDB, Express, Angular e Node.js.

  • MongoDB è responsabile dell'archiviazione dei dati.
  • Express.js è un framework per applicazioni web Node.js per la creazione di API.
  • Angular è una piattaforma JavaScript lato client.
  • Node.js è un ambiente di runtime JavaScript lato server. Il server utilizza il driver MongoDB Node.js per connettersi al database e recuperare e archiviare i dati.

Cosa creerai

Scriverai un'applicazione di ruolo dipendente-lavoro full stack in MongoDB, Express JS, Angular JS e Node JS. Contiene:

  • Un'applicazione server in Node JS ed Express JS, containerizzata
  • Una build di applicazione client in AngularJS, containerizzata
  • Il deployment di entrambe le applicazioni viene eseguito in Cloud Run
  • L'app server si connette all'istanza MongoDB serverless utilizzando il driver MongoDB NodeJS
  • L'API server esegue le interazioni di lettura e scrittura con il database
  • L'applicazione client è l'interfaccia utente per l'applicazione di ruolo dipendente-lavoro

Obiettivi didattici

  • Creare istanze MongoDB serverless
  • Come configurare un progetto Cloud Run
  • Eseguire il deployment di applicazioni web in Google Cloud Run
  • Creare ed eseguire il deployment di un'applicazione MEAN Stack

2. Requisiti

  • Un browser, ad esempio Chrome o Firefox
  • Un progetto Google Cloud Platform che contiene la tua istanza Cloud Run e MongoDB Atlas
  • La prossima sezione contiene l'elenco dei passaggi per creare l'applicazione MEAN Stack

3. Crea l'istanza e il database MongoDB Serverless

e5cc775a49f2fb0.png

  • Una volta iscritto, fai clic sul pulsante per creare una nuova istanza serverless. Seleziona la configurazione seguente:

fca10bf6f031af7a.png

  • Una volta eseguito il provisioning dell'istanza serverless, dovresti vederla operativa

d13c4b8bdd9569fd.png

  • Fai clic sul pulsante "Connetti" pulsante per aggiungere un indirizzo IP di connessione e un utente di database
  • Per questo codelab, utilizzeremo il modulo "Consenti l'accesso ovunque" dell'ambientazione. MongoDB Atlas viene fornito con una serie di funzionalità di sicurezza e accesso. Per scoprire di più su queste funzionalità, consulta l'articolo della documentazione sulle funzionalità di sicurezza
  • Utilizza le credenziali che preferisci per il nome utente e la password del database. Una volta completati questi passaggi, dovresti vedere quanto segue:

bffeef16de1d1cd2.png

  • Procedi facendo clic su "Scegli un metodo di connessione". quindi seleziona "Connetti la tua applicazione"

75771e64427acd5e.png

  • Copia la stringa di connessione visualizzata e sostituisci la password con la tua. Utilizzeremo questa stringa per collegarci al nostro database nelle sezioni seguenti

4. configura un progetto Cloud Run

  • Innanzitutto, accedi alla console Cloud, crea un nuovo progetto o riutilizzane uno esistente
  • Ricorda l'ID del progetto che hai creato
  • Di seguito è riportata un'immagine che mostra la pagina del nuovo progetto, dove puoi visualizzare l'ID del progetto mentre lo crei

f32dbd4eb2b7501e.png

  • Quindi, abilita l'API Cloud Run da Cloud Shell:
  • Attiva Cloud Shell dalla console Cloud. Fai clic su Attiva Cloud Shell
  • Una volta stabilita la connessione a Cloud Shell, dovresti vedere che hai già eseguito l'autenticazione e che il progetto è già impostato sul tuo ID PROGETTO. Se, per qualche motivo, il progetto non è impostato, invia semplicemente il seguente comando:
gcloud config set project PROJECT_ID

3da173210a016316.png

  • Utilizza il seguente comando:
gcloud services enable run.googleapis.com
  • Utilizzeremo Cloud Shell e l'editor di Cloud Shell per i riferimenti al codice. Per accedere all'editor di Cloud Shell, fai clic su Apri editor nel terminale Cloud Shell:

83793a577f08e4d4.png

5. Clona progetto stack MEAN

  • Eseguiremo il deployment di un'applicazione web per la gestione dei dipendenti. L'API REST è creata con Express e Node.js; l'interfaccia web, con Angular; e verranno archiviati nell'istanza MongoDB Atlas che abbiamo creato in precedenza.
  • Clona il repository del progetto eseguendo questo comando nel terminale Cloud Shell:
git clone https://github.com/mongodb-developer/mean-stack-example.git

6. Esegui il deployment dell'API REST Express e Node.js

File di configurazione Docker

  • Per prima cosa, eseguiremo il deployment di un servizio Cloud Run per l'API REST Express. Il file più importante per il nostro deployment è il file di configurazione Docker. Diamo un'occhiata:

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 configurazione imposta Node.js, quindi copia e crea il progetto. All'avvio del container, il comando seguente avvia il servizio
node dist/server.js
  • Per avviare un nuovo deployment Cloud Run, fai clic sull'icona Cloud Run nella barra laterale sinistra:

48c73bda3aa4ea02.png

  • Quindi, fai clic sull'icona Esegui il deployment in Cloud Run:

cde124ba8ec23b34.png

  • Compila la configurazione del servizio come segue:
  • Nome servizio: node-express-api
  • Piattaforma di deployment: Cloud Run (completamente gestito)
  • Regione: seleziona una regione vicina alla regione del database per ridurre la latenza
  • Autenticazione: consenti chiamate non autenticate
  • In Impostazioni revisione, fai clic su Mostra impostazioni avanzate per espanderle:
  • Porta container: 5200
  • Variabili di ambiente. Aggiungi la seguente coppia chiave-valore e assicurati di aggiungere la stringa di connessione per il tuo deployment di MongoDB Atlas:
ATLAS_URI:mongodb+srv:/<username>:<password>@sandbox.pv0l7.mongodb.net/meanStackExample?retryWrites=true&w=majority
  • Per l'ambiente Build, seleziona Cloud Build
  • Infine, nella sezione Impostazioni build, seleziona:
  • Builder: Docker
  • Docker: mean-stack-example/server/Dockerfile
  • Fai clic sul pulsante Esegui il deployment e seleziona Mostra log dettagliati per seguire il deployment del tuo primo servizio Cloud Run.
  • Al termine della build, dovresti vedere l'URL del servizio di cui è stato eseguito il deployment:

759c69ba52a85b10.png

  • Apri l'URL e aggiungi "/employees" alla fine
  • Dovresti vedere un array vuoto perché al momento non esistono documenti nel database.

Eseguiamo il deployment dell'interfaccia utente in modo da poterne aggiungere alcune.

7. Esegui il deployment dell'applicazione web Angular

La nostra applicazione Angular si trova nella directory client. Per il deployment, utilizzeremo il server Nginx e Docker. Tieni presente che esiste anche un'opzione per utilizzare Firebase Hosting per il deployment dell'applicazione Angolare, in quanto puoi pubblicare i tuoi contenuti direttamente su una CDN (Content Delivery Network).

File di configurazione

Vediamo i file di configurazione:

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;
       }
   }
}
  • Nella configurazione di Nginx, specifichiamo la porta predefinita (8080) e il file iniziale (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;"]
  • Nella configurazione Docker, installiamo le dipendenze Node.js e creiamo il progetto. Quindi, copio i file creati nel container, configuriamo e avviiamo il servizio Nginx
  • Infine, dobbiamo configurare l'URL dell'API REST in modo che la nostra applicazione client possa inviare richieste all'API. Poiché utilizziamo l'URL in un unico file del progetto, eseguiremo l'hardcoded dell'URL. In alternativa, puoi collegare la variabile di ambiente all'oggetto finestra e accedervi da 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'; 
...
  • È tutto pronto per il deployment in Cloud Run. Avvia un nuovo deployment con le seguenti impostazioni di configurazione:
      - Service Settings: Create a service
    
  • Nome servizio: angular-web-app
  • Piattaforma di deployment: Cloud Run (completamente gestito)
  • Autenticazione: consentire chiamate non autenticate
  • Per l'ambiente Build, seleziona Cloud Build
  • Infine, nella sezione Impostazioni build, seleziona:
  • Builder: Docker
  • Docker: mean-stack-example/client/Dockerfile
  • Fai di nuovo clic sul pulsante Esegui il deployment e osserva i log mentre l'app viene spedita nel cloud. Al termine del deployment, dovresti vedere l'URL dell'app client

5da1d7defc1082fc.png

  • Apri l'URL e gioca con la tua applicazione.

db154f1cd57e38f0.png

8. Esegui la pulizia

Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alle risorse utilizzate in questo post, segui questi passaggi.

Termina istanze MongoDB

  1. Vai ai cluster dell'istanza MongoDB
  2. Seleziona il cluster, l'istanza che hai creato
  3. Fai clic sui puntini di sospensione accanto al nome del cluster e seleziona Termina dall'elenco.

Elimina i deployment Cloud Run

  1. Vai alla pagina Cloud Run nella console Google Cloud.
  2. Seleziona il servizio Cloud Run che vuoi eliminare
  3. Fai clic sull'icona Elimina nella parte superiore della console

9. Complimenti

Congratulazioni, hai creato l'applicazione web MEAN Stack su Cloud Run.