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

2025-05-28

Azure App Service biedt een zeer schaalbare, zelfreparerende webhostingdienst die het Linux-besturingssysteem gebruikt. Deze tutorial laat zien hoe je een veilige Node.js-app maakt in Azure App Service die is verbonden met een Azure Cosmos DB voor MongoDB-database. Wanneer je klaar bent, heb je een Express.js-app draaien op Azure App Service op Linux.

Schermafbeelding van Node.js-applicatie die gegevens opslaat in Cosmos DB.

In deze tutorial leer je hoe je:

Maak een standaardarchitectuur die van nature veilig is voor Azure App Service en Azure Cosmos DB met de MongoDB API.
Beveilig verbindingsgeheimen met behulp van een beheerde identiteit en Key Vault-referenties.
Implementeer een Node.js voorbeeldapplicatie naar App Service vanuit een GitHub-repository.
Toegang tot App Service-app-instellingen in de toepassingscode.
Maak updates en herpubliceer de applicatiecode.
Stream diagnostische logs van App Service.
Beheer de app in het Azure-portaal.
Voorzie in dezelfde architectuur en implementeer met Azure Developer CLI.
Optimaliseer je ontwikkelingsworkflow met GitHub Codespaces en GitHub Copilot.

Vereiste voorwaarden

Een Azure-account met een actieve abonnement. Als je geen Azure-account hebt, kun je er gratis een aanmaken.
Een GitHub-account. je kunt ook er gratis een krijgen.
Kennis van Express.js-ontwikkeling.
(Optioneel) Om GitHub Copilot uit te proberen, een GitHub Copilot-account. Er is een gratis proefperiode van 30 dagen beschikbaar.

Een Azure-account met een actieve abonnement. Als je geen Azure-account hebt, kun je er gratis een aanmaken.
Azure Developer CLI geïnstalleerd. Je kunt de stappen volgen met de Azure Cloud Shell, omdat deze de Azure Developer CLI al geïnstalleerd heeft.
Kennis van Express.js-ontwikkeling.
(Optioneel) Om GitHub Copilot uit te proberen, een GitHub Copilot-account. Er is een gratis proefperiode van 30 dagen beschikbaar.

Je kunt de voorbeeldapplicatie in deze tutorial snel implementeren en deze zien draaien in Azure. Voer de volgende opdrachten uit in de Azure Cloud Shell en volg de aanwijzingen op:

mkdir msdocs-nodejs-mongodb-azure-sample-app
cd msdocs-nodejs-mongodb-azure-sample-app
azd init --template msdocs-nodejs-mongodb-azure-sample-app
azd up

1. Voer het voorbeeld uit

Ten eerste stelt u een voorbeeld van een data-gestuurde app op als startpunt. Voor uw gemak bevat de sample repository een dev container configuratie. De ontwikkelcontainer bevat alles wat je nodig hebt om een applicatie te ontwikkelen, inclusief de database, cache en alle omgevingsvariabelen die de voorbeeldapplicatie nodig heeft. De ontwikkelcontainer kan draaien in een GitHub codespace, wat betekent dat je het voorbeeld op elke computer met een webbrowser kunt uitvoeren.

Stap 1: In een nieuw browservenster:

Log in op uw GitHub-account.
Ga naar https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app/fork.
"Deselect Copy the main branch only." Je wilt alle takken.
Selecteer Maak een fork.

Stap 2: In de GitHub-fork:

Selecteer main>starter-no-infra voor de starterbranch. Deze tak bevat alleen het voorbeeldproject en geen Azure-gerelateerde bestanden of configuratie.
Selecteer Code>maak een codespace aan op starter-no-infra. Het duurt enkele minuten voordat de codespace is ingesteld.

Step 3: In de codespace-terminal:

Voer npm install && npm start uit.
Wanneer je de melding Your application running on port 3000 is available. ziet, selecteer Openen in Browser. U ziet de voorbeeldapplicatie in een nieuw browsertabblad. Om de Express.js applicatie te stoppen, typt u Ctrl+C.

Aanbeveling

Je kunt GitHub Copilot vragen stellen over deze repository. Voorbeeld:

@workspace Wat doet dit project?
@workspace Wat doet de .devcontainer-map?

Problemen? Bekijk de Probleemoplossingssectie.

2. Maak App Service en Azure Cosmos DB

