Oefening: een Next.js-beheerweb-app instellen

20 minuten

In deze oefening wordt u begeleid bij het maken en configureren van een next.js-webservice die afhankelijk is van Prisma om toegang te bieden tot Azure Database for PostgreSQL.

Notitie

Prisma is een recent ontwikkelde object-relationele mapper-bibliotheek, die een alternatieve benadering biedt voor gegevensmodellering van de bibliotheek die door Sequelize wordt aangeboden.

In deze oefening gaat u het volgende doen:

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

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 die is gekoppeld aan het Azure-abonnement en met de rol Eigenaar of Inzender in het Azure-abonnement.
Als u de eerste oefening van deze module wilt hebben voltooid. U gebruikt de Azure PostgreSQL-database die u in die oefening hebt gemaakt en geconfigureerd.

Een Next.js-toepassing configureren

In deze taak kloont u een GitHub-opslagplaats met een next.js-voorbeeldcode en past u deze aan om verbinding te maken met de bestaande Azure PostgreSQL-database.

Start zo nodig een webbrowser, navigeer naar Azure Portal en meld u aan voor toegang tot het Azure-abonnement dat u in deze module gebruikt.
Start in Azure Portal een Bash-sessie in Cloud Shell door het bijbehorende pictogram in de werkbalk naast het zoektekstvak te selecteren.
Voer vanuit de Bash-sessie in het deelvenster Cloud Shell de volgende opdracht uit om de GitHub-opslagplaats te klonen met de voorbeeldtoepassingscode Next.js die u in deze oefening gaat gebruiken:
```
cd ~/
git clone https://github.com/MicrosoftDocs/mslearn-cloud-native-apps.git
```
Voer de volgende opdracht uit om over te schakelen naar de map met de kloon van de GitHub-opslagplaats:
```
cd ~/mslearn-cloud-native-apps/m03u07/
```

Voer de volgende opdracht uit om de inhoud van het ./prisma/schema.prisma-bestand weer te geven met de definitie van het gegevensmodel dat overeenkomt met de inventaristabel in de cnainventory-database :

cat ./prisma/schema.prisma

Het schema.prisma-bestand heeft de volgende inhoud:

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model inventory {
  id        Int @id
  name      String
  quantity  Int
  date      DateTime
}

Voer de volgende opdracht uit om de inhoud van het .env-bestand weer te geven, waarin de verbindingsreeks wordt opgeslagen in de Azure PostgreSQL-database, inclusief de waarden die de naam van de PostgreSQL-server, de naam van het beheerdersaccount en het bijbehorende wachtwoord vertegenwoordigen (dat is de DATABASE_URL naam waarnaar wordt verwezen in het ./prisma/schema.prisma-bestand):
```
cat ./.env
```
Het bestand bevat de verbindingsreeks vermelding in de volgende inhoud:
```
DATABASE_URL="postgresql://USER_NAME%40SERVER_NAME:PASSWORD@SERVER_NAME.postgres.database.azure.com:5432/cnainventory"
```

Voer de volgende opdracht uit om de inhoud van het bestand index.tsx weer te geven met het script Next.js, waarmee een query wordt uitgevoerd op de inhoud van de inventaristabel in de cnainventory-database op basis van de informatie die is afgeleid van Prisma:

cat ./pages/index.tsx

Notitie

Het bestand index.tsx heeft de volgende inhoud:

declare global {
  namespace NodeJS {
    interface Global {
      prisma: any;
    }
  }
}

import prisma from '../lib/prisma';
import Head from "next/head";

export const getServerSideProps = async ({ req }) => {
  const inventory = await prisma.inventory.findMany({
  })
  return { props: {inventory} }
}

