Självstudie: Skapa en Node.js- och MongoDB-app i Azure

Detta får du får lära dig:

Om du inte har en Azure-prenumerationkan du skapa ett kostnads fritt konto innan du börjar.

Förutsättningar

För att slutföra den här kursen behöver du:

• Installera Git
• Installera Node.js och NPM

• Använd bash-miljön i Azure Cloud Shell.

  

• Om du vill kan du i stället installera Azure CLI för att köra CLI-referenskommandon.

  • Om du använder en lokal installation loggar du in på Azure CLI med hjälp av kommandot az login. Slutför autentiseringsprocessen genom att följa stegen som visas i terminalen. Fler inloggningsalternativ finns i Logga in med Azure CLI.

  • När du uppmanas till det installerar du Azure CLI-tillägg vid första användning. Mer information om tillägg finns i Använda tillägg med Azure CLI.

  • Kör az version om du vill hitta versionen och de beroende bibliotek som är installerade. Om du vill uppgradera till den senaste versionen kör du az upgrade.

Skapa lokal Node.js-app

I det här steget konfigurerar du det lokala Node.js-projektet.

Klona exempelprogrammet

Använd kommandot cd för att komma till en arbetskatalog i terminalfönstret.

Klona exempellagringsplatsen med följande kommando.

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

Kör programmet

Kör följande kommandon för att installera de nödvändiga paketen och starta programmet.

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

När appen har lästs in helt ser du något som liknar följande meddelande:

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

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

Gå till http://localhost:1337 i en webbläsare. Lägg till några att göra-objekt.

MEAN-exempelprogrammet lagrar användardata i databasen. Som standard använder den en diskbaserad utvecklingsdatabas. Om du kan skapa och se att göra-objekt läser och skriver appen data.

Du kan när som helst stoppa Node.js genom att trycka på Ctrl+C i terminalen.

Skapa produktions-MongoDB

I det här steget skapar du en MongoDB-databas i Azure. När appen har distribuerats till Azure används den här molndatabasen.

För MongoDB använder den här självstudien Azure Cosmos DB. Cosmos DB stöder MongoDB-klientanslutningar.

Skapa en resursgrupp

En resurs grupp är en logisk behållare där Azure-resurser, till exempel webbappar, databaser och lagrings konton, distribueras och hanteras. Du kan exempelvis välja att ta bort hela resursgruppen i ett enkelt steg längre fram.

I Cloud Shell skapar du en resurs grupp med az group create kommandot. I följande exempel skapas en resursgrupp med namnet myResourceGroup på platsen Europa, västra. Om du vill se alla platser som stöds för App Service på Kostnadsfri nivå, kör du kommandot az appservice list-locations --sku FREE.

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

Du skapar vanligtvis din resursgrupp och resurserna i en region nära dig.

När kommandot har slutförts visar JSON-utdata resursgruppens egenskaper.

Skapa ett Cosmos DB-konto

I Cloud Shell du ett Cosmos DB konto med az cosmosdb create kommandot .

I följande kommando ersätter du platshållaren Cosmos DB unika <cosmosdb-name> namn. Det här namnet används som en del av Cosmos DB-slutpunkten https://<cosmosdb-name>.documents.azure.com/, så namnet måste vara unikt för alla Cosmos DB-konton i Azure. Namnet får endast innehålla gemener, siffror och bindestreck och måste vara mellan 3 och 50 tecken långt.

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

Parametern --kind MongoDB aktiverar MongoDB-klientanslutningar.

När Cosmos DB-kontot har skapats, visar Azure CLI information liknande följande exempel:

{
  "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 >
}

Ansluta en app till produktions-MongoDB

I det här steget ansluter du exempelprogrammet till den Cosmos DB som du nyss skapade med hjälp av en MongoDB-anslutningssträng.

Hämta databasnyckeln

För att ansluta till en Cosmos DB-databas behöver du databasnyckeln. I Cloud Shell du kommandot az cosmosdb keys list för att hämta den primära nyckeln.

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