In deze stap maakt u de Azure-resources aan. De stappen in deze tutorial creëren een reeks standaard beveiligde bronnen, inclusief App Service en Azure Cosmos DB voor MongoDB. Voor het aanmaakproces specificeer je:

De Name voor de web-app. Deze wordt gebruikt als onderdeel van de DNS-naam voor uw app.
De regio waar de app fysiek in de wereld wordt uitgevoerd. Het wordt ook gebruikt als onderdeel van de DNS-naam voor je app.
De runtimestack voor de app. Hier selecteert u de versie van Node die u wilt gebruiken voor uw app.
Het hostingplan voor de app. Het is het prijspakket dat de set functies en schaalcapaciteit voor je app omvat.
De Resource Group voor de applicatie. Een resourcegroep stelt je in staat om alle Azure-resources die nodig zijn voor de applicatie te groeperen in een logische container.

nl-NL: Meld je aan bij de Azure-portal en volg deze stappen om je Azure App Service-resources te maken.

Stap 1: In het Azure-portaal:

Voer "web app database" in de zoekbalk bovenaan de Azure portal in.
Selecteer het item met het label Web App + Database onder de kop Marketplace. U kunt ook direct naar de creatiewizard navigeren.

Een screenshot die laat zien hoe je het zoekvak op de bovenste werkbalk kunt gebruiken om de Web App + Database installatiewizard te vinden.

Stap 2: Op de pagina Webapp + Database maken vul je het formulier als volgt in.

Resource Group: Selecteer Nieuw maken en gebruik de naam msdocs-expressjs-mongodb-tutorial.
Regio: Elke Azure-regio bij u in de buurt.
Name: msdocs-expressjs-mongodb-XYZ, waar XYZ elke willekeurige drie tekens zijn.
Runtimestack: Node 20 LTS.
Engine: Cosmos DB-API voor MongoDB. Azure Cosmos DB is een cloud-native database die een 100% MongoDB-compatibele API biedt. Noteer de databasenaam die voor u gegenereerd is (<app-name>-database). Je zult het later nodig hebben.
Hostingabonnement: Basispakket. Wanneer je er klaar voor bent, kun je opschalen naar een productietarievenniveau.
Kies Beoordelen + creëren.
Nadat de validatie is voltooid, selecteer Maken.

Stap 3: Het uitrollen duurt enkele minuten om te voltooien. Nadat de implementatie is voltooid, selecteer de knop Go to resource. Je wordt direct naar de App Service-app geleid, maar de volgende resources worden aangemaakt:

Bron groep → De container voor alle aangemaakte bronnen.
App Service-plan → Definieert de rekencapaciteit voor App Service. Er wordt een Linux-abonnement in de Basic-laag aangemaakt.
App Service → Vertegenwoordigt uw app en draait binnen het App Service-plan.
Virtueel netwerk → Geïntegreerd met de App Service-app en isoleert back-end netwerkverkeer.
Private endpoint → Toegangsendpoint voor de databasemiddel in het virtuele netwerk.
Netwerkinterface → Vertegenwoordigt een privé-IP-adres voor het privé-eindpunt.
Azure Cosmos DB voor MongoDB → Alleen toegankelijk via het privékoppelpunt. Er worden een database en een gebruiker voor je aangemaakt op de server.
Private DNS-zone → Maakt DNS-resolutie van de Azure Cosmos DB-server in het virtuele netwerk mogelijk.

Problemen? Bekijk de Probleemoplossingssectie.

3. Beveilig verbindingsgeheimen

De creatiewizard heeft de verbindingsreeks al voor je gegenereerd als een app-instelling. Echter, de beste beveiligingspraktijk is om geheimen volledig buiten App Service te houden. Je verplaatst je geheimen naar een key vault en verandert je app-instellingen naar een Key Vault-referentie met behulp van Service Connectors.

Stap 1: Op de App Service-pagina:

In het linkermenu selecteer Instellingen > Omgevingsvariabelen.
Naast AZURE_COSMOS_CONNECTIONSTRING, selecteer Waarde weergeven. Deze verbindingsreeks stelt u in staat om verbinding te maken met de Cosmos DB-database die is beveiligd achter een privé-eindpunt. De geheimen worden echter direct opgeslagen in de App Service-app, wat niet ideaal is. Je zult dit veranderen.

Stap 2: Maak een sleutelhanger aan voor het veilig beheren van geheimen.

