Een Node.js + MongoDB-web-app implementeren in Azure

Azure App Service biedt een uiterst schaalbare webhostingservice met self-patchfunctie via het Linux-besturingssysteem. Deze zelfstudie laat zien hoe u een beveiligde Node.js-app maakt in Azure App Service die is verbonden met een Azure Cosmos DB voor MongoDB-database. Wanneer u klaar bent, hebt u een Express.js-app die wordt uitgevoerd op Azure App Service in Linux.

Een diagram dat laat zien hoe de Express.js-app wordt geïmplementeerd in Azure App Service en hoe de MongoDB-gegevens worden gehost in Azure Cosmos DB.

In dit artikel wordt ervan uitgegaan dat u al bekend bent met Node.js ontwikkeling en dat Node en MongoDB lokaal zijn geïnstalleerd. U hebt ook een Azure-account met een actief abonnement nodig. Als u geen Azure-account hebt, kunt u er gratis een maken.

Voorbeeldtoepassing

Als u deze zelfstudie wilt volgen, kloont of downloadt u de voorbeeldtoepassing uit de opslagplaats 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

Als u de toepassing lokaal wilt uitvoeren, gaat u als volgt te werk:

  • Installeer de pakketafhankelijkheden door uit te voeren npm install.
  • Kopieer het .env.sample bestand naar .env en vul de waarde DATABASE_URL in met uw MongoDB-URL (bijvoorbeeld mongodb://localhost:27017/).
  • Start de toepassing met .npm start
  • Als u de app wilt weergeven, bladert u naar http://localhost:3000.

1. Maak App Service en Azure Cosmos DB

In deze stap maakt u de Azure-resources. Met de stappen die in deze zelfstudie worden gebruikt, wordt een set standaard beveiligde resources gemaakt, waaronder App Service en Azure Cosmos DB voor MongoDB. Voor het aanmaakproces geeft u het volgende op:

  • De naam voor de web-app. Dit is de naam die wordt gebruikt als onderdeel van de DNS-naam voor uw web-app in de vorm van https://<app-name>.azurewebsites.net.
  • De regio om de app fysiek uit te voeren in de wereld.
  • De Runtime-stack voor de app. Hier selecteert u de versie van Node die u voor uw app wilt gebruiken.
  • Het hostingabonnement voor de app. Het is de prijscategorie die de set functies en schaalcapaciteit voor uw app bevat.
  • De resourcegroep voor de app. Met een resourcegroep kunt u alle Azure-resources groepeer (in een logische container) die nodig zijn voor de toepassing.

Meld u aan bij de Azure Portal en volg deze stappen om uw Azure App Service-resources te maken.

Stap 1: In de Azure Portal:

  1. Typ 'web-app-database' in de zoekbalk boven aan de Azure Portal.
  2. Selecteer het item met het label Web-app en database onder de kop Marketplace . U kunt ook rechtstreeks naar de wizard voor het maken navigeren.

Een schermopname die laat zien hoe u het zoekvak in de bovenste werkbalk gebruikt om de wizard Web-app en database maken te vinden.

Stap 2: Vul op de pagina Web-app en database maken het formulier als volgt in.

  1. Resourcegroep → Selecteer Nieuwe maken en gebruik de naam msdocs-expressjs-mongodb-tutorial.
  2. Regio → Elke Azure-regio bij u in de buurt.
  3. Naammsdocs-expressjs-mongodb-XYZ waarbij XYZ uit drie willekeurige tekens bestaat. Deze naam moet uniek zijn binnen Azure.
  4. RuntimestackNode 16 LTS.
  5. HostingabonnementBasic. Wanneer u klaar bent, kunt u later omhoog schalen naar een productieprijscategorie.
  6. Azure Cosmos DB voor MongoDB is standaard geselecteerd als de database-engine. Azure Cosmos DB is een cloudeigen database die een 100% mongoDB-compatibele API biedt. Noteer de databasenaam die voor u wordt gegenereerd (<app-naam-database>). U hebt deze later nodig.
  7. Selecteer Controleren + maken.
  8. Nadat de validatie is voltooid, selecteert u Maken.

Een schermopname die laat zien hoe u een nieuwe app en database configureert in de wizard Web App + Database.

Stap 3: De implementatie duurt enkele minuten. Nadat de implementatie is voltooid, selecteert u de knop Ga naar resource . U wordt rechtstreeks naar de App Service-app gebracht, maar de volgende resources worden gemaakt:

  • Resourcegroep → De container voor alle gemaakte resources.
  • App Service plan → Definieert de rekenresources voor App Service. Er wordt een Linux-plan in de Basic-laag gemaakt.
  • App Service → Vertegenwoordigt uw app en wordt uitgevoerd in het App Service-plan.
  • Virtueel netwerk → geïntegreerd met de App Service-app en isoleert back-endnetwerkverkeer.
  • Privé-eindpunt → Access-eindpunt voor de databaseresource in het virtuele netwerk.
  • Netwerkinterface → Vertegenwoordigt een privé-IP-adres voor het privé-eindpunt.
  • Azure Cosmos DB voor MongoDB → alleen toegankelijk van achter het privé-eindpunt. Een database en een gebruiker worden voor u gemaakt op de server.
  • Privé-DNS zone → Dns-omzetting van de Azure Cosmos DB-server in het virtuele netwerk inschakelen.

Een schermopname van het voltooide implementatieproces.

2. Databaseconnectiviteit instellen

De wizard voor het maken van de MongoDB-URI heeft al voor u gegenereerd, maar uw app heeft een DATABASE_URL variabele en een DATABASE_NAME variabele nodig. In deze stap maakt u app-instellingen met de indeling die uw app nodig heeft.

Stap 1: Selecteer op de pagina App Service in het linkermenu de optie Configuratie.

Een schermopname van het openen van de configuratiepagina in App Service.

Stap 2: Maak op het tabblad Toepassingsinstellingen van de pagina Configuratie een DATABASE_NAME instelling:

  1. Selecteer Nieuwe toepassingsinstelling.
  2. Voer in het veld NaamDATABASE_NAME in.
  3. Voer in het veld Waarde de automatisch gegenereerde databasenaam in van de wizard voor het maken. Deze naam ziet eruit als msdocs-expressjs-mongodb-XYZ-database.
  4. Selecteer OK.

Een schermopname die laat zien hoe u de automatisch gegenereerde connection string kunt zien.

Stap 3:

  1. Schuif naar de onderkant van de pagina en selecteer de connection string MONGODB_URI. Deze is gegenereerd door de wizard voor het maken.
  2. Selecteer in het veld Waarde de knop Kopiëren en plak de waarde in een tekstbestand voor de volgende stap. Het heeft de MongoDB connection string URI-indeling.
  3. Selecteer Annuleren.

Een schermopname die laat zien hoe u een app-instelling maakt.

Stap 4:

  1. Maak met dezelfde stappen in stap 2 een app-instelling met de naam DATABASE_URL en stel de waarde in op de waarde die u hebt gekopieerd uit de MONGODB_URI connection string (bijvoorbeeld mongodb://...).
  2. Selecteer Opslaan in de menubalk bovenaan.
  3. Wanneer u hierom wordt gevraagd, selecteert u Doorgaan.

Een schermopname die laat zien hoe u instellingen op de configuratiepagina opslaat.

3. Voorbeeldcode implementeren

In deze stap configureert u gitHub-implementatie met behulp van GitHub Actions. Het is slechts een van de vele manieren om te implementeren in App Service, maar ook een geweldige manier om continue integratie in uw implementatieproces te hebben. Standaard wordt met elke git push in uw GitHub-opslagplaats de build- en implementatieactie gestart.

Stap 1: In een nieuw browservenster:

  1. Meld u aan bij uw GitHub-account.
  2. Navigeer naar https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.
  3. Selecteer Fork.
  4. Selecteer Fork maken.

Een schermopname van het maken van een fork van de GitHub-voorbeeldopslagplaats.

Stap 2: Open Op de GitHub-pagina Visual Studio Code in de browser door op de . toets te drukken.

Een schermopname van het openen van de Visual Studio Code-browserervaring in GitHub.

Stap 3: Open in Visual Studio Code in de browser config/connection.js in de verkenner. In de getConnectionInfo functie ziet u dat de app-instellingen die u eerder hebt gemaakt voor de MongoDB-verbinding worden gebruikt (DATABASE_URL en DATABASE_NAME).

Een schermopname van Visual Studio Code in de browser en een geopend bestand.

Stap 4: Selecteer op de pagina App Service in het linkermenu De optie Implementatiecentrum.

Een schermopname van het openen van het implementatiecentrum in App Service.

Stap 5: Op de pagina Implementatiecentrum:

  1. Selecteer in Bronde optie GitHub. Standaard is GitHub Actions geselecteerd als buildprovider.
  2. Meld u aan bij uw GitHub-account en volg de prompt om Azure te autoriseren.
  3. Selecteer uw account in Organisatie.
  4. Selecteer in Opslagplaatsde optie msdocs-nodejs-mongodb-azure-sample-app.
  5. Selecteer hoofd in Vertakking.
  6. Selecteer Opslaan in het bovenste menu. App Service een werkstroombestand doorvoert in de gekozen GitHub-opslagplaats, in de .github/workflows map.

Een schermopname die laat zien hoe u CI/CD configureert met behulp van GitHub Actions.

Stap 6: Op de pagina Implementatiecentrum:

  1. Selecteer Logboeken. Er is al een implementatie-uitvoering gestart.
  2. Selecteer in het logboekitem voor de implementatie-uitvoering de optie Logboeken bouwen/implementeren.

Een schermopname die laat zien hoe u implementatielogboeken opent in het implementatiecentrum.

Stap 7: U wordt naar uw GitHub-opslagplaats gebracht en ziet dat de GitHub-actie wordt uitgevoerd. Het werkstroombestand definieert twee afzonderlijke fasen: bouwen en implementeren. Wacht tot de GitHub-uitvoering de status Voltooid weergeeft. Het duurt ongeveer 15 minuten.

Een schermopname van een Uitvoering van GitHub.

4. Blader naar de app

Stap 1: Op de pagina App Service:

  1. Selecteer Overzicht in het linkermenu.
  2. Selecteer de URL van uw app. U kunt ook rechtstreeks naar https://<app-name>.azurewebsites.netnavigeren.

Een schermopname die laat zien hoe u een App Service start vanuit de Azure Portal.

Stap 2: Voeg een aantal taken toe aan de lijst. Gefeliciteerd, u voert een beveiligde gegevensgestuurde Node.js-app uit in Azure App Service.

Een schermopname van de Express.js app die wordt uitgevoerd in App Service.

5. Diagnostische logboeken streamen

Azure App Service legt alle berichten vast die zijn vastgelegd in de console om u te helpen bij het diagnosticeren van problemen met uw toepassing. De voorbeeld-app voert consolelogboekberichten uit in elk van de eindpunten om deze mogelijkheid te demonstreren. Het eindpunt voert bijvoorbeeld get een bericht uit over het aantal taken dat is opgehaald uit de database en er wordt een foutbericht weergegeven als er iets misgaat.

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.');
    });
});

