Cvičení – integrace webové aplikace Next.js s datovým kanálem IoT

  • 20 min

Toto cvičení poskytuje přehled integrace Next.js s datovým kanálem IoT.

V tomto cvičení:

  • Nakonfigurujte Next.js aplikaci.
  • Nasaďte webovou aplikaci Azure hostující Next.js aplikaci.
  • Ověřte funkčnost webové aplikace Azure.

Požadavky

K provedení tohoto cvičení potřebujete:

  • Předplatné Azure.
  • Účet Microsoft nebo účet Microsoft Entra s rolí Globální Správa istrator v tenantovi Microsoft Entra. Tenant musí být přidružený k předplatnému Azure a k roli vlastníka nebo přispěvatele v předplatném Azure.
  • Pokud chcete dokončit lekce cvičení, nastavte službu Azure Cosmos DB a integrujte službu Azure Cosmos DB s datovým kanálem IoT.

V tomto cvičení použijete existující kód aplikace Next.js, který načte telemetrická data IoT z kolekce Cosmos DB, kterou jste implementovali v předchozí lekci cvičení tohoto modulu.

Konfigurace aplikace Next.js

Nakonfigurujte ukázkovou Next.js aplikaci, která načítá data z kolekce Cosmos DB.

  1. Spusťte webový prohlížeč, přejděte na web Azure Portal a přihlaste se k předplatnému Azure, které používáte pro tento modul.

  2. Na webu Azure Portal na panelu nástrojů vyberte ikonu Cloud Shellu , která se nachází vedle vyhledávacího pole.

    Poznámka:

    Alternativně můžete přistupovat ke Cloud Shellu přímo tak, že přejdete na https://shell.azure.com.

  3. Pokud se zobrazí výzva k výběru bashe nebo PowerShellu, vyberte Bash.

    Poznámka:

    Pokud spustíte Cloud Shell poprvé a zobrazí se zpráva Nemáte připojené úložiště, vyberte předplatné, které v tomto cvičení používáte, a pak vyberte Vytvořit úložiště.

  4. Spuštěním následujícího příkazu naklonujte úložiště GitHub obsahující ukázkový kód aplikace Next.js pro toto cvičení.

    git clone https://github.com/MicrosoftDocs/mslearn-cloud-native-apps.git

  5. Spuštěním následujícího příkazu přepněte do adresáře obsahujícího klon úložiště GitHub.

    cd ./mslearn-cloud-native-apps/m05u08/

  6. Spuštěním následujícího příkazu zobrazte obsah souboru index.js . Tento soubor obsahuje Next.js skript, který vytvoří připojení k účtu Cosmos DB, který jste vytvořili v prvním cvičení tohoto modulu. Dotazuje se také na obsah iotcollection v databázi iotdb , kterou jste vytvořili v druhém cvičení tohoto modulu.

    cat ./pages/index.js

  7. Spuštěním následujícího příkazu zobrazte obsah souboru config.js . Tento soubor ukládá hodnoty představující koncový bod rozhraní SQL API služby Cosmos DB. Uloží také odpovídající přístupový klíč a cílovou databázi a kontejner hostující data IoT, která jste shromáždili v předchozím cvičení tohoto modulu.

    cat ./config.js

    Poznámka:

    Názvy databáze a kontejneru jsou už předem vyplněné. Dále nastavíte hodnoty koncového bodu a odpovídající přístupový klíč.

  8. Spuštěním následujících příkazů načtěte hodnoty koncového bodu rozhraní SQL API služby Cosmos DB a odpovídající přístupový klíč a uložte je do dočasných proměnných.

    RG1NAME=cosmos-db-RG
