Distribuire un'app Web Node.js + MongoDB in Azure

Il Servizio app di Azure offre un servizio di hosting Web con scalabilità elevata e applicazione automatica di patch basato sul sistema operativo Linux. Questa esercitazione illustra come creare un'app Node.js sicura in app Azure Servizio connesso a un database Azure Cosmos DB per MongoDB. Al termine, si avrà un'app Express.js in esecuzione nel servizio app Azure in Linux.

Diagramma che mostra come verrà distribuita l'app Express.js nel servizio app Azure e i dati mongoDB verranno ospitati all'interno di Azure Cosmos DB.

Questo articolo presuppone che si abbia già familiarità con lo sviluppo di Node.js e che Node e MongoDB siano installati in locale. È anche necessario un account Azure con una sottoscrizione attiva. Se non si ha un account Azure, è possibile crearne uno gratuitamente.

Applicazione di esempio

Per seguire questa esercitazione, clonare o scaricare l'applicazione di esempio dal repository https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.

git clone https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.git

Se si vuole eseguire l'applicazione in locale, eseguire le operazioni seguenti:

  • Installare le dipendenze del pacchetto eseguendo npm install.
  • Copiare il .env.sample file .env in e popolare il valore DATABASE_URL con l'URL mongoDB, ad esempio mongodb://localhost:27017/.
  • Avviare l'applicazione usando npm start.
  • Per visualizzare l'app, passare a http://localhost:3000.

1. Creare servizio app e Azure Cosmos DB

In questo passaggio si creano le risorse di Azure. I passaggi usati in questa esercitazione creano un set di risorse sicure per impostazione predefinita che includono servizio app e Azure Cosmos DB per MongoDB. Per il processo di creazione, specificare:

  • Nome dell'app Web. È il nome usato come parte del nome DNS per l'app Web sotto forma di https://<app-name>.azurewebsites.net.
  • Area in cui eseguire l'app fisicamente nel mondo.
  • Stack di runtime per l'app. È la posizione in cui si seleziona la versione di Node da usare per l'app.
  • Piano di hosting per l'app. Si tratta del piano tariffario che include il set di funzionalità e la capacità di ridimensionamento per l'app.
  • Gruppo di risorse per l'app. Un gruppo di risorse consente di raggruppare (in un contenitore logico) tutte le risorse di Azure necessarie per l'applicazione.

Per creare risorse del Servizio app di Azure, accedere al portale di Azure e seguire questa procedura.

Passaggio 1: nel portale di Azure:

  1. Immettere "database dell'app Web" nella barra di ricerca nella parte superiore del portale di Azure.
  2. Selezionare l'elemento con etichetta App Web e database sotto l'intestazione Marketplace. È anche possibile passare direttamente alla creazione guidata.

Screenshot che mostra come usare la casella di ricerca nella barra degli strumenti superiore per trovare la creazione guidata di App Web e database.

Passaggio 2: nella pagina Crea app Web e database compilare il modulo come indicato di seguito.

  1. Gruppo di risorse → Selezionare Crea nuovo e usare un nome msdocs-expressjs-mongodb-tutorial.
  2. Area → Qualunque area di Azure nelle vicinanze.
  3. Nomemsdocs-expressjs-mongodb-XYZ dove XYZ è costituito da tre caratteri casuali. Il nome deve essere univoco in Azure
  4. Stack di runtime → Nodo 16 LTS.
  5. Piano di hosting: Basic. Quando si è pronti, è possibile passare a un piano tariffario di produzione in un secondo momento.
  6. Azure Cosmos DB per MongoDB è selezionato per impostazione predefinita come motore di database. Azure Cosmos DB è un database nativo del cloud che offre un'API compatibile con MongoDB al 100%. Prendere nota del nome del database generato automaticamente (app-name-database>).< in quanto sarà necessario più avanti.
  7. Selezionare Rivedi e crea.
  8. Al termine della convalida selezionare Crea.

Screenshot che mostra come configurare una nuova app e un nuovo database nella procedura guidata App Web e database.