Stap 1: Op de pagina App Service:

  1. Selecteer in het linkermenu App Service logboeken.
  2. Selecteer onder Toepassingslogboekde optie Bestandssysteem.

Een schermopname van het inschakelen van systeemeigen logboeken in App Service in de Azure Portal.

Stap 2: Selecteer Logboekstream in het menu links. U ziet de logboeken voor uw app, inclusief platformlogboeken en logboeken vanuit de container.

Een schermopname die laat zien hoe u de logboekstream kunt weergeven in de Azure Portal.

6. Geïmplementeerde bestanden inspecteren met kudu

Azure App Service biedt een webgebaseerde diagnostische console met de naam Kudu waarmee u de serverhostingomgeving voor uw web-app kunt onderzoeken. Met Kudu kunt u de bestanden bekijken die zijn geïmplementeerd in Azure, de implementatiegeschiedenis van de toepassing bekijken en zelfs een SSH-sessie openen in de hostingomgeving.

Stap 1: Op de pagina App Service:

  1. Selecteer geavanceerde hulpprogramma's in het linkermenu.
  2. Selecteer Start. U kunt ook rechtstreeks naar https://<app-name>.scm.azurewebsites.netnavigeren.

Een schermopname die laat zien hoe u naar de pagina App Service Kudu navigeert.

