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 di Node.js sicura in Servizio app di Azure connessa a un database di Azure Cosmos DB per MongoDB. Al termine, si avrà un'app Express.js in esecuzione in Servizio app di Azure in Linux.

Questo articolo presuppone che si abbia già familiarità con lo sviluppoNode.js e che Node e MongoDB sia installato in locale. Sarà necessario anche un account Azure con una sottoscrizione attiva. Se non si dispone di 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 file in .env e popolare il .env.sample valore DATABASE_URL con l'URL di 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 vengono create 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, si specifica:

• Nome per l'app Web. È il nome usato come parte del nome DNS per l'app Web sotto forma di https://<app-name>.azurewebsites.net.
• Area da eseguire fisicamente l'app 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. È il 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.

Accedere alla portale di Azure e seguire questa procedura per creare le risorse Servizio app di Azure.

Passaggio 1: Nella portale di Azure:

1. Immettere "database app Web" nella barra di ricerca nella parte superiore della portale di Azure.
2. Selezionare l'elemento etichettato App Web + Database sotto l'intestazione Marketplace . È anche possibile passare direttamente alla creazione guidata .

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 di msdocs-expressjs-mongodb-tutorial.
2. Area → Qualsiasi area di Azure vicino all'utente.
3. Nome → msdocs-expressjs-mongodb-XYZ in cui XYZ è qualsiasi 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 aumentare la scalabilità fino a un piano tariffario di produzione in un secondo momento.
6. Azure Cosmos DB per MongoDB viene selezionato per impostazione predefinita come motore di database. Azure Cosmos DB è un database nativo del cloud che offre un'API compatibile con MongoDB del 100%. Si noti il nome del database generato dall'utente (<app-name-database>). Sarà necessario più avanti.
7. Selezionare Rivedi e crea.
8. Al termine della convalida selezionare Crea.

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

• Gruppo di risorse → Contenitore per tutte le risorse create.
• servizio app piano → Definisce le risorse di calcolo per servizio app. Viene creato un piano Linux nel livello Basic .
• servizio app → Rappresenta l'app e viene eseguita nel piano di servizio app.
• La rete virtuale → integrata con l'app servizio app e isola il traffico di rete back-end.
• Endpoint privato → endpoint di accesso 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. Un database e un utente vengono creati nel server.
• DNS privato zona → Abilita la risoluzione DNS del server Azure Cosmos DB nella rete virtuale.

2. Configurare la connettività del database

La creazione guidata ha generato l'URI di MongoDB già, ma l'app richiede una variabile e una DATABASE_URLDATABASE_NAME variabile. In questo passaggio si creano impostazioni dell'app con il formato necessario per l'app.

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

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. Selezionare OK.

Passaggio 3:

1. Scorrere fino alla fine della pagina e selezionare la 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 della stringa di connessione MongoDB.
3. Selezionare Annulla.

Passaggio 4:

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

3. Distribuire codice di esempio

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

Passaggio 1: In una nuova finestra del browser:

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

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

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

Passaggio 4: Nella pagina servizio app selezionare Centro distribuzione nel menu a sinistra.

Passaggio 5: Nella pagina Centro distribuzione:

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

Passaggio 6: Nella pagina Centro distribuzione:

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

Passaggio 7: Si viene eseguiti nel repository GitHub e si noterà che l'azione GitHub è in esecuzione. Il file del flusso di lavoro definisce due fasi separate, compilazione e distribuzione. Attendere l'esecuzione di GitHub per visualizzare uno stato completo. Ci vogliono circa 15 minuti.

4. Passare all'app

Passaggio 1: Nella pagina servizio app:

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

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

5. Trasmettere i log di diagnostica

Servizio app di Azure acquisisce tutti i messaggi registrati nella console per facilitare la diagnosi dei problemi con l'applicazione. L'app di esempio restituisce i 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 se si verifica un 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. Dal menu a sinistra selezionare servizio app log.
2. In Registrazione applicazioni selezionare File System.

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.

6. Esaminare i file distribuiti usando Kudu

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

Passaggio 1: Nella pagina servizio app:

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

Passaggio 2: Nella pagina Kudu selezionare Distribuzioni.

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

Passaggio 3: Indietro nella home page di Kudu e selezionare Site wwwroot.

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

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 della portale di Azure:

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

Passaggio 2: Nella pagina gruppo di risorse selezionare Elimina gruppo di risorse.

Passaggio 3:

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

:

Domande frequenti

• Quanto costa questa configurazione?
• Ricerca per categorie connettersi al server Azure Cosmos DB protetto dietro la rete virtuale con altri strumenti?
• Come funziona lo sviluppo di app locali con GitHub Actions?
• Perché la distribuzione GitHub Actions è così lenta?

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 o ridotto. Vedere servizio app prezzi.
• 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 un addebito a meno che non si configurano funzionalità aggiuntive, ad esempio il peering. Vedere Prezzi di Azure Rete virtuale.
• La zona DNS privata comporta un piccolo addebito. Vedere Prezzi 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 GUI MongoDB, la macchina deve trovarsi nella rete virtuale. Ad esempio, potrebbe essere una macchina virtuale di Azure connessa a una delle subnet o 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 da servizio app come esempio, ogni git push operazione 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 GitHub Actions è così lenta?

Il file del flusso di lavoro generato automaticamente da servizio app definisce l'esecuzione in due processi di compilazione e distribuzione. 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:

• Al termine del build processo , caricare i file come artefatti.
• All'inizio del deploy processo scaricare gli artefatti.

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

Passaggi successivi

JavaScript nel Centro per sviluppatori di Azure

Configurare l'app Node.js in servizio app

 Proteggere con dominio e certificato personalizzati