Kurz: Vytvoření aplikace Node.js a MongoDB v Azure

Naučíte se:

Pokud ještě nemáte předplatné Azure,vytvořte si bezplatný účet před tím, než začnete.

Požadavky

Pro absolvování tohoto kurzu potřebujete:

• Nainstalovat Git.
• Instalace Node.js a NPM

• V nástroji použijte prostředí Bash Azure Cloud Shell.

  

• Pokud tomu dáváte přednost, můžete nainstalovat Azure CLI a spouštět referenční příkazy CLI.

  • Pokud používáte místní instalaci, přihlaste se k Azure CLI pomocí příkazu az login. Pokud chcete dokončit proces ověřování, postupujte podle kroků zobrazených na terminálu. Další možnosti přihlášení jsou popsané v tématu Přihlášení pomocí Azure CLI.

  • Po zobrazení výzvy nainstalujte rozšíření Azure CLI při prvním použití. Další informace o rozšířeních najdete v tématu Využití rozšíření v Azure CLI.

  • Spuštěním příkazu az version zjistěte verzi a závislé knihovny, které jsou nainstalované. Pokud chcete upgradovat na nejnovější verzi, spusťte az upgrade.

Vytvoření místní aplikace Node.js

V tomto kroku nastavíte místní projekt Node.js.

Klonování ukázkové aplikace

V okně terminálu přejděte pomocí příkazu cd do pracovního adresáře.

Ukázkové úložiště naklonujete spuštěním následujícího příkazu.

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

Spuštění aplikace

Spuštěním následujících příkazů nainstalujte požadované balíčky a spusťte aplikaci.

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

Po úplném načtení aplikace se zobrazí zpráva podobná této:

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

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

V prohlížeči přejděte na http://localhost:1337. Přidejte několik položek todo.

STŘEDNÍ ukázková aplikace ukládá uživatelská data do databáze. Ve výchozím nastavení používá vývojovou databázi založenou na discích. Pokud můžete vytvořit a zobrazit položky ToDo, aplikace čte a zapisuje data.

Node.js můžete kdykoli zastavit stisknutím Ctrl+C v terminálu.

Vytvoření provozní databáze MongoDB

V tomto kroku vytvoříte databázi MongoDB v Azure. Po nasazení do Azure bude aplikace používat tuto cloudovou databázi.

Pro MongoDB tento kurz používá službu Azure Cosmos DB. Cosmos DB podporuje klientská připojení MongoDB.

Vytvoření skupiny prostředků

Skupina prostředků je logický kontejner, ve kterém se nasazují a spravují prostředky Azure, jako jsou webové aplikace, databáze a účty úložiště. Později se například můžete rozhodnout odstranit celou skupinu prostředků v jednom jednoduchém kroku.

V Cloud Shell vytvořte skupinu prostředků pomocí az group create příkazu. Následující příklad vytvoří skupinu prostředků myResourceGroup v umístění Západní Evropa. Pokud chcete zobrazit všechna podporovaná umístění pro službu App Service na úrovni Free, spusťte příkaz az appservice list-locations --sku FREE.

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

Obvykle budete svoji skupinu prostředků a prostředky vytvářet v oblasti, kterou máte blízko.

Po dokončení příkazu se ve výstupu JSON zobrazí vlastnosti skupiny prostředků.

Vytvoření účtu služby Cosmos DB

v Cloud Shell vytvořte účet Cosmos DB pomocí az cosmosdb create příkazu.

