Delen via

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

  • Artikel

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 op Linux.

Een diagram waarin wordt getoond hoe de Express.js-app wordt geïmplementeerd in Azure-app Service en 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

Ga als volgt te werk als u de toepassing lokaal wilt uitvoeren:

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

1. App Service en Azure Cosmos DB maken

In deze stap maakt u de Azure-resources. Met de stappen die in deze zelfstudie worden gebruikt, maakt u een set beveiligde standaardbronnen met 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 in de wereld uit te voeren.
  • De runtimestack voor de app. Hier selecteert u de versie van Node die u voor uw app wilt gebruiken.
  • Het hostingabonnement voor de app. Dit 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 die nodig zijn voor de toepassing groeperen (in een logische container).

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

Stap 1: In Azure Portal:

  1. Voer 'web-app-database' in de zoekbalk boven aan Azure Portal in.
  2. Selecteer het item met het label Web App + 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 → Nieuwe maken selecteren en een naam van msdocs-expressjs-mongodb-tutorial gebruiken.
  2. Regio → Elke Azure-regio bij u in de buurt.
  3. Naam → msdocs-expressjs-mongodb-XYZ waarbij XYZ uit drie willekeurige tekens bestaat. Deze naam moet uniek zijn binnen Azure.
  4. Runtimestack → Node 16 LTS.
  5. Hostingabonnement → Basic. Wanneer u klaar bent, kunt u later omhoog schalen naar een prijscategorie voor productie.
  6. Azure Cosmos DB voor MongoDB is standaard geselecteerd als de database-engine. Azure Cosmos DB is een cloudeigen database met een 100% compatibele MongoDB-API. 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: Het duurt enkele minuten voordat de implementatie is voltooid. Zodra 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 vanaf het privé-eindpunt. Er worden een database en een gebruiker voor u gemaakt op de server.
  • Privé-DNS zone → Maakt DNS-omzetting van de Azure Cosmos DB-server in het virtuele netwerk mogelijk.

Een schermopname van het implementatieproces voltooid.

2. Databaseconnectiviteit instellen

De wizard Voor het maken is de MongoDB-URI 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 Configuratie in het linkermenu op de pagina App Service.

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 Naam DATABASE_NAME in.
  3. Voer in het veld Waarde de automatisch gegenereerde databasenaam in van de wizard Maken, die eruitziet als msdocs-expressjs-mongodb-XYZ-database.
  4. Selecteer OK.

Een schermopname die laat zien hoe u de automatisch gegenereerde verbindingsreeks ziet.

Stap 3:

  1. Schuif naar de onderkant van de pagina en selecteer de verbindingsreeks MONGODB_URI. Deze is gegenereerd door de wizard maken.
  2. Selecteer in het veld Waarde de knop Kopiëren en plak de waarde in een tekstbestand voor de volgende stap. Deze heeft de URI-indeling van MongoDB verbindingsreeks.
  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 verbindingsreeks (dat wil mongodb://...bijvoorbeeld).
  2. Selecteer Opslaan in de menubalk bovenaan.
  3. Wanneer u hierom wordt gevraagd, selecteert u Doorgaan.

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

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 uitstekende manier om continue integratie in uw implementatieproces te hebben. Standaard wordt met elke git push 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 Vorken.
  4. Selecteer Een fork maken.

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

Stap 2: Open Visual Studio Code op de GitHub-pagina 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 de configuratie/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: Ga terug naar de pagina App Service en selecteer in het linkermenu Implementatiecentrum.

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

Stap 5: Op de pagina Implementatiecentrum:

  1. Selecteer GitHub in Bron. GitHub Actions is standaard 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 opslagplaats msdocs-nodejs-mongodb-azure-sample-app.
  5. Selecteer in Vertakking de hoofdmap.
  6. Selecteer Opslaan in het bovenste menu. App Service voert een werkstroombestand door in de gekozen GitHub-opslagplaats in de .github/workflows map.

Een schermopname van het configureren van CI/CD met behulp van GitHub Actions.

Stap 6: Op de pagina Implementatiecentrum:

  1. Selecteer Logboeken. Er is al een implementatieuitvoering gestart.
  2. Selecteer build-/deploy-logboeken in het logboekitem voor de implementatieuitvoering.

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

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

Een schermopname van een Actieve GitHub-uitvoering.

4. Blader naar de app

Stap 1: Op de App Service-pagina:

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

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

Stap 2: Voeg een paar 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 get eindpunt voert bijvoorbeeld 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 App Service-pagina:

  1. Selecteer App Service-logboeken in het linkermenu.
  2. Selecteer Bestandssysteem onder Toepassingslogboek.

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

Stap 2: Selecteer in het menu links de optie Logboekstream. 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 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 App Service-pagina:

  1. Selecteer Geavanceerde hulpmiddelen in het linkermenu.
  2. Selecteer Go. U kunt ook rechtstreeks naar https://<app-name>.scm.azurewebsites.net.

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

Stap 2: Selecteer Implementaties op de Kudu-pagina.

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

Als u code hebt geïmplementeerd in 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: Ga terug naar de startpagina van Kudu en selecteer Site wwwroot.

Een schermopname van de geselecteerde site wwwroot.

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

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

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 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 Azure Portal.

Stap 2: Selecteer op de pagina Resourcegroep verwijderen.

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

Stap 3:

  1. Voer de naam van de resourcegroep in om uw verwijdering te bevestigen.
  2. Selecteer Verwijderen.

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

Veelgestelde vragen

Hoeveel kost dit instellen?

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 Prijzen voor App Service.
  • De Azure Cosmos DB-server wordt in één regio gemaakt 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 vanuit een opdrachtregelprogramma kunt u uitvoeren mongosh vanuit de SSH-terminal van de app. De container van de app wordt niet geleverd mongosh, dus u moet deze handmatig installeren. Houd er rekening mee dat de geïnstalleerde client niet blijft bestaan tijdens het opnieuw opstarten van de app.
  • Als u verbinding wilt maken vanuit een MongoDB-GUI-client, moet uw machine zich in het virtuele netwerk bevinden. Het kan bijvoorbeeld een Virtuele Azure-machine 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 voor het IP-adres van uw lokale computer openen, maar het vergroot de kwetsbaarheid voor aanvallen voor uw configuratie.

Hoe werkt het ontwikkelen van lokale apps met GitHub Actions?

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

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

Waarom is de Implementatie van GitHub Actions zo traag?

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

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

Volgende stappen

JavaScript in het Ontwikkelaarscentrum van Azure

Node.js-app configureren in App Service

 Beveiligen met aangepast domein en certificaat