Ćwiczenie — integrowanie aplikacji internetowej Next.js z potokiem danych IoT

  • 20 min

To ćwiczenie zawiera omówienie integracji Next.js z potokiem danych IoT.

W tym ćwiczeniu wykonasz następujące czynności:

  • Konfigurowanie aplikacji Next.js.
  • Wdróż aplikację internetową platformy Azure hostująca aplikację Next.js.
  • Sprawdź funkcjonalność aplikacji internetowej platformy Azure.

Wymagania wstępne

Aby wykonać to ćwiczenie, potrzebne są następujące elementy:

  • Subskrypcja Azure.
  • Konto Microsoft lub konto Microsoft Entra z rolą Global Administracja istrator w dzierżawie firmy Microsoft Entra. Dzierżawa musi być skojarzona z subskrypcją platformy Azure i z rolą Właściciel lub Współautor w subskrypcji platformy Azure.
  • Aby ukończyć lekcji ćwiczenia Konfigurowanie usługi Azure Cosmos DB i integrowanie usługi Azure Cosmos DB z potokiem danych IoT.

W tym ćwiczeniu użyjesz istniejącego kodu aplikacji Next.js, który pobiera dane telemetryczne IoT z kolekcji usługi Cosmos DB zaimplementowanej w poprzedniej lekcji ćwiczenia tego modułu.

Konfigurowanie aplikacji Next.js

Skonfiguruj przykładową aplikację Next.js, która pobiera dane z kolekcji usługi Cosmos DB.

  1. Uruchom przeglądarkę internetową, przejdź do witryny Azure Portal i zaloguj się do subskrypcji platformy Azure, której używasz w tym module.

  2. W witrynie Azure Portal na pasku narzędzi wybierz ikonę usługi Cloud Shell znajdującą się obok pola wyszukiwania.

    Uwaga

    Alternatywnie możesz uzyskać bezpośredni dostęp do usługi Cloud Shell, przechodząc do https://shell.azure.com.

  3. Jeśli zostanie wyświetlony monit o wybranie powłoki Bash lub programu PowerShell, wybierz pozycję Bash.

    Uwaga

    Jeśli po raz pierwszy uruchamiasz usługę Cloud Shell i zostanie wyświetlony komunikat Nie masz zainstalowanego magazynu, wybierz subskrypcję używaną w tym laboratorium, a następnie wybierz pozycję Utwórz magazyn.

  4. Uruchom następujące polecenie, aby sklonować repozytorium GitHub zawierające przykładowy kod aplikacji Next.js na potrzeby tego ćwiczenia.

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

  5. Uruchom następujące polecenie, aby przełączyć się do katalogu zawierającego klon repozytorium GitHub.

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

  6. Uruchom następujące polecenie, aby wyświetlić zawartość pliku index.js . Ten plik zawiera skrypt Next.js, który ustanawia połączenie z kontem usługi Cosmos DB utworzonym w pierwszym ćwiczeniu tego modułu. Wykonuje również zapytanie dotyczące zawartości iotcollection w bazie danych iotdb utworzonej w drugim ćwiczeniu tego modułu.

    cat ./pages/index.js

  7. Uruchom następujące polecenie, aby wyświetlić zawartość pliku config.js . Ten plik przechowuje wartości reprezentujące punkt końcowy interfejsu API SQL usługi Cosmos DB. Przechowuje również odpowiedni klucz dostępu oraz docelową bazę danych i kontener hostowanie danych IoT zebranych w poprzednim ćwiczeniu tego modułu.

    cat ./config.js

    Uwaga

    Nazwy bazy danych i kontenera są już wstępnie wypełniane. Następnie ustawisz wartości punktu końcowego i odpowiadający mu klucz dostępu.

  8. Uruchom następujące polecenia, aby pobrać wartości punktu końcowego interfejsu API SQL usługi Cosmos DB i odpowiadający mu klucz dostępu, a następnie zapisać je w zmiennych tymczasowych.

    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. W sesji powłoki Bash w okienku usługi Cloud Shell uruchom następujące polecenia, aby zastąpić symbole zastępcze w pliku config.js wartościami pobranymi w poprzednim 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. W sesji powłoki Bash w okienku usługi Cloud Shell uruchom następujące polecenie, aby sprawdzić, czy plik config.js zawiera rzeczywiste wartości punktu końcowego interfejsu API SQL usługi Cosmos DB i odpowiadający mu klucz dostępu.

    cat ./config.js

    Uwaga

    W tym momencie należy dowiedzieć się więcej o sposobie instalowania pakietów zależności i kompilowania aplikacji. Ze względu na problemy z przechowywaniem wersji nie będzie można uruchomić kompilacji w usłudze Azure Cloud Shell. Zamiast tego wykonasz to zadanie po wdrożeniu.

Wdrażanie aplikacji internetowej platformy Azure hostowania aplikacji Next.js

Wdróż nowo skonfigurowaną aplikację Next.js w aplikacji internetowej platformy Azure i zweryfikuj jej funkcjonalność.

Uwaga