Passaggio 3: il completamento della distribuzione richiede alcuni minuti. Al termine della distribuzione, selezionare il pulsante Vai alla risorsa. Si accede direttamente all'app del servizio app, ma vengono create le risorse seguenti:

  • Gruppo di risorse: contenitore per tutte le risorse create.
  • Piano di servizio app: definisce le risorse di calcolo per il Servizio app. Viene creato un piano Linux nel livello Basic.
  • Servizio app: rappresenta l'app ed è in esecuzione nel piano di Servizio app.
  • Rete virtuale: è integrata con l'app del Servizio app e isola il traffico di rete back-end.
  • Endpoint privato → endpoint di Access per la risorsa di database nella rete virtuale.
  • Interfaccia di rete → Rappresenta un indirizzo IP privato per l'endpoint privato.
  • Azure Cosmos DB per MongoDB → Accessibile solo da dietro l'endpoint privato. Vengono automaticamente creati un database e un utente nel server.
  • DNS privato zona → Abilita la risoluzione DNS del server Azure Cosmos DB nella rete virtuale.

Screenshot che mostra il processo di distribuzione completato.

2. Configurare la connettività del database

La creazione guidata ha generato automaticamente l'URI di MongoDB, ma l'app necessita di una DATABASE_URL variabile e di una DATABASE_NAME variabile. In questo passaggio si creano le impostazioni dell'app con il formato necessario per l'app.

Passaggio 1: nella pagina servizio app selezionare Configurazione nel menu a sinistra.

Screenshot che mostra come aprire la pagina di configurazione nel servizio app.

Passaggio 2: Nella scheda Impostazioni applicazione della pagina Configurazione creare un'impostazione DATABASE_NAME :

  1. Selezionare Nuova impostazione applicazione.
  2. Nel campo Nome immettere DATABASE_NAME.
  3. Nel campo Valore immettere il nome del database generato automaticamente dalla creazione guidata, simile a msdocs-expressjs-mongodb-XYZ-database.
  4. Seleziona OK.

Screenshot che mostra come visualizzare la stringa di connessione generata automaticamente.

Passaggio 3:

  1. Scorrere fino alla fine della pagina e selezionare il stringa di connessione MONGODB_URI. È stato generato dalla creazione guidata.
  2. Nel campo Valore selezionare il pulsante Copia e incollare il valore in un file di testo per il passaggio successivo. È nel formato URI stringa di connessione MongoDB.
  3. Selezionare Annulla.

Screenshot che mostra come creare un'impostazione dell'app.