In de bovenste zoekbalk typt u "key vault", en selecteer daarna Marketplace>Key Vault.
Selecteer in Resourcegroepmsdocs-expressjs-mongodb-tutorial.
In Sleutelkluisnaam typt u een naam die alleen uit letters en cijfers bestaat.
In Regio, stel het in als de voorbeeldlocatie voor de resourcegroep.

Stap 3:

Selecteer het tabblad Netwerken.
Deselecteer Openbare toegang inschakelen.
Selecteer Een privaat eindpunt maken.
Selecteer in Resourcegroepmsdocs-expressjs-mongodb-tutorial.
In Sleutelkluisnaam typt u een naam die alleen uit letters en cijfers bestaat.
In Regio, stel het in als de voorbeeldlocatie voor de resourcegroep.
Selecteer in het dialoogvenster in Location dezelfde locatie als uw App Service-app.
Selecteer in Resourcegroepmsdocs-expressjs-mongodb-tutorial.
In Naam, typ msdocs-expressjs-mongodb-XYZVaultEndpoint.
In Virtueel netwerk, selecteer msdocs-expressjs-mongodb-XYZVnet.
In Subnet, msdocs-expressjs-mongodb-XYZSubnet.
Kies OK.
Selecteer Beoordelen + creëren en selecteer daarna Creëren. Wacht tot de implementatie van de Key Vault is voltooid. U zou "Uw implementatie is voltooid" moeten zien.

Stap 4:

Typ in de bovenste zoekbalk msdocs-expressjs-mongodb en vervolgens de App Service-resource genaamd msdocs-expressjs-mongodb-XYZ.
In de App-service pagina, selecteer in het linker menu Instellingen > Service Connector. Er is al een connector, die de wizard voor het maken van apps voor u heeft gemaakt.
Selecteer het selectievakje naast de connector en selecteer vervolgens Edit.
Stel op het tabblad Basisinstellingen het type Client in op Node.js.
Selecteer het tabblad Verificatie.
Selecteer Geheim opslaan in Key Vault.
Onder Key Vault-verbinding, selecteer Nieuw maken. Er wordt een dialoogvenster Verbinding maken geopend boven aan het bewerkingsdialoogvenster.

Stap 5: In het Aanmaken verbinding-dialoogvenster voor de Key Vault-verbinding:

In Key Vault selecteer je de sleutelkluis die je eerder hebt aangemaakt.
Selecteer Beoordelen en Creëren. U zou moeten zien dat System toegewezen beheerde identiteit is ingesteld op Geselecteerd.
Wanneer de validatie is voltooid, selecteer Create.

Stap 6: Je bent terug in het wijzigingsdialoogvenster voor defaultConnector.

In het tabblad Authenticatie wacht u tot de sleutelkluisconnector is aangemaakt. Wanneer de bewerking is voltooid, wordt de Key Vault-verbinding in de vervolgkeuzelijst automatisch geselecteerd.
Selecteer Volgende: Netwerkverbinding.
Selecteer Firewallregels configureren om toegang tot de doelservice mogelijk te maken. Als je het bericht "Geen Private Eindpunt op de doelservice" ziet, negeer het dan. De wizard voor het maken van apps heeft de Cosmos DB-database al beveiligd met een privé-eindpunt.
Selecteer Opslaan. Wacht totdat de Update geslaagd melding verschijnt.

Stap 7: Uw wijzigingen controleren:

Selecteer opnieuw Omgevingsvariabelen in het linkermenu.
Selecteer waarde weergeven naast de app-instelling AZURE_COSMOS_CONNECTIONSTRING. De waarde moet zijn @Microsoft.KeyVault(...), wat betekent dat het een key vault-verwijzing is, omdat het geheim nu in de key vault wordt beheerd.

Problemen? Bekijk de Probleemoplossingssectie.

4. Voorbeeldcode implementeren

In deze stap configureert u gitHub-implementatie met behulp van GitHub Actions. Het is slechts een van de vele manieren om naar App Service te deployen, maar ook een uitstekende manier om continue integratie in je implementatieproces te hebben. Standaard geldt dat elke git push naar je GitHub-opslagplaats de bouw- en implementatieactie start.

Stap 1: In het linkermenu selecteer Implementatie>Implementatiecentrum.

Stap 2: Op de Deployment Center-pagina:

