Zelfstudie: Een app voor Node.js en MongoDB bouwen in Azure

Wat u leert:

Als u geen Azure-abonnement hebt, maakt u een gratis account voordat u begint.

Vereisten

Vereisten voor het voltooien van deze zelfstudie:

• Git installeren
• Node.js en NPM installeren

• Gebruik de bash-omgeving in Azure Cloud shell.

  

• Installeer de Azure CLI, indien gewenst, om CLI-referentieopdrachten uit te voeren.

  • Als u een lokale installatie gebruikt, meldt u zich aan bij Azure CLI met behulp van de opdracht AZ login. Volg de stappen die worden weergegeven in de terminal, om het verificatieproces te voltooien. Raadpleeg Aanmelden bij de Azure CLI voor aanvullende aanmeldingsopties.

  • Installeer de Azure CLI-extensie bij het eerste gebruik, wanneer u hierom wordt gevraagd. Raadpleeg Extensies gebruiken met Azure CLI voor meer informatie over extensies.

  • Voer az version uit om de geïnstalleerde versie en afhankelijke bibliotheken te vinden. Voer az upgrade uit om te upgraden naar de nieuwste versie.

Lokale Node.js-app maken

In deze stap stelt u het lokale Node.js-project in.

De voorbeeldtoepassing klonen

Voer in het terminalvenster de opdracht cd naar een werkmap uit.

Voer de volgende opdracht uit om de voorbeeldopslagplaats te klonen.

git clone https://github.com/Azure-Samples/mean-todoapp.git

De toepassing uitvoeren

Voer de volgende opdrachten uit om de vereiste pakketten te installeren en de toepassing te starten.

cd mean-todoapp
npm install
node app.js --alter

Wanneer de app volledig is geladen, ziet u een bericht zoals dit:

debug: -------------------------------------------------------
debug: :: Fri Jul 09 2021 13:10:34 GMT+0200 (Central European Summer Time)

debug: Environment : development
debug: Port        : 1337
debug: -------------------------------------------------------

Ga naar http://localhost:1337 in een browser. Voeg enkele todo-items toe.

De MEAN-voorbeeldtoepassing slaat gebruikersgegevens op in de database. Standaard wordt een op schijf gebaseerde ontwikkelingsdatabase gebruikt. Als u todo-items kunt maken en zien, leest en schrijft uw app gegevens.

Als u Node.js wilt stoppen, drukt u in de terminal op Ctrl+C.

Productie-MongoDB maken

In deze stap maakt u een MongoDB-database in Azure. Als de app is geïmplementeerd in Azure, wordt deze cloud-database gebruikt.

Voor MongoDB wordt in deze zelfstudie gebruikgemaakt van Azure Cosmos DB. Cosmos DB ondersteunt MongoDB-clientverbindingen.

Een resourcegroep maken

Een resourcegroep is een logische container waarin Azure-resources, zoals web-apps, databases en opslagaccounts, worden geïmplementeerd en beheerd. U kunt bijvoorbeeld later de hele resourcegroep in één stap verwijderen.

Maak een resourcegroep in Cloud Shell met de opdracht az group create. In het volgende voorbeeld wordt een resourcegroep met de naam myResourceGroup gemaakt op de locatie Europa - west. Als u alle ondersteunde locaties voor App Service in de Gratis laag wilt zien, voert u de opdracht az appservice list-locations --sku FREE uit.

az group create --name myResourceGroup --location "West Europe"

In het algemeen maakt u een resourcegroep en resources in een regio bij u in de buurt.

Wanneer de opdracht is voltooid, laat een JSON-uitvoer u de eigenschappen van de resource-groep zien.

Cosmos DB-account maken

Maak in Cloud Shell een Cosmos DB-account met de opdracht az cosmosdb create.

Vervang in de volgende opdracht de tijdelijke aanduiding <cosmosdb-name> door een unieke Cosmos DB-naam. Deze naam wordt gebruikt als onderdeel van het Cosmos DB-eindpunt, https://<cosmosdb-name>.documents.azure.com/. De naam moet dus uniek zijn voor alle Cosmos DB-accounts in Azure. De naam mag alleen kleine letters, cijfers en het afbreekstreepje (-) bevatten, en moet tussen de 3 en 50 tekens lang zijn.