export default ({ inventory }) =>
  <div>
    <Head>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta charSet="utf-8" />
      <title>Next.js with Azure PostgreSQL inventory data</title>
      <meta name="title" content="Next.js with Azure PostgreSQL inventory data" />
      <meta
        name="description"
        content="Next.js with Azure PostgreSQL inventory data"
      />
      <meta property="og:type" content="website" />
      <meta property="og:title" content="Next.js with Azure PostgreSQL inventory data" />
      <meta
        property="og:description"
        content="Next.js with Azure PostgreSQL inventory data"
      />
    </Head>
    <div className="w-full text-center bg-blue-800 flex flex-wrap items-center">
      <div className="text-3xl w-1/2 text-white mx-2 md:mx-auto py-10">
        Next.js - PostgreSQL inventory data
      </div>
    </div>
    <div className="bg-gray-200 py-10">
      {inventory.map(({id, name, quantity, date}) => (
        <div
          className="flex bg-white shadow-lg rounded-lg mx-2 md:mx-auto mb-10 max-w-2xl"
          key={id}
        >
          <div className="flex items-start px-4 py-6">
            <div className="">
              <div className="inline items-center justify-between">
                <h2 className="text-lg font-bold text-gray-900 -mt-1">
                  {id}
                </h2>
                <small className="text-sm text-gray-700 object-right">
                  Id: {id}
                </small>
                <small className="ml-3 text-gray-700 text-sm">
                  Name: {name}
                </small>
                <small className="ml-3 text-gray-700 text-sm">
                  Quantity: {quantity}
                </small>
                <small className="ml-3 text-gray-700 text-sm">
                  Date: {date.toString().substring(0,10)}
                </small>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  </div

Notitie

Het script is afhankelijk van Prisma om een query uit te voeren op de inhoud van de database en gebruikt React om afzonderlijke records uit de inventaristabel weer te geven, met inbegrip van hun respectieve gegevens.

Voer de volgende opdrachten uit om de waarden van het Cosmos DB SQL API-eindpunt en de bijbehorende toegangssleutel op te halen en op te slaan in tijdelijke variabelen:
```
RG1NAME=postgresql-db-RG
SERVER_NAME=$(az postgres server list --resource-group $RG1NAME --query "[0].name" --output tsv)
USER_NAME='Student'
PASSWORD='Pa55w0rd1234'
```
Voer de volgende opdrachten uit om de tijdelijke aanduidingen in het .env-bestand te vervangen door de waarden die u in de vorige stap hebt ingesteld:
```
sed -i "s/SERVER_NAME/$SERVER_NAME/g" ./.env
sed -i "s/USER_NAME/$USER_NAME/" ./.env
sed -i "s/PASSWORD/$PASSWORD/" ./.env
```
Voer de volgende opdracht uit om te controleren of het .env-bestand de werkelijke waarden van de Azure PostgreSQL-server en de bijbehorende beheerdersreferenties bevat:
```
cat ./.env
```
Notitie

Op dit moment zou u meestal worden uitgevoerd npm run install en npm run-script build. Vanwege versiebeheerproblemen is dit niet rechtstreeks beschikbaar in Azure Cloud Shell. U herstelt dit door de build uit te voeren na de implementatie.

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

Net als in de vorige oefening kunt u op dit moment de zojuist aangepaste Next.js-app containeriseren. Voor het gemak implementeert u deze echter in een Azure-app Service. Dit biedt een snelle manier om de functionaliteit ervan te valideren en ervoor te zorgen dat containeriseren een haalbare optie is.

Notitie

U kunt dezelfde toepassing implementeren in elke andere Azure-service die de Node.js Runtime-omgeving biedt, waaronder Azure-VM's, Azure Container Instances of Azure Kubernetes Service.

Voer in het browservenster met de Azure-portal, vanuit de Bash-sessie in het deelvenster Cloud Shell , de volgende opdrachten uit om een resourcegroep te maken die als host fungeert voor de Azure-web-app, waarin u de Next.js-toepassing implementeert:
```
RG1NAME=postgresql-db-RG
LOCATION=$(az group show --resource-group $RG1NAME --query location --output tsv)
RG2NAME=cna-nextjs-RG
az group create --name $RG2NAME --location $LOCATION
```
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-sp
az appservice plan create --name $SPNAME --resource-group $RG2NAME --sku B1
```

Voer de volgende opdrachten uit om een Azure-web-app op basis van Node.js te maken:

WEBAPPNAME=nextjs$RANDOM$RANDOM
az webapp create --name $WEBAPPNAME --resource-group $RG2NAME --plan $SPNAME --runtime "NODE|12-lts"

Voer de volgende opdrachten uit om de lokale Git-opslagplaats opnieuw te initialiseren en alle wijzigingen in de hoofdbranch door te voeren:
```
cd ~/wp2104-m03u07/
git init
git add -A
git commit -m "Initial Commit"
```

Voer de volgende opdrachten uit om implementatiereferenties op gebruikersniveau in te stellen:

DEPLOYMENTUSER=m03u07User$RANDOM
DEPLOYMENTPASS=m03u07Pass$RANDOM$RANDOM
az webapp deployment user set --user-name $DEPLOYMENTUSER --password $DEPLOYMENTPASS

Voer de volgende opdrachten uit om de referenties voor implementatie op gebruikersniveau te identificeren. Zorg ervoor dat u de waarden vastlegt, omdat u deze later in deze oefening nodig hebt:
```
echo $DEPLOYMENTUSER
echo $DEPLOYMENTPASS
```
Voer de volgende opdracht uit om de IMPLEMENTATIE-URL van de Azure-web-app te identificeren die u als doel van de git push opdracht gaat gebruiken:
```
DEPLOYMENTURL=$(az webapp deployment source config-local-git --name $WEBAPPNAME --resource-group $RG2NAME --output tsv)
```
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
```
Voer de volgende opdrachten uit om de inhoud van de hoofdvertakking naar de Azure-web-app te pushen wanneer u wordt gevraagd om het wachtwoord dat deel uitmaakt van de implementatiereferenties op gebruikersniveau die u eerder in deze taak hebt vastgelegd:
```
git push --set-upstream azure master
```
Notitie

Wacht totdat de installatie is voltooid. Dit duurt ongeveer tien minuten. Zodra de implementatie is voltooid, ontvangt u een bericht waarin staat dat de implementatie is geslaagd.
Sluit het deelvenster Cloud Shell .

De functionaliteit van de Next.js-toepassing valideren

In deze taak valideert u de functionaliteit van de Next.js-toepassing die is geïmplementeerd in een Azure-web-app.

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.
Selecteer op de blade 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.

Notitie

De naam van de web-app heeft het voorvoegsel nextjs . U kunt deze ook identificeren door de uitvoer te bekijken van de implementatie die u in de vorige taak hebt voltooid.
Selecteer op de blade met de eigenschappen van de web-app in het verticale menu in de sectie Ontwikkelhulpprogramma's de vermelding App Service-editor (preview) en selecteer vervolgens Go in de App Service-editor (preview).
Selecteer in de interface van de App Service-editor in het verticale menu het pictogram Console openen, direct na het startpictogram .
Voer vanaf de consoleprompt de volgende opdracht uit om de Next.js-toepassing te bouwen die u naar de Azure-web-app hebt gepusht:
```
npm run-script build
```
Wacht totdat het buildproces is voltooid.
Sluit het tabblad van de webbrowser met de pagina App Service-editor .
Selecteer op de blade Azure Portal met de eigenschappen van de web-app, in het verticale menu, de vermelding Met het label Overzicht. Selecteer in het deelvenster Essentials de koppeling met het label URL. Hiermee wordt automatisch een ander browsertabblad geopend met de zojuist geïmplementeerde Azure-web-app.
Controleer of op de webpagina de pagina Next.js - PostgreSQL-inventarisgegevens wordt weergegeven met de inventarisitems die zijn opgehaald uit de Azure PostgreSQL-database.

Resultaten

Gefeliciteerd. U hebt de derde en laatste oefening van deze module voltooid. In deze oefening hebt u een next.js-app gemaakt en geconfigureerd die afhankelijk is van Prisma om toegang te bieden tot Azure Database for PostgreSQL.

De resources opschonen

Als u onnodige kosten voor het gebruik van Azure-resources wilt voorkomen, moet u de postgresql-db-RG verwijderen, express-RG en can-nextjs-RG-resourcegroepen die u tijdens de oefeningen van deze module hebt gemaakt. Hiervoor gaat u in Azure Portal naar de blade van elk van deze resourcegroepen en selecteert u de vermelding Resourcegroep verwijderen op de werkbalk. Voer in het tekstvak TYP DE NAAM VAN DE RESOURCEGROEP de naam van de resourcegroep in en selecteer Vervolgens Verwijderen.

Doorgaan

Vereisten

Een Next.js-toepassing configureren

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

De functionaliteit van de Next.js-toepassing valideren

Resultaten

De resources opschonen

Feedback