Oefening: Next.js web-app integreren met de IoT-gegevenspijplijn

  • 20 minuten

Deze oefening biedt een overzicht van het integreren van een Next.js met een IoT-gegevenspijplijn.

In deze oefening gaat u het volgende doen:

  • Een Next.js-toepassing configureren.
  • Implementeer een Azure-web-app die als host fungeert voor de Next.js-toepassing.
  • Controleer de functionaliteit van de Azure-web-app.

Vereisten

Als u deze oefening wilt uitvoeren, hebt u het volgende nodig:

  • Een Azure-abonnement.
  • Een Microsoft-account of een Microsoft Entra-account met de rol Global Beheer istrator in de Microsoft Entra-tenant. De tenant moet zijn gekoppeld aan het Azure-abonnement en aan de rol Eigenaar of Inzender in het Azure-abonnement.
  • Als u de oefeningseenheden wilt voltooien, stelt u Azure Cosmos DB in en integreert u Azure Cosmos DB met de IoT-gegevenspijplijn.

In deze oefening gebruikt u een bestaande Next.js toepassingscode waarmee IoT-telemetriegegevens worden opgehaald uit de Cosmos DB-verzameling die u in de vorige oefeningseenheid van deze module hebt geïmplementeerd.

Een Next.js-toepassing configureren

Configureer een voorbeeldtoepassing Next.js die gegevens ophaalt uit een Cosmos DB-verzameling.

  1. Start een webbrowser, navigeer naar Azure Portal en meld u aan bij het Azure-abonnement dat u voor deze module gebruikt.

  2. Selecteer in Azure Portal op de werkbalk het Cloud Shell-pictogram naast het zoekvak.

    Notitie

    U kunt ook rechtstreeks toegang krijgen tot Cloud Shell door naar https://shell.azure.com.

  3. Als u wordt gevraagd om Bash of PowerShell te selecteren, selecteert u Bash.

    Notitie

    Als dit de eerste keer is dat u Cloud Shell start en u het bericht U hebt geen gekoppelde opslag, selecteert u het abonnement dat u in dit lab gebruikt en selecteert u Vervolgens Opslag maken.

  4. Voer de volgende opdracht uit om de GitHub-opslagplaats met de voorbeeld-Next.js toepassingscode voor deze oefening te klonen.

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

  5. Voer de volgende opdracht uit om over te schakelen naar de map met de kloon van de GitHub-opslagplaats.

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

  6. Voer de volgende opdracht uit om de inhoud van het bestand index.js weer te geven. Dit bestand bevat het Next.js script waarmee een verbinding tot stand wordt gebracht met het Cosmos DB-account dat u in de eerste oefening van deze module hebt gemaakt. Er wordt ook een query uitgevoerd op de inhoud van de iotcollection in de iotdb-database die u in de tweede oefening van deze module hebt gemaakt.

    cat ./pages/index.js

  7. Voer de volgende opdracht uit om de inhoud van het config.js-bestand weer te geven. In dit bestand worden de waarden opgeslagen die het Cosmos DB SQL API-eindpunt vertegenwoordigen. Ook worden de bijbehorende toegangssleutel en de doeldatabase en container opgeslagen die als host fungeren voor de IoT-gegevens die u in de vorige oefening van deze module hebt verzameld.

    cat ./config.js

    Notitie

    De namen van de database en container zijn al vooraf ingevuld. Vervolgens stelt u de waarden van het eindpunt en de bijbehorende toegangssleutel in.

  8. Voer de volgende opdrachten uit om de waarden op te halen van het Cosmos DB SQL API-eindpunt en de bijbehorende toegangssleutel en sla deze vervolgens op in tijdelijke variabelen.

    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. Voer vanuit de Bash-sessie in het deelvenster Cloud Shell de volgende opdrachten uit om de tijdelijke aanduidingen in het config.js bestand te vervangen door de waarden die u in de vorige stap hebt opgehaald.

     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. Voer vanuit de Bash-sessie in het deelvenster Cloud Shell de volgende opdracht uit om te controleren of het config.js bestand de werkelijke waarden van het Cosmos DB SQL API-eindpunt en de bijbehorende toegangssleutel bevat.

    cat ./config.js

    Notitie

    Op dit moment moet u meer weten over het installeren van de afhankelijkheidspakketten en het bouwen van de toepassing. Vanwege versiebeheerproblemen kunt u de build niet uitvoeren in Azure Cloud Shell. In plaats daarvan voert u deze taak uit na de implementatie.

Een Azure-web-app implementeren die als host fungeert voor de Next.js-toepassing

Implementeer de zojuist geconfigureerde Next.js-toepassing in een Azure-web-app en valideer de functionaliteit ervan.

Notitie