az cosmosdb create --name <cosmosdb-name> --resource-group myResourceGroup --kind MongoDB

De parameter --kind MongoDB maakt MongoDB-clientverbindingen mogelijk.

Wanneer het Cosmos DB-account wordt gemaakt toont de Azure CLI informatie die lijkt op het volgende voorbeeld:

{
  "apiProperties": {
    "serverVersion": "3.6"
  },
  "backupPolicy": {
    "periodicModeProperties": {
      "backupIntervalInMinutes": 240,
      "backupRetentionIntervalInHours": 8,
      "backupStorageRedundancy": "Geo"
    },
    "type": "Periodic"
  },
  "capabilities": [
    {
      "name": "EnableMongo"
    }
  ],
  "connectorOffer": null,
  "consistencyPolicy": {
    "defaultConsistencyLevel": "Session",
    "maxIntervalInSeconds": 5,
    "maxStalenessPrefix": 100
  },
  "cors": [],
  "databaseAccountOfferType": "Standard",
  "defaultIdentity": "FirstPartyIdentity",
  "disableKeyBasedMetadataWriteAccess": false,
  "documentEndpoint": "https://<cosmosdb-name>.documents.azure.com:443/",
  ...
  < Output truncated for readability >
}

App verbinden met productie-MongoDB

In deze stap verbindt u uw voorbeeldtoepassing met de Cosmos DB database die u zojuist hebt gemaakt, met behulp van een MongoDB-connection string.

De databasesleutel ophalen

U hebt de databasesleutel nodig om verbinding te kunnen maken met de Cosmos DB-database. Gebruik in Cloud Shell de opdracht az cosmosdb keys list om de primaire sleutel op te halen.

az cosmosdb keys list --name <cosmosdb-name> --resource-group myResourceGroup

De Azure CLI toont informatie die lijkt op het volgende voorbeeld:

{
  "primaryMasterKey": "RS4CmUwzGRASJPMoc0kiEvdnKmxyRILC9BWisAYh3Hq4zBYKr0XQiSE4pqx3UchBeO4QRCzUt1i7w0rOkitoJw==",
  "primaryReadonlyMasterKey": "HvitsjIYz8TwRmIuPEUAALRwqgKOzJUjW22wPL2U8zoMVhGvregBkBk9LdMTxqBgDETSq7obbwZtdeFY7hElTg==",
  "secondaryMasterKey": "Lu9aeZTiXU4PjuuyGBbvS1N9IRG3oegIrIh95U6VOstf9bJiiIpw3IfwSUgQWSEYM3VeEyrhHJ4rn3Ci0vuFqA==",
  "secondaryReadonlyMasterKey": "LpsCicpVZqHRy7qbMgrzbRKjbYCwCKPQRl0QpgReAOxMcggTvxJFA94fTi0oQ7xtxpftTJcXkjTirQ0pT7QFrQ=="
}

Kopieer de waarde van primaryMasterKey. U hebt deze informatie nodig voor de volgende stap.

De connection string configureren in uw voorbeeldtoepassing

Vervang in uw lokale opslagplaats in config/datastores.js de bestaande inhoud door de volgende code en sla uw wijzigingen op.

module.exports.datastores = {
  default: {
    adapter: 'sails-mongo',
    url: process.env.MONGODB_URI,
    ssl: true,
  },
};

De ssl: true optie is vereist omdat Cosmos DB TLS/SSL vereist. url is ingesteld op een omgevingsvariabele, die u vervolgens gaat instellen.

Stel in de terminal de MONGODB_URI omgevingsvariabele in. Vervang de twee tijdelijke aanduidingen <cosmosdb-name> door de naam van de Cosmos DB-database en vervang de tijdelijke aanduiding <cosmosdb-key> door de sleutel die u in de vorige stap hebt gekopieerd.

export MONGODB_URI=mongodb://<cosmosdb-name>:<cosmosdb-key>@<cosmosdb-name>.documents.azure.com:10250/todoapp

De toepassing testen met MongoDB

Voer opnieuw uit in een lokaal node app.js --alter terminalvenster.

node app.js --alter