Passaggio 4:

  1. Usando gli stessi passaggi del passaggio 2, creare un'impostazione dell'app denominata DATABASE_URL e impostare il valore su quello copiato dal MONGODB_URI stringa di connessione (ad esempio mongodb://...).
  2. Nella barra dei menu in alto selezionare Salva.
  3. Quando richiesto, selezionare Continua.

Screenshot che mostra come salvare le impostazioni nella pagina di configurazione.

3. Distribuire il codice di esempio

In questo passaggio si configurerà la distribuzione di GitHub usando GitHub Actions. È solo uno dei molti modi per eseguire la distribuzione nel servizio app, ma anche un ottimo modo per avere l'integrazione continua nel processo di distribuzione. Per impostazione predefinita, ogni git push al repository GitHub avvia l'azione di compilazione e distribuzione.

Passaggio 1: in una nuova finestra del browser:

  1. Accedi all'account GitHub.
  2. Accedere a https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.
  3. Seleziona Fork.
  4. Selezionare Crea fork.

Screenshot che mostra come creare un fork del repository GitHub di esempio.

Passaggio 2: nella pagina GitHub aprire Visual Studio Code nel browser premendo il tasto ..

Screenshot che mostra come aprire l'esperienza del browser di Visual Studio Code in GitHub.

Passaggio 3: In Visual Studio Code nel browser aprire config/connection.js in Explorer. getConnectionInfo Nella funzione vedere che le impostazioni dell'app create in precedenza per la connessione MongoDB vengono usate (DATABASE_URL e DATABASE_NAME).

Screenshot che mostra Visual Studio Code nel browser e un file aperto.

Passaggio 4: Tornare alla pagina servizio app, nel menu a sinistra selezionare Centro distribuzione.

Screenshot che mostra come aprire il Centro distribuzione nel servizio app.

Passaggio 5: nella pagina Centro distribuzione:

  1. In Origine, selezionare GitHub. Per impostazione predefinita, GitHub Actions è selezionato come provider di compilazione.
  2. Accedere all'account GitHub e seguire la richiesta di autorizzare Azure.
  3. In Organizzazione, selezionare l'account.
  4. In Repository selezionare msdocs-nodejs-mongodb-azure-sample-app.
  5. Per Ramo selezionare principale.
  6. Nel menu in alto, selezionare Salva. Il servizio app esegue il commit di un file del flusso di lavoro nel repository GitHub scelto, nella directory .github/workflows.

Screenshot che mostra come configurare CI/CD con GitHub Actions.

Passaggio 6: nella pagina Centro distribuzione:

  1. Selezionare Log. È già stata avviata l’esecuzione di una distribuzione.
  2. Nell’elemento di log per l'esecuzione della distribuzione selezionare Compila/Distribuisci log.

Screenshot che mostra come aprire i log di distribuzione nel Centro distribuzione.

Passaggio 7: Si viene portati nel repository GitHub e si noterà che l'azione GitHub è in esecuzione. Il file del flusso di lavoro definisce due fasi separate, compilare e distribuire. Attendere che l'esecuzione di GitHub visualizzi lo stato Operazione completata. Sono necessari circa 15 minuti.

Screenshot che mostra un'esecuzione di GitHub in corso.

4. Passare all'app

Passaggio 1: nella pagina Servizio app:

  1. Nel menu a sinistra selezionare Panoramica.
  2. Selezionare l'URL dell'app. È anche possibile passare direttamente a https://<app-name>.azurewebsites.net.

Screenshot che mostra come avviare un servizio app dal portale di Azure.

Passaggio 2: Aggiungere alcune attività all'elenco. Congratulazioni, si esegue un'app di Node.js sicura basata sui dati nel servizio app Azure.

Screenshot dell'app Express.js in esecuzione in servizio app.

5. Trasmettere i log di diagnostica

Il Servizio app di Azure acquisisce tutti i messaggi archiviati nella console per facilitare la diagnosi dei problemi con l'applicazione. L'app di esempio restituisce messaggi di log della console in ognuno dei relativi endpoint per illustrare questa funzionalità. Ad esempio, l'endpoint get restituisce un messaggio sul numero di attività recuperate dal database e viene visualizzato un messaggio di errore in caso di errore.

router.get('/', function(req, res, next) {
  Task.find()
    .then((tasks) => {      
      const currentTasks = tasks.filter(task => !task.completed);
      const completedTasks = tasks.filter(task => task.completed === true);

      console.log(`Total tasks: ${tasks.length}   Current tasks: ${currentTasks.length}    Completed tasks:  ${completedTasks.length}`)
      res.render('index', { currentTasks: currentTasks, completedTasks: completedTasks });
    })
    .catch((err) => {
      console.log(err);
      res.send('Sorry! Something went wrong.');
    });
});

Passaggio 1: Nella pagina Servizio app:

  1. Nel menu a sinistra selezionare Log di servizio app.
  2. In Application Logging, selezionare File System.

Screenshot che mostra come abilitare i log nativi nel servizio app nel portale di Azure.

Passaggio 2: dal menu a sinistra selezionare Flusso di log. Vengono visualizzati i log per l'app, inclusi i log e i log della piattaforma dall'interno del contenitore.

Screenshot che mostra come visualizzare il flusso di log nel portale di Azure.

6. Esaminare i file distribuiti usando Kudu

app Azure Servizio fornisce una console di diagnostica basata sul Web denominata Kudu che consente di esaminare l'ambiente di hosting del server per l'app Web. Con Kudu è possibile visualizzare i file distribuiti in Azure, esaminare la cronologia di distribuzione dell'applicazione e anche aprire una sessione SSH nell'ambiente di hosting.

Passaggio 1: nella pagina Servizio app:

  1. Nel menu a sinistra selezionare Strumenti avanzati.
  2. Selezionare Vai. È anche possibile passare direttamente a https://<app-name>.scm.azurewebsites.net.

Screenshot che mostra come passare alla pagina servizio app Kudu.

Passaggio 2: Nella pagina Kudu selezionare Distribuzioni.

Screenshot della pagina principale nell'app Kudu SCM che mostra le diverse informazioni disponibili sull'ambiente di hosting.

Se il codice è stato distribuito in servizio app usando Git o zip deploy, verrà visualizzata una cronologia delle distribuzioni dell'app Web.

Screenshot che mostra la cronologia di distribuzione di un'app servizio app in formato JSON.

Passaggio 3: Tornare alla home page kudu e selezionare Sito wwwroot.

Screenshot che mostra il sito wwwroot selezionato.

È possibile visualizzare la struttura di cartelle distribuite e fare clic per esplorare e visualizzare i file.

Screenshot dei file distribuiti nella directory wwwroot.

7. Pulire le risorse

Al termine, è possibile eliminare tutte le risorse dalla sottoscrizione di Azure eliminando il gruppo di risorse.

Passaggio 1: nella barra di ricerca nella parte superiore del portale di Azure:

  1. Immettere il nome del gruppo di risorse.
  2. Selezionare il gruppo di risorse.

Screenshot che illustra come cercare e passare a un gruppo di risorse nel portale di Azure.

Passaggio 2: nella pagina del gruppo di risorse selezionare Elimina gruppo di risorse.

Screenshot che mostra la posizione del pulsante Elimina gruppo di risorse nel portale di Azure.

Passaggio 3:

  1. Immettere il nome del gruppo di risorse per confermare l'eliminazione.
  2. Selezionare Elimina.

Screenshot della finestra di dialogo di conferma per l’eliminazione di un gruppo di risorse nel portale di Azure. :

Domande frequenti

Quanto costa questa configurazione?

I prezzi per le risorse di creazione sono i seguenti:

  • Il piano di servizio app viene creato nel livello Basic e può essere ridimensionato verso l'alto o verso il basso. Vedere Prezzi del servizio app.
  • Il server Azure Cosmos DB viene creato in una singola area e può essere distribuito in altre aree. Vedere Prezzi di Azure Cosmos DB.
  • La rete virtuale non comporta alcun addebito a meno che non si configurino funzionalità aggiuntive, ad esempio il peering. Vedere Prezzi della rete virtuale di Azure.
  • La zona DNS privata comporta un piccolo addebito. Vedere Prezzi di DNS di Azure.

Ricerca per categorie connettersi al server Azure Cosmos DB protetto dietro la rete virtuale con altri strumenti?

  • Per l'accesso di base da uno strumento da riga di comando, è possibile eseguire mongosh dal terminale SSH dell'app. Il contenitore dell'app non è disponibile con mongosh, quindi è necessario installarlo manualmente. Tenere presente che il client installato non persiste tra i riavvii dell'app.
  • Per connettersi da un client con interfaccia utente grafica MongoDB, il computer deve trovarsi all'interno della rete virtuale. Ad esempio, potrebbe trattarsi di una macchina virtuale di Azure connessa a una delle subnet o di un computer in una rete locale con una connessione VPN da sito a sito con la rete virtuale di Azure.
  • Per connettersi dalla shell MongoDB dalla pagina di gestione di Azure Cosmos DB nel portale, il computer deve trovarsi anche all'interno della rete virtuale. È invece possibile aprire il firewall del server Azure Cosmos DB per l'indirizzo IP del computer locale, ma aumenta la superficie di attacco per la configurazione.

Come funziona lo sviluppo di app locali con GitHub Actions?

Prendere il file del flusso di lavoro generato automaticamente dal servizio app come esempio, ognigit push avvia una nuova esecuzione di compilazione e distribuzione. Da un clone locale del repository GitHub si effettua il push degli aggiornamenti desiderati in GitHub. Ad esempio:

git add .
git commit -m "<some-message>"
git push origin main

Perché la distribuzione di GitHub Actions è così lenta?

Il file del flusso di lavoro generato automaticamente da servizio app definisce l'esecuzione di due processi, build-then-deploy. Poiché ogni processo viene eseguito nel proprio ambiente pulito, il file del flusso di lavoro garantisce che il deploy processo abbia accesso ai file dal build processo:

La maggior parte del tempo impiegato dal processo a due processi viene impiegato per caricare e scaricare gli artefatti. Se si vuole, è possibile semplificare il file del flusso di lavoro combinando i due processi in uno, eliminando così la necessità di eseguire i passaggi di caricamento e download.

Passaggi successivi

 Proteggere con dominio personalizzato e certificato di protezione