Stap 2: Selecteer implementaties op de pagina Kudu.

Een schermopname van de hoofdpagina in de Kudu SCM-app met de verschillende beschikbare informatie over de hostingomgeving.

Als u code hebt geïmplementeerd voor App Service met behulp van Git of zip deploy, ziet u een geschiedenis van implementaties van uw web-app.

Een schermopname van de implementatiegeschiedenis van een App Service-app in JSON-indeling.

Stap 3: Terug naar de Kudu-startpagina en selecteer Site wwwroot.

Een schermopname met de geselecteerde site wwwroot.

U kunt de geïmplementeerde mapstructuur zien en klikken om door de bestanden te bladeren en weer te geven.

Een schermopname van geïmplementeerde bestanden in de map wwwroot.

7. Resources opschonen

Wanneer u klaar bent, kunt u alle resources uit uw Azure-abonnement verwijderen door de resourcegroep te verwijderen.

Stap 1: In de zoekbalk boven aan de Azure Portal:

  1. Voer de naam van de resourcegroup in.
  2. Selecteer de resourcegroep.

Een schermopname van het zoeken naar en navigeren naar een resourcegroep in de Azure Portal.

Stap 2: Selecteer op de pagina resourcegroep de optie Resourcegroep verwijderen.

Een schermopname met de locatie van de knop Resourcegroep verwijderen in de Azure Portal.