Ga opnieuw naar http://localhost:1337. Als u todo-items kunt maken en zien, leest en schrijft uw app gegevens met behulp van Cosmos DB database in Azure.

Stop Node.js door in het terminalvenster Ctrl+C te typen.

App in Azure implementeren

In deze step implementeert u uw met MongoDB verbonden Node.js-toepassing in Azure App Service.

Een implementatiegebruiker configureren

FTP en lokale Git kunnen worden geïmplementeerd in een Azure-web-app met behulp van een implementatiegebruikers. Zodra u deze implementatiegebruiker hebt gemaakt, kunt u deze voor al uw Azure-implementaties gebruiken. Uw gebruikersnaam en wachtwoord voor implementatie op accountniveau verschillen van de referenties voor uw Azure-abonnement.

Als u de implementatiegebruiker wilt configureren, voert u de opdracht az webapp deployment user set uit in Azure Cloud Shell. Vervang <username> en <password> door de gebruikersnaam en het wachtwoord van de gebruiker van de implementatie.

• De gebruikersnaam moet uniek zijn binnen Azure en voor lokale Git-pushes en mag het symbool '@' niet bevatten.
• Het wachtwoord moet ten minste acht tekens lang zijn en minimaal twee van de volgende drie typen elementen bevatten: letters, cijfers en symbolen.

az webapp deployment user set --user-name <username> --password <password>

De JSON-uitvoer toont het wachtwoord als null. Als er een 'Conflict'. Details: 409-fout optreedt, wijzigt u de gebruikersnaam. Als er een 'Bad Request'. Details: 400-fout optreedt, kiest u een sterker wachtwoord.

Noteer uw gebruikersnaam en wachtwoord om te gebruiken bij het implementeren van uw web-apps.

Een App Service-plan maken

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku B1

{ 
  "freeOfferExpirationTime": null,
  "geoRegion": "UK West",
  "hostingEnvironmentProfile": null,
  "hyperV": false,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "isSpot": false,
  "isXenon": false,
  "kind": "app",
  "location": "ukwest",
  "maximumElasticWorkerCount": 1,
  "maximumNumberOfWorkers": 0,
  < JSON data removed for brevity. >
} 

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku B1 --is-linux

{ 
  "freeOfferExpirationTime": null,
  "geoRegion": "West Europe",
  "hostingEnvironmentProfile": null,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "kind": "linux",
  "location": "West Europe",
  "maximumNumberOfWorkers": 1,
  "name": "myAppServicePlan",
  < JSON data removed for brevity. >
  "targetWorkerSizeId": 0,
  "type": "Microsoft.Web/serverfarms",
  "workerTierName": null
} 

Een webtoepassing maken

az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime 'NODE|14-lts' --deployment-local-git

Local git is configured with url of 'https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git'
{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app-name>.azurewebsites.net",
  "deploymentLocalGitUrl": "https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git",
  "enabled": true,
  < JSON data removed for brevity. >
}

az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime 'NODE|14-lts' --deployment-local-git

Local git is configured with url of 'https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git'
{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "clientCertExclusionPaths": null,
  "clientCertMode": "Required",
  "cloningInfo": null,
  "containerSize": 0,
  "customDomainVerificationId": "54184270DF7B3B4BF30221B6303E789C324E4783C8DF1FBAA3D111FC72328CE9",
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app-name>.azurewebsites.net",
  "deploymentLocalGitUrl": "https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git",
  "enabled": true,
  < JSON data removed for brevity. >
}

Een omgevingsvariabele configureren

De voorbeeldtoepassing is al geconfigureerd voor het gebruik van de MONGODB_URI omgevingsvariabele in config/datastores.js . In App Service injecteert u deze variabele met behulp van een app-instelling.

Gebruik de opdracht az webapp config appsettings set in Cloud Shell om de app-instellingen te definiëren.

In het volgende voorbeeld wordt de app-instelling MONGODB_URI in de Azure-app geconfigureerd. Vervang de tijdelijke aanduidingen <app-name> , <cosmosdb-name> en <cosmosdb-key> .

az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings MONGODB_URI='mongodb://<cosmosdb-name>:<cosmosdb-key>@<cosmosdb-name>.documents.azure.com:10250/todoapp' DEPLOYMENT_BRANCH='main'