ACCOUNTNAME=$(az cosmosdb list --resource-group $RG1NAME --query "[0].name" --output tsv)
ENDPOINT=$(az cosmosdb show --name $ACCOUNTNAME --resource-group $RG1NAME --query "locations[0].documentEndpoint" --output tsv)
KEY=$(az cosmosdb keys list --name $ACCOUNTNAME --resource-group $RG1NAME --query "primaryMasterKey" --output tsv)

  9. V relaci Bash v podokně Cloud Shell spusťte následující příkazy, které nahradí zástupné symboly v souboru config.js hodnotami, které jste získali v předchozím kroku.

     ENDPOINT="$(echo $ENDPOINT | sed -e 's/\\/\\\\/g; s/\//\\\//g; s/&/\\\&/g')"
 sed -i 's/"COSMOS_DB_SQL_API_ENDPOINT"/"'"$ENDPOINT"'"/' ./config.js

 KEY="$(echo $KEY | sed -e 's/\\/\\\\/g; s/\//\\\//g; s/&/\\\&/g')"
 sed -i 's/"COSMOS_DB_ACCESS_KEY"/"'"$KEY"'"/' ./config.js

  10. V relaci Bash v podokně Cloud Shell spuštěním následujícího příkazu ověřte, že soubor config.js obsahuje skutečné hodnoty koncového bodu rozhraní SQL API služby Cosmos DB a odpovídající přístupový klíč.

    cat ./config.js

    Poznámka:

    V tomto okamžiku byste měli vědět více o tom, jak nainstalovat balíčky závislostí a sestavit aplikaci. Kvůli problémům s správou verzí nebudete moct spustit sestavení v Azure Cloud Shellu. Místo toho provedete tuto úlohu po nasazení.

Nasazení webové aplikace Azure hostující Next.js aplikaci

Nasaďte nově nakonfigurovanou aplikaci Next.js do webové aplikace Azure a ověřte její funkčnost.

Poznámka:

Stejnou aplikaci můžete nasadit do jakékoli jiné služby Azure, která poskytuje prostředí runtime Node.js, včetně služeb Azure Virtual Machines, Azure Container Instances nebo Azure Kubernetes Service.

  1. Spuštěním následujících příkazů v Azure Cloud Shellu vytvořte skupinu prostředků pro hostování webové aplikace Azure, do které nasadíte Next.js aplikaci.

    RG1NAME=cosmos-db-RG
LOCATION=$(az group show --resource-group $RG1NAME --query location --output tsv)
RG2NAME=nextjs-webapp-RG
az group create --name $RG2NAME --location $LOCATION

  2. Spuštěním následujících příkazů vytvořte plán služby Aplikace Azure, který hostuje novou webovou aplikaci Azure.

    SPNAME=nextjs-webapp-sp
az appservice plan create --name $SPNAME --resource-group $RG2NAME --sku S1

  3. Spuštěním následujících příkazů vytvořte novou webovou aplikaci Azure.

    WEBAPPNAME=nextjs$RANDOM$RANDOM
az webapp create --name $WEBAPPNAME --resource-group $RG2NAME --plan $SPNAME

  4. Spuštěním následujících příkazů znovu inicializujete místní úložiště Git a potvrdíte všechny změny v hlavní větvi.

    git config --global user.email "user1@adatum.com"
git config --global user.name "Adatum User"
git init
git add -A
git commit -m "Initial Commit"

  5. Spuštěním následujících příkazů nastavte přihlašovací údaje nasazení na úrovni uživatele.

    DEPLOYMENTUSER=m05u08User$RANDOM
DEPLOYMENTPASS=m05u08Pass$RANDOM$RANDOM
az webapp deployment user set --user-name $DEPLOYMENTUSER --password $DEPLOYMENTPASS

  6. Spuštěním následujících příkazů identifikujte přihlašovací údaje nasazení na úrovni uživatele. Nezapomeňte zaznamenat jejich hodnotu, protože je budete potřebovat později v tomto cvičení.

    echo $DEPLOYMENTUSER
echo $DEPLOYMENTPASS

  7. Spuštěním následujících příkazů identifikujte adresu URL nasazení webové aplikace Azure, kterou používáte jako cíl git push příkazu.

    RG2NAME=nextjs-webapp-RG