In Bron, selecteer GitHub. GitHub Actions is standaard geselecteerd als buildprovider.
Meld u aan bij uw GitHub-account en volg de aanwijzingen om Azure toestemming te geven.
Selecteer uw account in Organisatie.
Selecteer in opslagplaatsmsdocs-nodejs-mongodb-azure-sample-app.
Kies in Branchstarter-no-infra. Dit is dezelfde tak waaraan je werkte met je voorbeeldapp, zonder Azure-gerelateerde bestanden of configuratie.
Voor Authenticatietype kiest u Door gebruiker toegewezen identiteit.
In het bovenste menu, selecteer Opslaan. App Service maakt een workflowbestand aan in de gekozen GitHub-repository, in de .github/workflows-map. Standaard maakt het implementatiecentrum een gebruikersgebonden identiteit aan waarmee de workflow zich kan authenticeren via Microsoft Entra (OIDC-authenticatie). Zie Deploy to App Service using GitHub Actions voor alternatieve authenticatieopties.

Stap 3: Ga terug naar de GitHub codespace van je voorbeeldfork en voer git pull origin starter-no-infra uit. Dit haalt het nieuw vastgelegde workflowbestand binnen in je codespace.

Stap 4 (Optie 1: met GitHub Copilot):

Start een nieuwe chat sessie door de Chat weergave te selecteren en vervolgens + te kiezen.
Vraag, "@workspace Hoe maakt de app verbinding met de database?" Copilot zou je naar het app.js bestand en de mongoose.connect oproep kunnen wijzen.
Zeg "*Ik heb een verbindingsreeksvariabele in Azure genaamd AZURE_COSMOS_CONNECTIONSTRING." Copilot kan je een codesuggestie geven die lijkt op die in de stappen van Optie 2: zonder GitHub Copilot hieronder, en kan je zelfs vertellen om de wijziging aan te brengen in app.js.
Open app.js in de Verkenner en voeg het codevoorstel toe in de getApp methode. GitHub Copilot geeft je niet altijd dezelfde reactie, je moet mogelijk meer vragen stellen om de reactie nauwkeuriger af te stemmen. Voor tips, zie Wat kan ik doen met GitHub Copilot in mijn codespace?.

Stap 4 (optie 2: zonder GitHub Copilot):

Open vanuit de verkenner app.js.
Zoek de regel waar mongoose.connect wordt aangeroepen (Regel 16) en verander process.env.MONGODB_URI naar process.env.AZURE_COSMOS_CONNECTIONSTRING || process.env.MONGODB_URI.

Stap 5:

Selecteer de Source Control-extensie.
In het tekstvak, typ een commit-bericht zoals Update environment variable. Of, selecteer en laat GitHub Copilot een commit-bericht voor je genereren.
Selecteer Bevestigen en bevestig met Ja.
Selecteer Synchroniseer wijzigingen 1 en bevestig met OK.

Een screenshot die de wijzigingen toont die worden gecommit en gepusht naar GitHub.

Stap 6: Ga terug naar de pagina "Deployment Center" in de Azure-portal:

Selecteer Vernieuwen op het tabblad Logboeken. Een nieuwe implementatie uitrol is al gestart vanuit uw doorgevoerde wijzigingen.
In het logbestand voor de implementatierun, selecteer de invoer Build/Deploy Logs met de nieuwste tijdstempel.

Stap 7: Je wordt naar je GitHub-repository gebracht en ziet dat de GitHub-actie actief is. Het workflow-bestand definieert twee afzonderlijke fasen, bouwen en implementeren. Wacht tot de GitHub-uitvoering de status Complete toont.

Problemen? Bekijk de Probleemoplossingssectie.

5. Ga naar de app

Stap 1: Op de App Service-pagina:

Stap 2: Selecteer Overview in het menu aan de linkerkant.
Selecteer de URL van je app.

Stap 2: Voeg enkele taken aan de lijst toe. Gefeliciteerd, je runt een beveiligde, datagestuurde Node.js-app in Azure App Service.

6. Stream diagnostische logbestanden

Azure App Service legt alle berichten vast die in de console worden geregistreerd om u te helpen bij het diagnosticeren van problemen met uw applicatie. De voorbeeldapplicatie genereert consolelogberichten bij elk van zijn eindpunten om deze mogelijkheid te demonstreren. Een voorbeeld hiervan is dat het get eindpunt een bericht weergeeft over het aantal taken dat uit de database is opgehaald, en er verschijnt een foutmelding 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:

Kies in het linkermenu App Service-logboeken.
Selecteer Bestandssysteem onder Toepassingslogboek.
In het bovenste menu, selecteer Opslaan.