Pushen naar Azure vanaf Git

1. Omdat u de vertakking implementeert, moet u de standaardimplementatievertakking voor uw main App Service-app instellen main op (zie Implementatievertakking wijzigen). Stel in Cloud Shell DEPLOYMENT_BRANCH app-instelling in met de opdracht az webapp config appsettings set .

   az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings DEPLOYMENT_BRANCH='main'
   

2. Voeg, eenmaal terug in het lokale terminalvenster, een externe Azure-instantie toe aan uw lokale Git-opslagplaats. Vervang <deploymentLocalGitUrl-from-create-step> door de URL van de externe Git-instantie die u hebt opgeslagen bij Een web-app maken.

   git remote add azure <deploymentLocalGitUrl-from-create-step>
   

3. Push naar de externe Azure-instantie om uw app te implementeren met de volgende opdracht. Wanneer Git Credential Manager u om referenties vraagt, geeft u de referenties op die u hebt gemaakt in Een implementatiegebruiker configureren, en niet de referenties die u gebruikt om u aan te melden bij de Azure-portal.

   git push azure main
   

   Het kan enkele minuten duren voor deze opdracht is uitgevoerd. De opdracht geeft informatie weer die lijkt op het volgende voorbeeld:

Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 8 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 318 bytes | 318.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Updating branch 'main'.
remote: Updating submodules.
remote: Preparing deployment for commit id '4eb0ca7190'.
remote: Generating deployment script.
remote: Running deployment command...
remote: Handling node.js deployment.
remote: Creating app_offline.htm
remote: KuduSync.NET from: 'D:\home\site\repository' to: 'D:\home\site\wwwroot'
remote: Copying file: 'package.json'
remote: Deleting app_offline.htm
remote: Looking for app.js/server.js under site root.
remote: Using start-up script app.js
remote: Generated web.config.
.
.
.
remote: Deployment successful.
To https://<app-name>.scm.azurewebsites.net/<app-name>.git
 * [new branch]      main -> main

Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 8 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 347 bytes | 347.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Deploy Async
remote: Updating branch 'main'.
remote: Updating submodules.
remote: Preparing deployment for commit id 'f776be774a'.
remote: Repository path is /home/site/repository
remote: Running oryx build...
remote: Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
remote: You can report issues at https://github.com/Microsoft/Oryx/issues
remote: 
remote: Oryx Version: 0.2.20210420.1, Commit: 85c6e9278aae3980b86cb1d520aaad532c814ed7, ReleaseTagName: 20210420.1
remote: 
remote: Build Operation ID: |qwejn9R4StI=.5e8a3529_
remote: Repository Commit : f776be774a3ea8abc48e5ee2b5132c037a636f73
.
.
.
remote: Deployment successful.
remote: Deployment Logs : 'https://<app-name>.scm.azurewebsites.net/newui/jsonviewer?view_url=/api/deployments/a6fcf811136739f145e0de3be82ff195bca7a68b/log'
To https://<app-name>.scm.azurewebsites.net/<app-name>.git
   4f7e3ac..a6fcf81  main -> main

Naar de Azure-app bladeren

Blader in de webbrowser naar de geïmplementeerde app.

https://<app-name>.azurewebsites.net 

Als u todo-items in de browser kunt maken en bekijken, heeft uw voorbeeld-app in Azure verbinding met de MongoDB-database (Cosmos DB).

Gefeliciteerd! U voert een gegevensgestuurde Node.js-app uit in Azure App Service.

Gegevensmodel bijwerken en opnieuw implementeren

In deze stap wijzigt u het Todo-gegevensmodel en publiceert u de wijziging in Azure.

Het model aan de serverzijde bijwerken

In Sails.js is het wijzigen van het model aan de serverzijde en API-code net zo eenvoudig als het wijzigen van het gegevensmodel, omdatSails.js standaard al de algemene routes voor een model definieert.

Open api/models/Todo.js en voeg een kenmerk toe in uw lokale done opslagplaats. Als u klaar bent, ziet het schema er als volgt uit:

module.exports = {

  attributes: {
    value: {type: 'string'},
    done: {type: 'boolean', defaultsTo: false}
  },

};

De clientcode bijwerken