WEBAPPNAME=$(az webapp list --resource-group $RG2NAME --query "[0].name" --output tsv)

DEPLOYMENTURL=$(az webapp deployment source config-local-git --name $WEBAPPNAME --resource-group $RG2NAME --output tsv)

  8. Spuštěním následujícího příkazu nakonfigurujte vzdálené úložiště s názvem Azure, které představuje adresu URL nasazení, kterou jste identifikovali v předchozím kroku.

    git remote add azure $DEPLOYMENTURL

  9. Spuštěním následujících příkazů vytvořte hlavní větev založenou na hlavní větvi a nasdílejte její obsah do webové aplikace Azure. Zobrazí se výzva k zadání hesla, které je součástí přihlašovacích údajů pro nasazení na úrovni uživatele, které jste si poznamenali dříve.

    git checkout -b master
git push --set-upstream azure master

    Poznámka:

    Počkejte, až se nasazení dokončí. Měla by se zobrazit zpráva s oznámením, že nasazení bylo úspěšné.

  10. Zavřete podokno Cloud Shellu.

Ověření funkčnosti webové aplikace Azure

Ověřte funkčnost webové aplikace Azure hostující Next.js aplikaci.

  1. V okně webového prohlížeče zobrazujícího Azure Portal použijte textové pole Hledat prostředky, služby a dokumenty v horní části stránky webu Azure Portal a vyhledejte App Services.

  2. V podokně App Services v seznamu instancí služby App Service vyberte položku představující webovou aplikaci Azure, kterou jste nasadili v předchozím úkolu tohoto cvičení. Název by se měl skládat z předpony nextjs následované řetězcem číslic.

  3. V podokně zobrazující vlastnosti webové aplikace v části Vývojové nástroje vyberte položku Editor služby App Service (Preview). Pak vyberte Otevřít editor.

  4. Vyberte ikonu Otevřít konzolu.

  5. Na příkazovém řádku konzoly spusťte následující příkaz.

    npm run build

  6. Tento příkaz sestaví Next.js aplikaci, kterou jste odeslali do webové aplikace Azure.

    Screenshot of the start of the build process in the App Service Editor console of the Azure web app.

  7. Počkejte na dokončení procesu sestavení. Tento proces může trvat asi 5 minut.

    Screenshot of the completed build process in the App Service Editor console of the Azure web app.

  8. Zavřete kartu webového prohlížeče pro stránku Editor služby App Service.

  9. V podokně Webové aplikace vyberte Přehled. V podokně Základy vyberte odkaz označenou adresu URL.

    Poznámka:

    Otevře se nová karta webového prohlížeče, která zobrazí webovou aplikaci Azure.

  10. Ověřte, že se na stránce webového prohlížeče zobrazí stránka Next.js – Telemetrická data IoT služby Cosmos DB se seznamem datových bodů telemetrie IoT načtených z kolekce Azure Cosmos DB.

    Screenshot of the page of the deployed Azure web app containing the listing of the Azure Cosmos DB items.

Výsledky

Gratulujeme! Dokončili jste třetí cvičení tohoto modulu. V tomto cvičení jste vytvořili funkci Azure, která protokoluje datovou část požadavku HTTP. Pak jste nakonfigurovali a ověřili pravidla telemetrie IoT aplikace Azure IoT Central. Nakonec jste vytvořili účet Azure Storage, který ukládá telemetrická data IoT, a nakonfiguruje a ověří export dat aplikace Azure IoT Central.

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

Abyste se vyhnuli zbytečným poplatkům za používání prostředků Azure, odstraňte skupiny prostředků cosmos-db-RG, nextjs-webapp-RG a function-app-RG , které jste vytvořili v tomto cvičení. Na webu Azure Portal přejděte do každé z těchto skupin prostředků a pak na panelu nástrojů vyberte položku Odstranit skupinu prostředků. Do textového pole ZADEJTE NÁZEV SKUPINY PROSTŘEDKŮ zadejte název skupiny prostředků a pak vyberte Odstranit.