Stap 2: Selecteer in het linker menu Log stream. Je ziet de logs voor je app, inclusief platformlogs en logs van binnenin de container.

7. Inspecteer de geïmplementeerde bestanden met behulp van Kudu.

Azure App Service biedt een webgebaseerde diagnostische console genaamd Kudu waarmee u de serveromgeving voor uw webapp kunt onderzoeken. Met behulp van Kudu kunt u de bestanden die zijn geïmplementeerd op Azure bekijken, de implementatiegeschiedenis van de toepassing doorlopen en zelfs een SSH-sessie openen in de hostingomgeving.

Stap 1: Op de App Service-pagina:

Selecteer Geavanceerde hulpmiddelen in het linkermenu.
Selecteer Go.

Stap 2: Op de Kudu-pagina selecteer je Deployments.

Een screenshot van de hoofdpagina in de Kudu SCM-app die de verschillende beschikbare informatie over de hostingomgeving toont.

Als u code implementeert in App Service met behulp van Git of zip deploy, ziet u een geschiedenis van implementaties van uw web-app.

Stap 3: Ga terug naar de Kudu startpagina en selecteer Site wwwroot.

Je kunt de geïmplementeerde mappenstructuur zien en ervoor kiezen om door de bestanden te bladeren en ze te bekijken.

8. Maak middelen schoon

Wanneer je klaar bent, kun je alle middelen uit je Azure-abonnement verwijderen door de resourcegroep te verwijderen.

Step 1: In de zoekbalk bovenaan de Azure-portal:

Voer de naam van de resourcegroep in.
Selecteer de resourcegroep.

Stap 2: Op de pagina van de resourcegroep, selecteer Resourcegroep verwijderen.

Stap 3:

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

2. Maak Azure-resources aan en implementeer een voorbeeldapplicatie

In deze stap maak je de Azure-resources aan en implementeer je een voorbeeldapplicatie in App Service op Linux. De stappen die in deze tutorial worden gebruikt, creëren een set van standaard beveilgeerde bronnen, waaronder App Service en Azure Cosmos DB.

De dev-container heeft de Azure Developer CLI (AZD) al.

Vanuit de hoofdmap van de repository, voer azd init uit.

azd init --template nodejs-app-service-cosmos-redis-infra

Wanneer u daarom wordt gevraagd, geef dan de volgende antwoorden:

Vraag	Antwoord
De huidige directory is niet leeg. Zou u hier in '<uw-map>' een project willen initialiseren?	Y
Wat wil je met deze bestanden doen?	Mijn bestaande bestanden ongewijzigd laten
Voer een nieuwe omgevingsnaam in	Voer een unieke naam in. Het AZD-sjabloon gebruikt deze naam als onderdeel van de DNS-naam van uw webapp in Azure (`<app-name>-<hash>.azurewebsites.net`). Alfanumerieke tekens en koppeltekens zijn toegestaan.

Meld je aan bij Azure door het azd auth login-commando uit te voeren en de prompt te volgen.
```
azd auth login
```
Maak de benodigde Azure-resources aan en implementeer de app-code met de azd up opdracht. Volg de aanwijzingen om het gewenste abonnement en de locatie voor de Azure-resources te selecteren.
```
azd up
```
De azd up-opdracht duurt ongeveer 15 minuten om te voltooien (de Redis-cache neemt de meeste tijd in beslag). Het compileert en implementeert ook je applicatiecode, maar je zult je code later aanpassen om te werken met App Service. Terwijl deze wordt uitgevoerd, bevat de opdracht berichten over het inrichtings- en implementatieproces, inclusief een koppeling naar de implementatie in Azure. Wanneer deze is voltooid, wordt met de opdracht ook een koppeling naar de implementatietoepassing weergegeven.