Azure CLI visar information som liknar följande exempel:

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

Kopiera värdet för primaryMasterKey. Du behöver den här informationen i nästa steg.

Konfigurera anslutningssträngen i exempelprogrammet

Ersätt det befintliga innehållet i config/datastores.js på din lokala lagringsplats med följande kod och spara ändringarna.

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

Alternativet ssl: true krävs eftersom du Cosmos DB TLS/SSL. url är inställt på en miljövariabel som du kommer att ange härnäst.

Ange miljövariabeln i MONGODB_URI terminalen. Ersätt de två platshållarna med namnet Cosmos DB databasen och ersätt platshållaren med den nyckel som du kopierade <cosmosdb-name> <cosmosdb-key> i föregående steg.

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

Testa programmet med MongoDB

Kör igen i ett lokalt node app.js --alter terminalfönster.

node app.js --alter

Navigera till http://localhost:1337 igen. Om du kan skapa och se att göra-objekt läser och skriver appen data med hjälp av Cosmos DB databasen i Azure.

I terminalen stoppar du Node.js genom att skriva Ctrl+C.

Distribuera app till Azure

I det här steget distribuerar du ditt MongoDB-anslutna Node.js-program till Azure App Service.

Konfigurera en distributionsanvändare

FTP och lokal Git kan distribuera till en Azure-webbapp med hjälp av en distributionsanvändare. När du har konfigurerat distributionsanvändaren kan du använda den för alla dina Azure-distributioner. Ditt användarnamn och lösenord för distribution på kontonivå skiljer sig från autentiseringsuppgifterna för din Azure-prenumeration.

Konfigurera distributionsanvändaren genom att köra kommandot az webapp deployment user set i Azure Cloud Shell. Ersätt <username> och med ett användarnamn och lösenord för <password> distributionsanvändaren.

• Användarnamnet måste vara unikt i Azure och för lokala Git-pushar får det inte innehålla @ symbolen .
• Lösenordet måste vara minst åtta tecken långt, med två av följande tre element: bokstäver, siffror och symboler.

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

JSON-utdata visar lösenordet som null . Om du ser felet 'Conflict'. Details: 409 ska du byta användarnamn. Om du ser felet 'Bad Request'. Details: 400 ska du använda ett starkare lösenord.

Registrera ditt användarnamn och lösenord som ska användas för att distribuera dina webbappar.

Skapa en App Service-plan

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
} 

Skapa en webbapp

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. >
}

Konfigurera en miljövariabel

Kom ihåg att exempelprogrammet redan har konfigurerats för att använda MONGODB_URI miljövariabeln i config/datastores.js . I App Service matar du in den här variabeln med hjälp av appinställningen.

Om du vill ange appinställningar använder az webapp config appsettings set du kommandot i Cloud Shell.

I följande exempel konfigureras appinställningen MONGODB_URI i Azure-appen. Ersätt <app-name> <cosmosdb-name> platshållarna , <cosmosdb-key> och .

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'

Skicka till Azure från Git

1. Eftersom du distribuerar -grenen måste du ange standarddistributionsgrenen för main din App Service-app main till (se Ändra distributionsgren). I Cloud Shell anger du DEPLOYMENT_BRANCH appinställningen med az webapp config appsettings set kommandot .

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

2. I det lokala terminalfönstret kan du lägga till en Azure-fjärrdatabas till din lokala Git-databas. Ersätt <deploymentLocalGitUrl-from-create-step> med URL:en för den Fjärranslutna Git som du sparade från Skapa en webbapp.

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

3. Skicka till Azure-fjärrdatabasen för att distribuera appen med följande kommando. När Git Autentiseringshanteraren uppmanar dig att ange autentiseringsuppgifter ska du se till att du anger de autentiseringsuppgifter som du skapade i Konfigurera en distributionsanvändare , inte de autentiseringsuppgifter som du använder för att logga in på Azure Portal.

   git push azure main
   

   Det kan ett par minuter att köra kommandot. Medan det körs visas information liknande den i följande exempel:

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

