Übung: Integrieren einer Next.js-Web-App in die IoT-Datenpipeline

  • 20 Minuten

Diese Übung bietet eine Übersicht über die Integration einer Next.js-App in eine IoT-Datenpipeline.

In dieser Übung führen Sie die folgenden Schritte aus:

  • Konfigurieren einer Next.js-Anwendung.
  • Bereitstellen einer Azure-Web-App, die die Next.js-Anwendung hostet.
  • Überprüfen Sie die Funktionalität der Azure-Web-App.

Voraussetzungen

Um diese Übung auszuführen, benötigen Sie Folgendes:

  • Ein Azure-Abonnement.
  • Ein Microsoft-Konto oder ein Microsoft Entra-Konto mit der Rolle „Globaler Admin“ im Microsoft Entra-Mandanten. Der Mandant muss mit dem Azure-Abonnement und mit der Rolle „Besitzer“ oder „Mitwirkender“ im Azure-Abonnement verbunden sein.
  • Zum Abschluss der Übungseinheiten Richten Sie Azure Cosmos DB ein und Integrieren Sie Azure Cosmos DB mit der IoT-Datenpipeline.

In dieser Übung verwenden Sie vorhandenen Next.js-Anwendungscode, der IoT-Telemetriedaten aus der Cosmos DB-Sammlung abruft, die Sie in der vorherigen Übungseinheit dieses Moduls implementiert haben.

Konfigurieren einer Next.js-Anwendung

Konfigurieren Sie eine Next.js-Beispielanwendung, die Daten aus einer Cosmos DB-Sammlung abruft.

  1. Starten Sie einen Webbrowser, navigieren Sie zum Azure-Portal, und melden Sie bei dem Azure-Abonnement an, das Sie für dieses Modul verwenden.

  2. Wählen Sie im Azure-Portal in der Symbolleiste das Symbol Cloud Shell neben dem Suchfeld aus.

    Hinweis

    Alternativ können Sie direkt auf Cloud Shell zugreifen, indem Sie zu https://shell.azure.com navigieren.

  3. Wählen Sie bei Aufforderung zur Auswahl von Bash oder PowerShell die Option Bash aus.

    Hinweis

    Wenn Sie Azure Cloud Shell zum ersten Mal starten und die Meldung You have no storage mounted (Es ist kein Speicher eingebunden) angezeigt wird, wählen Sie das Abonnement aus, das Sie in diesem Lab verwenden, und wählen Sie dann Create storage (Speicher erstellen) aus.

  4. Führen Sie den folgenden Befehl aus, um das GitHub-Repository zu klonen, das den Beispielcode der Next.js-Anwendung enthält, die Sie in dieser Übung verwenden werden.

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

  5. Führen Sie den folgenden Befehl aus, um in das Verzeichnis zu wechseln, das den Klon des GitHub-Repositorys enthält.

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

  6. Führen Sie den folgenden Befehl aus, um den Inhalt der Datei index.js anzuzeigen. Diese Datei enthält das Next.js-Skript, das eine Verbindung mit dem Cosmos DB-Konto herstellt, das Sie in der ersten Übung dieses Moduls erstellt haben. Es fragt auch den Inhalt der iotcollection in der iotdb-Datenbank ab, die Sie in der zweiten Übung dieses Moduls erstellt haben.

    cat ./pages/index.js

  7. Führen Sie den folgenden Befehl aus, um den Inhalt der Datei config.js anzuzeigen. In dieser Datei werden die Werte gespeichert, die den SQL-API-Endpunkt von Cosmos DB darstellen. Sie speichert auch den entsprechenden Zugriffsschlüssel sowie die Zieldatenbank und den Container darstellen, die die in der vorherigen Übung dieses Moduls erfassten IoT-Daten hosten.

    cat ./config.js

    Hinweis

    Die Namen der Datenbank und des Containers sind bereits vorausgefüllt. Nun legen Sie die Werte des Endpunkts und den entsprechenden Zugriffsschlüssel fest.

  8. Führen Sie die folgenden Befehle aus, um die Werte des SQL-API-Endpunkts von Cosmos DB und des entsprechenden Zugriffsschlüssels abzurufen, und speichern Sie diese dann in temporären Variablen.

    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. Führen Sie in der Bash-Sitzung im Bereich Cloud Shell die folgenden Befehle aus, um die Platzhalter in der Datei config.js durch die Werte zu ersetzen, die Sie im vorherigen Schritt abgerufen haben.

     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. Führen Sie in der Bash-Sitzung im Bereich Cloud Shell den folgenden Befehl aus, um zu überprüfen, ob die Datei config.js die tatsächlichen Werte des SQL-API-Endpunkts von Cosmos DB und den entsprechenden Zugriffsschlüssel enthält.

    cat ./config.js

    Hinweis

    An diesem Punkt sollten Sie mehr darüber wissen, wie Sie die Abhängigkeitspakete installieren und die Anwendung erstellen. Aufgrund von Versionsproblemen können Sie den Build nicht in Azure Cloud Shell ausführen. Stattdessen führen Sie diese Aufgabe nach der Bereitstellung aus.

Bereitstellen einer Azure-Web-App, die die Next.js-Anwendung hostet

Stellen Sie die neu konfigurierte Next.js-Anwendung in einer Azure-Web-App bereit, und überprüfen Sie deren Funktionalität.

Hinweis