Deze AZD-sjabloon bevat bestanden (azure.yaml en de infra map) die een standaard beveiligde architectuur genereren met de volgende Azure-bronnen:
- Resourcegroep: De container voor alle aangemaakte resources.
- App Service-plan: Definieert de rekenbronnen voor App Service. Een Linux-plan in de B1-laag is gecreëerd.
- App Service: Vertegenwoordigt uw app en draait binnen het App Service-plan.
- Virtueel netwerk: geïntegreerd met de App Service-app en isoleert back-endnetwerkverkeer.
- Azure Cosmos DB-account met MongoDB-API: alleen toegankelijk vanaf achter het privé-eindpunt. Er wordt een database voor u gemaakt op de server.
- Azure Cache voor Redis: Alleen toegankelijk vanuit het virtuele netwerk.
- Key vault: Alleen toegankelijk vanaf zijn privé-eindpunt. Wordt gebruikt om geheimen voor de App Service-app te beheren.
- Privé-eindpunten: Toegangseindpunten voor de sleutelkluis, de databaseserver en de Redis cache in het virtuele netwerk.
- Private DNS-zones: Schakel DNS-resolutie van de Cosmos DB-database, de Redis-cache en de sleutelhanger in het virtuele netwerk in.
- Log Analytics-werkruimte: Fungeert als de doelcontainer voor je app om zijn logs naar toe te sturen, waar je ook de logs kunt opvragen.
Zodra de opdracht is voltooid met het aanmaken van resources en het eerste keer implementeren van de applicatiecode, werkt de geïmplementeerde voorbeeldapp nog niet omdat u kleine wijzigingen moet aanbrengen om verbinding te maken met de database in Azure.

3. Verifieer verbindingsreeksen

De AZD-sjabloon die je gebruikt, heeft de connectiviteitsvariabelen voor je gegenereerd als app-instellingen en voert ze uit naar de terminal voor je gemak. App-instellingen zijn een manier om verbinding geheimen uit je code-repository te houden.

Zoek in de AZD-output de app-instelling AZURE_COSMOS_CONNECTIONSTRING. Alleen de namen van de instellingen worden weergegeven. Ze zien er zo uit in de AZD-uitvoer:
```
 App Service app has the following app settings:
         - AZURE_COSMOS_CONNECTIONSTRING
         - AZURE_REDIS_CONNECTIONSTRING
         - AZURE_KEYVAULT_RESOURCEENDPOINT
         - AZURE_KEYVAULT_SCOPE
 
```
AZURE_COSMOS_CONNECTIONSTRING bevat de verbindingsreeks voor de Cosmos DB-database in Azure. Je moet het later in je code gebruiken.
Voor uw gemak laat de AZD-template u de directe link zien naar de pagina met de app-instellingen van de app. Zoek de link en open deze in een nieuw browsertabblad.

Problemen? Bekijk de Probleemoplossingssectie.

4. Wijzig de voorbeeldcode en implementeer opnieuw

Met GitHub Copilot
Zonder GitHub Copilot

In de GitHub-codespace start je een nieuwe chatsessie door op de Chat-weergave te klikken en vervolgens op + te klikken.
Vraag, "@workspace Hoe maakt de app verbinding met de database?" Copilot zou je naar het app.js bestand en de mongoose.connect oproep kunnen wijzen.
Zeg, "Ik heb een verbindingsreeksvariabele in Azure genaamd AZURE_COSMOS_CONNECTIONSTRING.". Copilot kan je een codesuggestie geven die lijkt op die in de stappen van Optie 2: zonder GitHub Copilot hieronder, en kan je zelfs vertellen om de wijziging aan te brengen in app.js.
Open app.js in de Verkenner en voeg het codevoorstel toe in de getApp methode.

GitHub Copilot geeft je niet altijd dezelfde reactie, je moet mogelijk meer vragen stellen om de reactie nauwkeuriger af te stemmen. Voor tips, zie Wat kan ik doen met GitHub Copilot in mijn codespace?.
Terug in de codespace-terminal, voer azd deploy uit.
```
azd deploy
```

Open in de verkenner app.js en zie dat de app een Mongoose-verbinding maakt met MONGODB_URI (regel 16).
Wijzig process.env.MONGODB_URI in process.env.AZURE_COSMOS_CONNECTIONSTRING || process.env.MONGODB_URI.

Deze wijziging maakt het mogelijk om de juiste omgevingsvariabele voor de MongoDB-verbindingsreeks te selecteren, ongeacht of je lokaal werkt of in Azure. U kunt dezelfde variabelenaam gebruiken voor beide omgevingen, maar dat valt buiten het bereik van de zelfstudie.
Terug in de codespace-terminal, voer azd deploy uit.
```
azd deploy
```

Aanbeveling

U kunt ook gewoon altijd azd up gebruiken, dat zowel azd package, azd provision als azd deploy doet.

Problemen? Bekijk de Probleemoplossingssectie.

5. Ga naar de app