Bläddra till Azure-appen

Bläddra till den distribuerade appen i webbläsaren.

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

Om du kan skapa och se att göra-objekt i webbläsaren har exempelappen i Azure anslutning till MongoDB-databasen (Cosmos DB).

Grattis! Du kör en datadriven Node.js-app i Azure App Service.

Uppdatera datamodell och distribuera om

I det här steget ändrar du datamodellen Todo och publicerar din ändring i Azure.

Uppdatera modellen på serversidan

I Sails.js är det lika enkelt att ändra modell på serversidan och API-kod som att ändra datamodellen, eftersom Sails.js redan definierar de gemensamma vägarna för en modell som standard.

I din lokala lagringsplats öppnar du api/models/Todo.js och lägger till ett done attribut. När du är klar bör schemakoden se ut så här:

module.exports = {

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

};

Uppdatera klientkoden

Det finns tre filer som du behöver ändra: klientmodellen, HTML-mallen och komponentfilen.

Öppna client/src/app/todo.ts och lägg till en done egenskap. När du är klar ser modellvisningen ut så här:

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

Öppna client/src/app/app.component.html. Precis ovanför det enda <span> elementet lägger du till följande kod för att lägga till en kryssruta i början av varje att göra-objekt:

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

Öppna client/src/app/app.component.ts. Precis ovanför den sista avslutande kparentesen ( } ) infogar du följande metod. Den anropas av mallkoden ovan när kryssrutan klickas och uppdaterar data på serversidan.

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

Testa ändringarna lokalt

I det lokala terminalfönstret kompilerar du den uppdaterade Angular med det byggskript som definierats i package.json .

npm run build

Testa ändringarna med node app.js --alter igen. Eftersom du ändrade modellen på serversidan kan --alter -flaggan Sails.js ändra datastrukturen i din Cosmos DB databasen.

node app.js --alter

Navigera till http://localhost:1337. Nu bör du se en kryssruta framför att göra-objektet. När du markerar eller avmarkerar en kryssruta Cosmos DB databasen i Azure för att indikera att göra-objektet är klart.

I terminalen stoppar du Node.js genom att skriva Ctrl+C.

Publicera ändringar till Azure

I det lokala terminalfönstret sparar du ändringarna i Git och push-överför sedan kodändringarna till Azure.

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

När git push har slutförts kan du gå till Azure-appen och prova att använda de nya funktionerna.

Om du lade till några artiklar tidigare kan du fortfarande se dem. Befintliga data i din Cosmos DB förloras inte. Dina uppdateringar till dataschemat håller dessutom dina befintliga data intakta.

Strömma diagnostikloggar

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>

Hantera din Azure-app

Gå till Azure-portalen om du vill se den app du skapade.

Klicka på App Services på menyn till vänster och klicka sedan på din Azure-apps namn.

Portalen visar som standard dina webbappar på sidan Översikt. På den här sidan får du en översikt över hur det går för appen. Här kan du också utföra grundläggande hanteringsåtgärder som att bläddra, stoppa, starta, starta om och ta bort. På flikarna till vänster på sidan kan du se olika konfigurationssidor som du kan öppna.

Rensa resurser

I de föregående stegen skapade du Azure-resurser i en resursgrupp. Om du inte tror att du behöver dessa resurser i framtiden tar du bort resursgruppen genom att köra följande kommando i Cloud Shell:

az group delete --name myResourceGroup

Det kan några minuter att köra kommandot.

Nästa steg

Vad du lärt dig:

Gå vidare till nästa självstudie där du får lära dig att mappa ett anpassat DNS-namn till appen.

Eller så kan du kolla in andra resurser:

• Konfigurera Node.js-app
• Referens för miljövariabler och appinställningar