U kunt dezelfde toepassing implementeren in elke andere Azure-service die een Node.js runtime-omgeving biedt, waaronder Azure Virtual Machines, Azure Container Instances of Azure Kubernetes Service.

  1. Voer in Azure Cloud Shell de volgende opdrachten uit om een resourcegroep te maken om de Azure-web-app te hosten, waarin u de Next.js toepassing implementeert.

    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. Voer de volgende opdrachten uit om een Azure-app Service-plan te maken dat als host fungeert voor de nieuwe Azure-web-app.

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

  3. Voer de volgende opdrachten uit om de nieuwe Azure-web-app te maken.

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

  4. Voer de volgende opdrachten uit om de lokale Git-opslagplaats opnieuw te initialiseren en alle wijzigingen in de hoofdbranch door te voeren.

    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. Voer de volgende opdrachten uit om implementatiereferenties op gebruikersniveau in te stellen.

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

  6. Voer de volgende opdrachten uit om de referenties voor implementatie op gebruikersniveau te identificeren. Zorg ervoor dat u de waarde vastlegt, omdat u deze later in deze oefening nodig hebt.

    echo $DEPLOYMENTUSER
echo $DEPLOYMENTPASS

  7. Voer de volgende opdrachten uit om de IMPLEMENTATIE-URL van de Azure-web-app te identificeren die u als doel van de git push opdracht gebruikt.

    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. Voer de volgende opdracht uit om de externe opslagplaats met de naam Azure te configureren, die de implementatie-URL vertegenwoordigt die u in de vorige stap hebt geïdentificeerd.

    git remote add azure $DEPLOYMENTURL

  9. Voer de volgende opdrachten uit om de hoofdvertakking te maken op basis van de hoofdvertakking en de inhoud ervan naar de Azure-web-app te pushen. U wordt gevraagd om het wachtwoord dat deel uitmaakt van de implementatiereferenties op gebruikersniveau die u eerder hebt vastgelegd.

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

    Notitie

    Wacht totdat de installatie is voltooid. U ontvangt een bericht waarin wordt aangegeven dat de implementatie is geslaagd.

  10. Sluit het deelvenster Cloud Shell .

De functionaliteit van de Azure-web-app valideren

Valideer de functionaliteit van de Azure-web-app die als host fungeert voor de Next.js toepassing.

  1. Gebruik in het browservenster met de Azure-portal het tekstvak Zoekbronnen, services en documenten boven aan de Pagina van Azure Portal om te zoeken naar App Services.

  2. Selecteer in het deelvenster App Services in de lijst met App Service-exemplaren de vermelding die de Azure-web-app vertegenwoordigt die u in de vorige taak van deze oefening hebt geïmplementeerd. De naam moet bestaan uit het voorvoegsel nextjs , gevolgd door een tekenreeks met cijfers.

  3. Selecteer in het deelvenster met de eigenschappen van de web-app, onder de sectie Ontwikkelhulpprogramma's, de vermelding App Service-editor (preview). Selecteer vervolgens Editor openen.

  4. Selecteer het pictogram Console openen.

  5. Voer vanaf de consoleprompt de volgende opdracht uit.

    npm run build

  6. Met deze opdracht wordt de Next.js-toepassing gebouwd die u naar de Azure-web-app hebt gepusht.

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

  7. Wacht totdat het buildproces is voltooid. Dit proces kan ongeveer 5 minuten duren.

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

  8. Sluit het tabblad Webbrowser voor de pagina App Service-editor .

  9. Selecteer Overzicht in het deelvenster Web-app. Selecteer in het deelvenster Essentials de koppeling met het label URL.

    Notitie

    Er wordt een nieuw browsertabblad geopend waarin de Azure-web-app wordt weergegeven.

  10. Controleer of op de webpagina de pagina Next.js - Cosmos DB IoT-telemetriegegevenspagina wordt weergegeven met de vermelding van de IoT-telemetriegegevenspunten die zijn opgehaald uit de Azure Cosmos DB-verzameling.

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

Resultaten

Gefeliciteerd U hebt de derde oefening van deze module voltooid. In deze oefening hebt u een Azure-functie gemaakt die een nettolading van een HTTP-aanvraag registreert. Vervolgens hebt u de IoT-telemetrieregels van een Azure IoT Central-toepassing geconfigureerd en gevalideerd. Ten slotte hebt u een Azure Storage-account gemaakt waarin IoT-telemetrie wordt opgeslagen en de gegevensexport van een Azure IoT Central-toepassing geconfigureerd en gevalideerd.

De resources opschonen

Als u onnodige kosten voor het gebruik van Azure-resources wilt voorkomen, verwijdert u de resourcegroepen cosmos-db-RG, nextjs-webapp-RG en function-app-RG die u in deze oefening hebt gemaakt. Navigeer in Azure Portal naar elk van deze resourcegroepen en selecteer vervolgens de vermelding Resourcegroep verwijderen in de werkbalk. Voer in het tekstvak TYP DE NAAM VAN DE RESOURCEGROEP de naam van de resourcegroep in en selecteer Vervolgens Verwijderen.