In de AZD-uitvoer, zoek de URL van je app en navigeer ernaar in de browser. De URL ziet er in de AZD-uitvoer zo uit:
```
 Deploying services (azd deploy)

   (✓) Done: Deploying service web
   - Endpoint: <URL>
 
```
Voeg een paar taken aan de lijst toe.

Gefeliciteerd, je draait een webapp in Azure App Service, met een veilige verbinding naar Azure Cosmos DB.

Problemen? Bekijk de Probleemoplossingssectie.

6. Stream diagnostische logbestanden

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

Zoek in de AZD-output de link om App Service-logs te streamen en open deze in de browser. De koppeling ziet er als volgt uit in de AZD-uitvoer:

Stream App Service logs at: <URL>

Lees meer over logging in Java-apps in de serie over Gebruik Azure Monitor OpenTelemetry voor .NET-, Node.js-, Python- en Java-applicaties.

Problemen? Bekijk de Probleemoplossingssectie.

7. Bronnen opschonen

Om alle Azure-resources in de huidige implementatieomgeving te verwijderen, voert u azd down uit en volgt u de aanwijzingen.

azd down

Probleemoplossingsproces

De portaalimplementatieweergave voor Azure Cosmos DB toont een Conflict-status
De browserpagina van de geïmplementeerde app geeft aan "Er is iets fout gegaan."

De portaal implementatie weergave voor Azure Cosmos DB toont een Conflictstatus

Afhankelijk van uw abonnement en de regio die u selecteert, kunt u de implementatiestatus voor Azure Cosmos DB mogelijk zien als Conflict, met de volgende boodschap in operationele details:

Sorry, we are currently experiencing high demand in <region> region, and cannot fulfill your request at this time.

De fout wordt hoogstwaarschijnlijk veroorzaakt door een limiet op uw abonnement voor de regio die u selecteert. Probeer een andere regio te kiezen voor uw implementatie.

De browserpagina van de geïmplementeerde app zegt "Er is iets misgegaan."

U moet waarschijnlijk nog steeds wijzigingen aanbrengen in de verbindingsreeks in uw applicatiecode. Zie 4. Voorbeeldcode implementeren.

Veelgestelde vragen

Hoeveel kost deze opstelling?
Hoe verbind ik met de Azure Cosmos DB-server die beveiligd is achter het virtuele netwerk, met behulp van andere tools?
Hoe werkt lokale app-ontwikkeling met GitHub Actions?
Waarom is de deployment van GitHub Actions zo traag?
Ik heb geen toestemming om een door de gebruiker toegewezen identiteit te creëren
Wat kan ik doen met GitHub Copilot in mijn codespace?

Hoeveel kost deze opstelling?

De prijzen voor de gemaakte bronnen zijn als volgt:

Het App Service-plan wordt gemaakt in de Basic-laag en kan worden geschaald naar boven of naar beneden. Bekijk App Service prijsstelling.
De Azure Cosmos DB-server wordt in één regio gemaakt en kan worden verspreid naar andere regio's. Zie prijzen voor Azure Cosmos DB.
Het virtuele netwerk brengt geen kosten met zich mee, tenzij u extra functionaliteit configureert, zoals peering. Zie prijzen voor Azure Virtual Network.
De privé-DNS-zone brengt een kleine vergoeding met zich mee. Zie prijzen voor Azure DNS.

Hoe verbind ik met de Azure Cosmos DB-server die beveiligd is achter het virtuele netwerk met andere tools?

Voor basis toegang vanaf een opdrachtregeltool, kunt u mongosh uitvoeren vanuit de SSH-terminal van de app. De container van de app wordt niet meegeleverd met mongosh, dus je moet deze handmatig installeren. Vergeet niet dat de geïnstalleerde client niet blijft bestaan na herstarts van de app.
Om verbinding te maken vanuit een MongoDB GUI-client, moet uw machine zich binnen het virtuele netwerk bevinden. Bijvoorbeeld, het kan een Azure VM zijn die is verbonden met een van de subnetten, of een machine in een on-premises netwerk die een site-to-site VPN verbinding heeft met het Azure virtuele netwerk.
Om verbinding te maken vanuit de MongoDB-shell vanaf de beheerpagina van Azure Cosmos DB in het portaal, moet uw machine zich ook binnen het virtuele netwerk bevinden. Je zou in plaats daarvan de firewall van de Azure Cosmos DB-server kunnen openen voor het IP-adres van je lokale machine, maar hierdoor wordt het aanvalsoppervlak van je configuratie vergroot.