v následujícím příkazu nahraďte zástupný symbol jedinečným názvem Cosmos DB <cosmosdb-name> . Tento název se používá jako součást koncového bodu služby Cosmos DB (https://<cosmosdb-name>.documents.azure.com/), takže musí být jedinečný v rámci všech účtů služby Cosmos DB v Azure. Název smí obsahovat jen malá písmena, číslice a znak spojovníku (-) a musí mít délku 3 až 50 znaků.

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

Parametr --kind MongoDB umožňuje klientská připojení MongoDB.

Po vytvoření účtu služby Cosmos DB se v Azure CLI zobrazí podobné informace jako v následujícím příkladu:

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

Připojení aplikace k provozní databázi MongoDB

v tomto kroku připojíte ukázkovou aplikaci k databázi Cosmos DB, kterou jste právě vytvořili, pomocí připojovacího řetězce MongoDB.

Načtení klíče databáze

Aby bylo možné se připojit k databázi Cosmos DB, potřebujete klíč databáze. V Cloud Shell použijte az cosmosdb keys list příkaz k načtení primárního klíče.

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

V Azure CLI se zobrazí podobné informace jako v následujícím příkladu:

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

Zkopírujte hodnotu primaryMasterKey. Tyto informace budete potřebovat v dalším kroku.

Konfigurace připojovacího řetězce v ukázkové aplikaci

V místním úložišti v souboru config/datastores.js nahraďte stávající obsah následujícím kódem a uložte provedené změny.

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

tato ssl: true možnost je povinná, protože Cosmos DB vyžaduje protokol TLS/SSL. url je nastavená na proměnnou prostředí, která se nastaví jako další.

V terminálu nastavte MONGODB_URI proměnnou prostředí. nezapomeňte nahradit tyto dva <cosmosdb-name> zástupné symboly názvem vaší Cosmos DB databáze a zástupný symbol nahraďte <cosmosdb-key> klíčem, který jste zkopírovali v předchozím kroku.

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

Testování aplikace pomocí MongoDB

V okně místního terminálu spusťte node app.js --alter znovu.

node app.js --alter

Znovu přejděte na adresu http://localhost:1337. pokud můžete vytvořit a zobrazit položky todo, aplikace čte a zapisuje data pomocí Cosmos DB databáze v Azure.

V terminálu zastavte Node.js zadáním Ctrl+C.

Nasazení aplikace do Azure

V tomto kroku nasadíte svou aplikaci Node.js připojenou k databázi MongoDB do služby Azure App Service.

Konfigurace uživatele nasazení

FTP a místní Git se můžou nasadit do webové aplikace Azure pomocí uživatele nasazení. Jakmile nakonfigurujete uživatele nasazení, můžete ho použít pro všechna nasazení Azure. Uživatelské jméno a heslo nasazení na úrovni účtu se liší od přihlašovacích údajů předplatného Azure.

Pokud chcete nakonfigurovat uživatele nasazení, spusťte v Azure Cloud Shell příkaz AZ WebApp Deployment User set . Nahraďte <username> a <password> pomocí uživatelského jména a hesla pro nasazení.

• Uživatelské jméno musí být v rámci Azure jedinečné a pro místní nabízená oznámení Git nesmí obsahovat @ symbol.
• Heslo musí mít délku alespoň osm znaků a dva z následujících tří prvků: písmena, číslice a symboly.

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

Výstup JSON zobrazuje heslo jako null . Pokud se zobrazí chyba 'Conflict'. Details: 409, změňte uživatelské jméno. Pokud se zobrazí chyba 'Bad Request'. Details: 400, použijte silnější heslo.

Poznamenejte si uživatelské jméno a heslo, které chcete použít k nasazení webových aplikací.

Vytvoření plánu služby App Service

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
} 

Vytvoření webové aplikace

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

Konfigurace proměnné prostředí

Mějte na paměti, že ukázková aplikace je už nakonfigurovaná tak, aby používala MONGODB_URI proměnnou prostředí v config/datastores.js . V App Service vložíte tuto proměnnou pomocí nastavení aplikace.

Nastavení aplikace nastavíte pomocí az webapp config appsettings set příkazu v Cloud Shell.

Následující příklad nakonfiguruje MONGODB_URI nastavení aplikace v aplikaci Azure. Nahraďte <app-name> <cosmosdb-name> <cosmosdb-key> zástupné symboly, a.

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'

Přenos z Gitu do Azure

1. Vzhledem k tomu, že nasazujete větev , musíte nastavit výchozí větev nasazení pro vaši aplikaci App Service na (viz Změna main větve main nasazení). V Cloud Shell nastavte nastavení DEPLOYMENT_BRANCH aplikace pomocí az webapp config appsettings set příkazu .

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

2. Zpět v okně místního terminálu přidejte vzdálené úložiště Azure do místního úložiště Git. Nahraďte <deploymentLocalGitUrl-from-create-step> adresou URL vzdáleného úložiště Git, kterou jste si uložili v části Vytvoření webové aplikace.

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

3. Nasaďte aplikaci do vzdáleného úložiště Azure pomocí následujícího příkazu. Když vás Správce přihlašovacích údajů Git vyzve k zadání přihlašovacích údajů, nezapomeňte zadat přihlašovací údaje, které jste vytvořili v části Konfigurace uživatele nasazení, a ne přihlašovací údaje, které používáte pro přihlášení k Azure Portal.

   git push azure main
   

   Spuštění tohoto příkazu může trvat několik minut. Při spuštění příkaz zobrazí podobné informace jako v následujícím příkladu:

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