Sie können dieselbe Anwendung für jeden anderen Azure-Dienst bereitstellen, der eine Node.js-Laufzeitumgebung bereitstellt, einschließlich Azure Virtual Machines, Azure Container Instances oder Azure Kubernetes Service.

  1. Führen Sie im Bereich Azure Cloud Shell die folgenden Befehle aus, um eine Ressourcengruppe zu erstellen, die die Azure-Web-App hostet, in der Sie die Next.js-Anwendung bereitstellen.

    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. Führen Sie die folgenden Befehle aus, um einen Azure App Service-Plan zu erstellen, der die neue Azure-Web-App hostet.

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

  3. Führen Sie die folgenden Befehle aus, um die neue Azure-Web-App zu erstellen.

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

  4. Führen Sie die folgenden Befehle aus, um das lokale Git-Repository erneut zu initialisieren und alle Änderungen im Mainbranch zu committen.

    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. Führen Sie die folgenden Befehle aus, um die Anmeldeinformationen für die Bereitstellung auf Benutzerebene einzurichten.

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

  6. Führen Sie die folgenden Befehle aus, um die Anmeldeinformationen für die Bereitstellung auf Benutzerebene zu identifizieren. Stellen Sie sicher, dass Sie ihre Werte aufzeichnen, da Sie sie später in dieser Übung benötigen.

    echo $DEPLOYMENTUSER
echo $DEPLOYMENTPASS

  7. Führen Sie die folgenden Befehle aus, um die Bereitstellungs-URL für die Azure-Web-App zu identifizieren, die Sie als Ziel des Befehls git push verwenden werden.

    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. Führen Sie den folgenden Befehl aus, um das Remoterepository mit dem Namen azure zu konfigurieren, das die Bereitstellungs-URL darstellt, die Sie im vorherigen Schritt identifiziert haben.

    git remote add azure $DEPLOYMENTURL

  9. Führen Sie die folgenden Befehle aus, um den master-Branch basierend auf dem Mainbranch zu erstellen und den Inhalt an die Azure-Web-App zu pushen. Sie werden aufgefordert, das Kennwort einzugeben, das Teil der Anmeldeinformationen für die Bereitstellung auf Benutzerebene ist, die Sie zuvor notiert haben.

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

    Hinweis

    Warten Sie, bis die Bereitstellung abgeschlossen ist. Sie sollten eine Meldung mit dem Hinweis erhalten, dass die Bereitstellung erfolgreich war.

  10. Schließen Sie den Cloud Shell-Bereich.

Überprüfen der Funktionalität der Azure-Web-App

Überprüfen Sie die Funktionalität der Azure-Web-App, die die Next.js-Anwendung hostet.

  1. Verwenden Sie im Webbrowserfenster, in dem das Azure-Portal angezeigt wird, das Textfeld Ressourcen, Dienste und Dokumente durchsuchen oben auf der Azure-Portalseite für die Suche nach App Services.

  2. Wählen Sie im Bereich App Services in der Liste der App Service-Instanzen den Eintrag aus, der die Azure-Web-App darstellt, die Sie in der vorherigen Aufgabe dieser Übung bereitgestellt haben. Der Name sollte aus dem Präfix Nextjs gefolgt von einer Zeichenfolge von Ziffern bestehen.

  3. Wählen Sie im Bereich mit den Eigenschaften der Web-App unter Entwicklungstools den Eintrag App Service-Editor (Vorschau) aus. Wählen Sie dann Editor öffnen aus.

  4. Wählen Sie das Symbol Konsole öffnen aus.

  5. Führen Sie in der Eingabeaufforderung der Konsole den folgenden Befehl aus.

    npm run build

  6. Mit diesem Befehl wird die Next.js-Anwendung erstellt, die Sie an die Azure-Web-App gepusht haben.

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

  7. Warten Sie, bis der Buildvorgang abgeschlossen wurde. Dieser Prozess kann etwa fünf Minuten dauern.

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

  8. Schließen Sie die Webbrowserregisterkarte mit der Seite App Service-Editor.

  9. Wählen Sie im Bereich der Web-App die Option Erstellen aus. Wählen Sie im Bereich Grundlagen den Link mit der Bezeichnung URLaus.

    Hinweis

    Eine neue Webbrowserregisterkarte mit der Azure-Web-App wird geöffnet.

  10. Stellen Sie sicher, dass auf der Webbrowserseite die Seite Next.js - Cosmos DB IoT-Telemetriedaten mit der Liste der IoT-Telemetriedatenpunkte angezeigt wird, die aus der Azure Cosmos DB-Sammlung abgerufen wurden.

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

Ergebnisse

Herzlichen Glückwunsch! Sie haben die dritte Übung dieses Moduls abgeschlossen. In dieser Übung haben Sie eine Azure-Funktion erstellt, die die Nutzdaten einer HTTP-Anforderung protokolliert. Dann haben Sie die IoT-Telemetrieregeln einer Azure IoT Central-Anwendung konfiguriert und überprüft. Abschließend haben Sie ein Azure Storage-Konto erstellt, das IoT-Telemetrie speichert und den Datenexport einer Azure IoT Central-Anwendung konfiguriert und überprüft.

Bereinigen der Ressourcen

Um unnötige Gebühren für die Verwendung von Azure-Ressourcen zu vermeiden, löschen Sie die Ressourcengruppen cosmos-db-RG, nextjs-webapp-RG und function-app-RG, die Sie in dieser Übung erstellt haben. Navigieren Sie im Azure-Portal zu jeder dieser Ressourcengruppen, und wählen Sie auf der Symbolleiste den Eintrag Ressourcengruppe löschen aus. Geben Sie im Textfeld GEBEN SIE DEN RESSOURCENGRUPPENNAMEN EIN den Namen der Ressourcengruppe ein, und klicken Sie dann auf Löschen.