Stap 3:

  1. Voer de naam van de resourcegroep in om het verwijderen te bevestigen.
  2. Selecteer Verwijderen.

Een schermopname van het bevestigingsvenster voor het verwijderen van een resourcegroep in de Azure Portal. :

Veelgestelde vragen

Hoeveel kost deze installatie?

De prijzen voor het maken van resources zijn als volgt:

  • Het App Service-plan wordt gemaakt in de Basic-laag en kan omhoog of omlaag worden geschaald. Zie App Service prijzen.
  • De Azure Cosmos DB-server wordt gemaakt in één regio en kan worden gedistribueerd naar andere regio's. Zie Prijzen voor Azure Cosmos DB.
  • Voor het virtuele netwerk worden geen kosten in rekening gebracht, tenzij u extra functionaliteit configureert, zoals peering. Zie Prijzen voor Azure Virtual Network.
  • Voor de privé-DNS-zone worden kleine kosten in rekening gebracht. Zie Prijzen voor Azure DNS.

Hoe kan ik verbinding maken met de Azure Cosmos DB-server die is beveiligd achter het virtuele netwerk met andere hulpprogramma's?

  • Voor basistoegang via een opdrachtregelprogramma kunt u uitvoeren mongosh vanuit de SSH-terminal van de app. De container van de app wordt niet geleverd met mongosh, dus u moet deze handmatig installeren. Houd er rekening mee dat de geïnstalleerde client niet blijft bestaan bij het opnieuw opstarten van de app.
  • Als u verbinding wilt maken vanaf een MongoDB GUI-client, moet uw machine zich in het virtuele netwerk bevinden. Het kan bijvoorbeeld een Azure-VM zijn die is verbonden met een van de subnetten, of een machine in een on-premises netwerk met een site-naar-site-VPN-verbinding met het virtuele Azure-netwerk .
  • Als u verbinding wilt maken vanuit de MongoDB-shell vanaf de Azure Cosmos DB-beheerpagina in de portal, moet uw machine zich ook in het virtuele netwerk bevinden. U kunt in plaats daarvan de firewall van de Azure Cosmos DB-server openen voor het IP-adres van uw lokale computer, maar dit vergroot de kwetsbaarheid voor aanvallen voor uw configuratie.

Hoe werkt de ontwikkeling van lokale apps met GitHub Actions?

Neem het automatisch gegenereerde werkstroombestand uit App Service als voorbeeld, elke git push start een nieuwe build- en implementatieuitvoering. Vanuit een lokale kloon van de GitHub-opslagplaats kunt u de gewenste updates naar GitHub pushen. Bijvoorbeeld:

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

Waarom is de implementatie van de GitHub Actions zo traag?

Het automatisch gegenereerde werkstroombestand van App Service definieert build-then-deploy, uitvoeren met twee taken. Omdat elke taak in een eigen schone omgeving wordt uitgevoerd, zorgt het werkstroombestand ervoor dat de deploy taak toegang heeft tot de bestanden van de build taak:

De meeste tijd die het proces met twee taken in rekening brengt, wordt besteed aan het uploaden en downloaden van artefacten. Als u wilt, kunt u het werkstroombestand vereenvoudigen door de twee taken in één taak te combineren, waardoor de upload- en downloadstappen niet meer nodig zijn.

Volgende stappen