Hoe werkt het ontwikkelen van lokale apps met GitHub Actions?

Neem het automatisch gegenereerde workflowbestand van App Service als voorbeeld, elke git push start een nieuwe build- en implementatieronde. Vanuit een lokale kloon van de GitHub-repository maak je de gewenste updates en zet je deze 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 het bouwen-en-vervolgens-uitrollen, een run met twee taken. Omdat elke taak in zijn eigen schone omgeving wordt uitgevoerd, zorgt het werkstroombestand ervoor dat de deploy taak toegang heeft tot de bestanden van de build taak.

Aan het einde van de build taak, upload bestanden als artefacten.
Aan het begin van de deploy taak, download de artifacts.

Het meeste van de tijd die aan het twee-banen proces wordt besteed gaat naar het uploaden en downloaden van artefacten. Als je wilt, kun je het workflowbestand vereenvoudigen door de twee taken samen te voegen tot één, waardoor de upload- en downloadstappen overbodig worden.

Ik heb geen toestemming om een door de gebruiker toegewezen identiteit te maken.

Zie Instellen van GitHub Actions-implementatie vanuit het implementatiecentrum.

Wat kan ik doen met GitHub Copilot in mijn codespace?

Je zou kunnen opmerken dat de GitHub Copilot chatweergave al voor je klaarstond toen je de codespace aanmaakte. Voor uw gemak hebben we de GitHub Copilot chat-extensie opgenomen in de containerdefinitie (zie .devcontainer/devcontainer.json). Echter, je hebt een GitHub Copilot-account nodig (er is een gratis proefperiode van 30 dagen beschikbaar).

Enkele tips voor jou wanneer je met GitHub Copilot spreekt:

In één enkele chatsessie bouwen de vragen en antwoorden op elkaar voort en kun je je vragen aanpassen om het antwoord dat je krijgt te verfijnen.
Standaard heeft GitHub Copilot geen toegang tot bestanden in uw repository. Om vragen te stellen over een bestand, open het bestand eerst in de editor.
Om GitHub Copilot toegang te geven tot alle bestanden in de repository bij het voorbereiden van zijn antwoorden, begint u uw vraag met @workspace. Voor meer informatie, zie Use the @workspace agent.
In de chatsessie kan GitHub Copilot wijzigingen voorstellen en zelfs aangeven waar deze moeten worden aangebracht (met @workspace), maar het is niet toegestaan de wijzigingen voor jou door te voeren. Het is aan jou om de voorgestelde wijzigingen toe te voegen en het te testen.

Hier zijn enkele andere dingen die je kunt zeggen om het antwoord dat je krijgt te verfijnen:

@workspace Waar is MONGODB_URI gedefinieerd?
In welk bestand moet ik de wijziging aanbrengen?
Zal deze verandering mijn app breken wanneer ik deze lokaal uitvoer?

Volgende stappen

JavaScript in het Ontwikkelaarscentrum van Azure

Node.js-app configureren in App Service

Beveilig met aangepast domein en certificaat

Delen via

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

Vereiste voorwaarden

Ga naar het einde

1. Voer het voorbeeld uit

2. Maak App Service en Azure Cosmos DB

3. Beveilig verbindingsgeheimen

4. Voorbeeldcode implementeren

5. Ga naar de app

6. Stream diagnostische logbestanden

7. Inspecteer de geïmplementeerde bestanden met behulp van Kudu.

8. Maak middelen schoon

2. Maak Azure-resources aan en implementeer een voorbeeldapplicatie

3. Verifieer verbindingsreeksen

4. Wijzig de voorbeeldcode en implementeer opnieuw

5. Ga naar de app

6. Stream diagnostische logbestanden

7. Bronnen opschonen

Probleemoplossingsproces

De portaal implementatie weergave voor Azure Cosmos DB toont een Conflictstatus

De browserpagina van de geïmplementeerde app zegt "Er is iets misgegaan."

Veelgestelde vragen

Hoeveel kost deze opstelling?

Hoe verbind ik met de Azure Cosmos DB-server die beveiligd is achter het virtuele netwerk met andere tools?

Hoe werkt het ontwikkelen van lokale apps met GitHub Actions?

Waarom is de Implementatie van GitHub Actions zo traag?

Ik heb geen toestemming om een door de gebruiker toegewezen identiteit te maken.

Wat kan ik doen met GitHub Copilot in mijn codespace?

Volgende stappen

Feedback

Aanvullende resources