Přejít k aplikaci Azure

Přejděte do nasazené aplikace pomocí webového prohlížeče.

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

pokud v prohlížeči můžete vytvářet a zobrazovat položky todo, pak má ukázková aplikace v Azure připojení k databázi MongoDB (Cosmos DB).

Blahopřejeme! Používáte aplikaci Node.js řízenou daty ve službě Azure App Service.

Aktualizace datového modelu a opětovné nasazení

V tomto kroku změníte datový model Todo a publikujete provedené změny do Azure.

Aktualizace modelu na straně serveru

V Sails.js je změna modelu a kódu rozhraní API na straně serveru jednoduchá jako změna datového modelu, protožeSails.js už ve výchozím nastavení definovala společné trasy pro model.

V místním úložišti otevřete rozhraní API/modely/Todo.js a přidejte done atribut. Až skončíte, měl by váš kód schématu vypadat takto:

module.exports = {

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

};

Aktualizace klientského kódu

Existují tři soubory, které je třeba upravit: model klienta, šablona HTML a soubor součásti.

Otevřete Client/src/App/todo. TS a přidejte done vlastnost. Až to budete mít, váš model se zobrazí jako v tomto:

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

Otevřete Client/src/App/app.component.html. Těsně nad jediným <span> prvkem přidejte následující kód, který přidá zaškrtávací políčko na začátek každé položky ToDo:

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

Otevřete Client/src/App/App. Component. TS. Hned nad poslední pravou složenou závorku ( } ) vložte následující metodu. Je volána kódem šablony výše při kliknutí na zaškrtávací políčko a aktualizuje data na straně serveru.

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

Místní test provedených změn

v okně místního terminálu zkompilujte aktualizovaný kód klienta Angular pomocí skriptu sestavení definovaného v package.json .

npm run build

Otestujte provedené změny node app.js --alter znovu. vzhledem k tomu, že jste změnili model na straně serveru, --alter příznak umožňuje Sails.js změnit strukturu dat ve vaší databázi Cosmos DB.

node app.js --alter

Přejděte na adresu http://localhost:1337. Nyní by se měla zobrazit zaškrtávací políčko před položkou todo. když zaškrtnete nebo zrušíte zaškrtnutí políčka, aktualizuje se databáze Cosmos DB v Azure, aby označovala, že se položka todo dokončí.

V terminálu zastavte Node.js zadáním Ctrl+C.

Publikování změn v Azure

V místním okně terminálu potvrďte změny v Gitu a potom nasdílejte změny kódu do Azure.

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

Až git push to bude hotové, přejděte do aplikace Azure a vyzkoušejte nové funkce.

Pokud jste dříve přidali články, můžete je stále zobrazit. Stávající data ve službě Cosmos DB nebudou ztracena. Kromě toho vaše aktualizace ovlivňují schéma dat a nechávají existující data netknutá.

Streamování diagnostických protokolů

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>

Správa aplikace Azure

Pokud si chcete zobrazit aplikaci, kterou jste vytvořili, přejděte na Azure Portal .

V nabídce vlevo klikněte na App Services a pak klikněte na název aplikace Azure.

Ve výchozím nastavení se na portálu zobrazí stránka s přehledem vaší aplikace. Tato stránka poskytuje přehled, jak si vaše aplikace stojí. Tady můžete také provést základní úlohy správy, jako je procházení, zastavení, spuštění, restartování a odstranění. Karty na levé straně stránky obsahují různé stránky konfigurace, které můžete otevřít.

Vyčištění prostředků

V předchozích krocích jste vytvořili prostředky Azure ve skupině prostředků. Pokud předpokládáte, že už tyto prostředky nebudete potřebovat, odstraňte skupinu prostředků spuštěním následujícího příkazu ve službě Cloud Shell:

az group delete --name myResourceGroup

Spuštění tohoto příkazu může trvat přibližně minut.

Další kroky

Naučili jste se:

V dalším kurzu se dozvíte, jak namapovat na aplikaci vlastní název DNS.

Nebo si prohlédněte další zdroje informací:

• Konfigurace aplikace Node.js
• Reference k proměnným prostředí a nastavení aplikace