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 stack MEAN completamente serverless. Vedremo come creare un'applicazione MEAN serverless con Cloud Run e MongoDB Atlas, la piattaforma dati per applicazioni multicloud di MongoDB.

Che cos'è Cloud Run?

Cloud Run ti 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 che riconoscono le richieste e richiamarlo tramite richieste HTTP
Addebito solo per le risorse esatte che utilizzi
Supporta qualsiasi linguaggio di programmazione o libreria del sistema operativo a tua scelta o qualsiasi programma binario

Consulta questo link per scoprire altre funzionalità nel contesto completo.

Database serverless con MongoDB Atlas

MongoDB ha lanciato le istanze serverless, un nuovo deployment di database serverless completamente gestito in Atlas per risolvere questo problema. Con le istanze serverless non devi mai pensare all'infrastruttura: ti basta eseguire il deployment del database e verrà scalato automaticamente in base alla domanda, senza richiedere una gestione manuale. E la cosa migliore è che ti verranno addebitate solo le operazioni che esegui. Per rendere la nostra architettura veramente serverless, combineremo le funzionalità di Cloud Run e MongoDB Atlas.

MEAN Stack

Lo stack MEAN è 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 full stack Ruolo dipendente-lavoro in MongoDB, Express JS, Angular JS e Node JS. Contiene:

Un'applicazione server in Node.js e Express.js, containerizzata
Un'applicazione client creata in AngularJS, containerizzata
Entrambe le applicazioni vengono implementate 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/scrittura con il database
L'applicazione client è l'interfaccia utente per l'applicazione Ruolo lavorativo dipendente

Obiettivi didattici

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

2. Requisiti

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

3. Crea l'istanza e il database MongoDB Serverless

Per iniziare, scopri di più su MongoDB Atlas su Google Cloud.

Dopo aver eseguito la registrazione, fai clic sul pulsante "Crea un database" per creare una nuova istanza serverless. Seleziona la seguente configurazione:

Una volta eseguito il provisioning dell'istanza serverless, dovresti vederla in esecuzione.

Fai clic sul pulsante "Connetti" per aggiungere un indirizzo IP di connessione e un utente del database.
Per questo codelab, utilizzeremo l'impostazione "Consenti l'accesso da qualsiasi posizione". MongoDB Atlas include un insieme di funzionalità di sicurezza e accesso. Puoi scoprire di più nell'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 visualizzare quanto segue:

Procedi facendo clic sul pulsante "Scegli un metodo di connessione" e poi selezionando "Connetti la tua applicazione".

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

4. Configura un progetto Cloud Run

Innanzitutto, accedi a Cloud Console, crea un nuovo progetto o riutilizzane uno esistente.
Ricorda l'ID progetto che hai creato.
Di seguito è riportata un'immagine che mostra la nuova pagina del progetto, in cui puoi visualizzare l'ID progetto mentre lo crei.

Poi, abilita l'API Cloud Run da Cloud Shell:
Attiva Cloud Shell dalla console Cloud. Basta fare clic su Attiva Cloud Shell.
Una volta eseguita la connessione a Cloud Shell, dovresti vedere che il tuo account è già autenticato e il progetto è già impostato sul tuo ID progetto. Se per qualche motivo il progetto non è impostato, esegui questo comando:

gcloud config set project PROJECT_ID

Utilizza il comando seguente:

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 dal terminale Cloud Shell:

5. Clona progetto MEAN Stack

Eseguiremo il deployment di un'applicazione web di gestione dei dipendenti. L'API REST è creata con Express e Node.js, l'interfaccia web con Angular e i dati verranno archiviati nell'istanza MongoDB Atlas creata 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

Innanzitutto, eseguiamo 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, copia e compila il progetto. All'avvio del container, il comando riportato di seguito avvia il servizio

node dist/server.js

Per avviare un nuovo deployment di Cloud Run, fai clic sull'icona di Cloud Run nella barra laterale sinistra:

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

Compila la configurazione del servizio come segue:
Nome servizio: node-express-api
Piattaforma di deployment: Cloud Run (completamente gestito)
Regione: seleziona una regione vicina a quella del database per ridurre la latenza.
Autenticazione: consenti chiamate non autenticate
Nella sezione Impostazioni revisione, fai clic su Mostra impostazioni avanzate per espanderle:
Porta del container: 5200
Variabili di ambiente. Aggiungi la seguente coppia chiave-valore e assicurati di aggiungere la stringa di connessione per la tua implementazione MongoDB Atlas:

ATLAS_URI:mongodb+srv:/<username>:<password>@sandbox.pv0l7.mongodb.net/meanStackExample?retryWrites=true&w=majority

Per l'ambiente di build, seleziona Cloud Build.
Infine, nella sezione Build Settings (Impostazioni di build), seleziona:
Generatore: Docker
Docker: mean-stack-example/server/Dockerfile
Fai clic sul pulsante Esegui il deployment e poi su Mostra log dettagliati per seguire il deployment del tuo primo servizio Cloud Run.
Al termine della build, dovresti visualizzare l'URL del servizio di cui è stato eseguito il deployment:

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

Eseguiamo il deployment dell'interfaccia utente per poterne aggiungere alcuni.

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. Un'idea: esiste anche un'opzione per utilizzare Firebase Hosting per il deployment dell'applicazione Angular, in quanto puoi erogare i contenuti direttamente su una rete CDN (Content Delivery Network).

File di configurazione

Diamo un'occhiata ai 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. Poi copiamo i file creati nel container, configuriamo e avviamo il servizio Nginx
Infine, dobbiamo configurare l'URL dell'API REST in modo che la nostra applicazione client possa inviargli richieste. Poiché utilizziamo l'URL in un solo file del progetto, lo codificheremo in modo permanente. 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'; 
...

Siamo pronti 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: consenti chiamate non autenticate
Per l'ambiente di build, seleziona Cloud Build.
Infine, nella sezione Build Settings (Impostazioni di build), seleziona:
Generatore: Docker
Docker: mean-stack-example/client/Dockerfile
Fai di nuovo clic sul pulsante Deploy e guarda i log mentre la tua app viene caricata sul cloud. Al termine del deployment, dovresti visualizzare l'URL dell'app client

Apri l'URL e prova la tua applicazione.

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 le istanze MongoDB

Vai ai cluster Istanza MongoDB
Seleziona il cluster e l'istanza che hai creato.
Fai clic sui tre puntini accanto al nome del cluster e seleziona Termina dall'elenco.

Elimina i deployment di Cloud Run

Vai alla pagina Cloud Run nella console Google Cloud.
Seleziona il servizio Cloud Run che vuoi eliminare.
Fai clic sull'icona di eliminazione nella parte superiore della console.

9. Complimenti

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

Applicazione stack MEAN serverless su MongoDB Atlas e Cloud Run Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.