Tę samą aplikację można wdrożyć w dowolnej innej usłudze platformy Azure, która udostępnia środowisko uruchomieniowe Node.js, w tym usługi Azure Virtual Machines, Azure Container Instances lub Azure Kubernetes Service.

  1. W usłudze Azure Cloud Shell uruchom następujące polecenia, aby utworzyć grupę zasobów do hostowania aplikacji internetowej platformy Azure, w której wdrażasz aplikację Next.js.

    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. Uruchom następujące polecenia, aby utworzyć plan usługi aplikacja systemu Azure hostujący nową aplikację internetową platformy Azure.

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

  3. Uruchom następujące polecenia, aby utworzyć nową aplikację internetową platformy Azure.

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

  4. Uruchom następujące polecenia, aby ponownie zainicjować lokalne repozytorium Git i zatwierdzić wszystkie zmiany w gałęzi głównej.

    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. Uruchom następujące polecenia, aby skonfigurować poświadczenia wdrożenia na poziomie użytkownika.

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

  6. Uruchom następujące polecenia, aby zidentyfikować poświadczenia wdrożenia na poziomie użytkownika. Pamiętaj, aby zarejestrować swoją wartość, ponieważ będą one potrzebne w dalszej części tego ćwiczenia.

    echo $DEPLOYMENTUSER
echo $DEPLOYMENTPASS

  7. Uruchom następujące polecenia, aby zidentyfikować adres URL wdrożenia aplikacji internetowej platformy Azure, który jest używany jako element docelowy git push polecenia.

    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. Uruchom następujące polecenie, aby skonfigurować repozytorium zdalne o nazwie azure, które reprezentuje adres URL wdrożenia zidentyfikowany w poprzednim kroku.

    git remote add azure $DEPLOYMENTURL

  9. Uruchom następujące polecenia, aby utworzyć gałąź główną na podstawie głównejgałęzi i wypchnąć jej zawartość do aplikacji internetowej platformy Azure. Zostanie wyświetlony monit o hasło, które jest częścią zarejestrowanych wcześniej poświadczeń wdrożenia na poziomie użytkownika.

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

    Uwaga

    Zaczekaj na zakończenie wdrażania. Powinien zostać wyświetlony komunikat z informacją, że wdrożenie zakończyło się pomyślnie.

  10. Zamknij okienko usługi Cloud Shell.

Weryfikowanie funkcjonalności aplikacji internetowej platformy Azure

Zweryfikuj funkcjonalność aplikacji internetowej platformy Azure hostująca aplikację Next.js.

  1. W oknie przeglądarki internetowej wyświetlającym witrynę Azure Portal użyj pola tekstowego Wyszukaj zasoby, usługi i dokumenty w górnej części strony witryny Azure Portal, aby wyszukać usługę App Services.

  2. W okienku App Services na liście wystąpień usługi App Service wybierz wpis reprezentujący aplikację internetową platformy Azure wdrożona w poprzednim zadaniu tego ćwiczenia. Nazwa powinna składać się z prefiksu nextjs , po którym następuje ciąg cyfr.

  3. W okienku wyświetlającym właściwości aplikacji internetowej w sekcji Narzędzia programistyczne wybierz wpis Edytor usługi App Service (wersja zapoznawcza). Następnie wybierz pozycję Otwórz edytor.

  4. Wybierz ikonę Otwórz konsolę.

  5. W wierszu polecenia konsoli uruchom następujące polecenie.

    npm run build

  6. To polecenie kompiluje aplikację Next.js wypchniętą do aplikacji internetowej platformy Azure.

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

  7. Poczekaj na zakończenie procesu kompilacji. Ten proces może potrwać około 5 minut.

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

  8. Zamknij kartę przeglądarki internetowej na stronie Edytora usługi App Service.

  9. W okienku Aplikacja internetowa wybierz pozycję Przegląd. W okienku Podstawy wybierz link z etykietą ADRES URL.

    Uwaga

    Zostanie otwarta nowa karta przeglądarki internetowej z wyświetloną aplikacją internetową platformy Azure.

  10. Sprawdź, czy na stronie przeglądarki internetowej jest wyświetlana strona Next.js — dane telemetryczne usługi Cosmos DB IoT z listą punktów danych telemetrycznych IoT pobranych z kolekcji usługi Azure Cosmos DB.

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

Wyniki

Gratulacje! Ukończono trzecie ćwiczenie tego modułu. W tym ćwiczeniu utworzono funkcję platformy Azure, która rejestruje ładunek żądania HTTP. Następnie skonfigurowano i zweryfikowano reguły telemetrii IoT aplikacji usługi Azure IoT Central. Na koniec utworzono konto usługi Azure Storage, które przechowuje dane telemetryczne IoT, oraz konfiguruje i weryfikuje eksport danych aplikacji usługi Azure IoT Central.

Oczyszczanie zasobów

Aby uniknąć niepotrzebnych opłat za korzystanie z zasobów platformy Azure, usuń grupy zasobów cosmos-db-RG, nextjs-webapp-RG i function-app-RG utworzone w tym ćwiczeniu. W witrynie Azure Portal przejdź do każdej z tych grup zasobów, a następnie wybierz wpis Usuń grupę zasobów na pasku narzędzi. W polu tekstowym WPISZ NAZWĘ GRUPY ZASOBÓW wprowadź nazwę grupy zasobów, a następnie wybierz pozycję Usuń.