Er zijn drie bestanden die u moet wijzigen: het clientmodel, de HTML-sjabloon en het onderdeelbestand.

Open client/src/app/todo.ts en voeg een eigenschap done toe. Wanneer u klaar bent, ziet uw model er als volgende uit:

export class Todo {
    id!: String;
    value!: String;
    done!: Boolean;
}

Open client/src/app/app.component.html. Voeg net boven het enige element de volgende code toe om een selectievakje aan het begin van elk <span> todo-item toe te voegen:

<input class="form-check-input me-2" type="checkbox" [checked]="todo.done" (click)="toggleDone(todo.id, i)" [disabled]="isProcessing">

Open client/src/app/app.component.ts. Net boven de laatste afsluitende accolade ( } ), voegt u de volgende methode in. Deze wordt aangeroepen door de bovenstaande sjablooncode wanneer op het selectievakje wordt geklikt en de gegevens aan de serverzijde worden bijgewerkt.

toggleDone(id:any, i:any) {
  console.log("Toggled checkbox for " + id);
  this.isProcessing = true;
  this.Todos[i].done = !this.Todos[i].done;
  this.restService.updateTodo(id, this.Todos[i])
  .subscribe((res) => {
      console.log('Data updated successfully!');
      this.isProcessing = false;
    }, (err) => {
      console.log(err);
      this.Todos[i].done = !this.Todos[i].done;
  });
}

De wijzigingen lokaal testen

Compileer in het lokale terminalvenster de bijgewerkte Angular-clientcode met het buildscript dat is gedefinieerd in package.json .

npm run build

Test uw wijzigingen opnieuw node app.js --alter met . Omdat u het model aan de serverzijde hebt gewijzigd, kunt u met de vlag de gegevensstructuur in uw database --alter Sails.js Cosmos DB wijzigen.

node app.js --alter

Navigeer naar http://localhost:1337. U ziet nu een selectievakje vóór het todo-item. Wanneer u een selectievakje in- of uitcheckt, wordt Cosmos DB database in Azure bijgewerkt om aan te geven dat het todo-item is uitgevoerd.

Stop Node.js door in het terminalvenster Ctrl+C te typen.

Wijzigingen publiceren in Azure

Leg in het lokale terminalvenster uw wijzigingen vast in Git en push de codewijzigingen naar Azure.

git commit -am "added done field"
git push azure main

Zodra git push is voltooid, gaat u naar de Azure-app en probeert u de nieuwe functionaliteit uit.

Als u eerder artikelen hebt toegevoegd, kunt u deze nog steeds zien. Bestaande gegevens in Cosmos DB zijn nog aanwezig. En uw updates aan het gegevensschema zijn nog intact.

Diagnostische logboeken streamen

az webapp log tail --name <app-name> --resource-group myResourceGroup

az webapp log config --resource-group <resource-group-name> --name <app-name> --docker-container-logging filesystem --level Verbose

az webapp log tail --resource-group <resource-group-name> --name <app-name>

Uw Azure-app beheren

Ga naar de Azure-portal om de app te zien die u hebt gemaakt.

Klik in het linkermenu op App Services en klik op de naam van uw Azure-app.

In de portal wordt standaard de pagina Overzicht van de app weergegeven. Deze pagina geeft u een overzicht van hoe uw app presteert. Hier kunt u ook algemene beheertaken uitvoeren, zoals bladeren, stoppen, starten, opnieuw opstarten en verwijderen. De tabbladen aan de linkerkant van de pagina tonen de verschillende configuratiepagina's die u kunt openen.

Resources opschonen

In de voorgaande stappen hebt u Azure-resources in een resourcegroep gemaakt. Als u deze resources niet meer nodig denkt te hebben, verwijdert u de resourcegroep door de volgende opdracht in Cloud Shell uit te voeren:

az group delete --name myResourceGroup

Het kan een minuut duren voordat deze opdracht is uitgevoerd.

Volgende stappen

Wat u hebt geleerd:

Ga door naar de volgende zelfstudie om te leren hoe u een aangepaste DNS-naam aan een web-app kunt toewijzen.

U kunt ook andere resources bekijken:

• Node.js-app configureren
• Naslag voor omgevingsvariabelen en app-instellingen