Övning – Konfigurera en Next.js-hanteringswebbapp

Slutförd

Den här övningen tar dig igenom processen med att skapa och konfigurera en Next.js-baserad webbtjänst som förlitar sig på Prisma för att ge åtkomst till Azure Database for PostgreSQL.

Kommentar

Prisma är ett mer nyligen utvecklat objektrelationsmappningsbibliotek, som ger en alternativ metod för datamodellering från det som erbjuds av Sequelize.

I den här övningen kommer du att:

  • Konfigurera ett Next.js-program.
  • Distribuera en Azure App Service-webbapp som är värd för Next.js-programmet.
  • Verifiera funktionerna i Next.js-programmet.

Förutsättningar

För att utföra den här övningen behöver du:

  • En Azure-prenumeration
  • Ett Microsoft-konto eller ett Microsoft Entra-konto med rollen Global administratör i Microsoft Entra-klientorganisationen som är associerad med Azure-prenumerationen och med rollen Ägare eller Deltagare i Azure-prenumerationen.
  • För att ha slutfört den första övningen i den här modulen. Du använder Azure PostgreSQL-databasen som du skapade och konfigurerade i den övningen.

Konfigurera ett Next.js-program

I den här uppgiften klonar du en GitHub-lagringsplats som innehåller en Next.js-exempelkod och anpassar den för att ansluta till den befintliga Azure PostgreSQL-databasen.

  1. Om det behövs startar du en webbläsare, navigerar till Azure-portalen och loggar in för att komma åt den Azure-prenumeration som du använder i den här modulen.

  2. I Azure-portalen startar du en Bash-session i Cloud Shell genom att välja dess ikon i verktygsfältet bredvid söktextrutan.

  3. Från Bash-sessionen i Cloud Shell-fönstret kör du följande kommando för att klona GitHub-lagringsplatsen som innehåller next.js-exempelprogramkoden som du ska använda i den här övningen:

    cd ~/
    git clone https://github.com/MicrosoftDocs/mslearn-cloud-native-apps.git
    
  4. Kör följande kommando för att växla till katalogen som innehåller klonen av GitHub-lagringsplatsen:

    cd ~/mslearn-cloud-native-apps/m03u07/
    
  5. Kör följande kommando för att visa innehållet i filen ./prisma/schema.prisma som innehåller definitionen av datamodellen som motsvarar inventeringstabellen i cnainventory-databasen:

    cat ./prisma/schema.prisma
    

    Filen schema.prisma har följande innehåll:

    // 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
    }
    
  6. Kör följande kommando för att visa innehållet i .env-filen, som lagrar anslutningssträng till Azure PostgreSQL-databasen, inklusive värdena som representerar namnet på PostgreSQL-servern, namnet på det administrativa kontot och dess lösenord (som refereras DATABASE_URL i filen ./prisma/schema.prisma):

    cat ./.env
    

    Filen innehåller posten anslutningssträng i följande innehåll:

    DATABASE_URL="postgresql://USER_NAME%40SERVER_NAME:PASSWORD@SERVER_NAME.postgres.database.azure.com:5432/cnainventory"
    
  7. Kör följande kommando för att visa innehållet i filen index.tsx som innehåller Next.js-skriptet, som frågar innehållet i inventeringstabelleni cnainventory-databasen baserat på informationen som härleds från Prisma:

    cat ./pages/index.tsx
    

    Kommentar

    Filen index.tsx har följande innehåll:

    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
    

    Kommentar

    Skriptet förlitar sig på Prisma för att fråga efter innehållet i databasen och använder React för att visa enskilda poster från inventeringstabellen, inklusive deras respektive data.

  8. Kör följande kommandon för att hämta värdena för Cosmos DB SQL API-slutpunkten och motsvarande åtkomstnyckel och lagra dem i tillfälliga variabler:

    RG1NAME=postgresql-db-RG
    SERVER_NAME=$(az postgres server list --resource-group $RG1NAME --query "[0].name" --output tsv)
    USER_NAME='Student'
    PASSWORD='Pa55w0rd1234'
    
  9. Kör följande kommandon för att ersätta platshållarna i .env-filen med de värden som du angav i föregående steg:

    sed -i "s/SERVER_NAME/$SERVER_NAME/g" ./.env
    sed -i "s/USER_NAME/$USER_NAME/" ./.env
    sed -i "s/PASSWORD/$PASSWORD/" ./.env
    
  10. Kör följande kommando för att verifiera att .env-filen innehåller de faktiska värdena för Azure PostgreSQL-servern och dess administrativa autentiseringsuppgifter:

    cat ./.env
    

    Kommentar

    Nu kör npm run install du vanligtvis och npm run-script build. På grund av versionsproblem är detta inte direkt tillgängligt i Azure Cloud Shell. Du kommer att åtgärda detta genom att köra bygget efter distributionen.

Distribuera en Azure App Service-webbapp som är värd för Next.js-programmet

Precis som i föregående övning kan du nu containerisera den nyligen anpassade Next.js-appen. Men för enkelhetens skull distribuerar du den till en Azure App Service. Detta ger ett snabbt sätt att verifiera dess funktioner och se till att containerstorleken är ett genomförbart alternativ.

Kommentar

Du kan distribuera samma program till andra Azure-tjänster som tillhandahåller Node.js-körningsmiljön, inklusive virtuella Azure-datorer, Azure Container Instances eller Azure Kubernetes Service.

  1. I webbläsarfönstret som visar Azure-portalen, från Bash-sessionen i Cloud Shell-fönstret , kör du följande kommandon för att skapa en resursgrupp som ska vara värd för Azure-webbappen, till vilken du distribuerar Next.js-programmet:

    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
    
  2. Kör följande kommandon för att skapa en Azure App Service-plan som ska vara värd för den nya Azure-webbappen:

    SPNAME=nextjs-sp
    az appservice plan create --name $SPNAME --resource-group $RG2NAME --sku B1
    
  3. Kör följande kommandon för att skapa en Node.js-baserad Azure-webbapp:

    WEBAPPNAME=nextjs$RANDOM$RANDOM
    az webapp create --name $WEBAPPNAME --resource-group $RG2NAME --plan $SPNAME --runtime "NODE|12-lts"
    
  4. Kör följande kommandon för att initiera om den lokala Git-lagringsplatsen och genomföra alla ändringar i huvudgrenen:

    cd ~/wp2104-m03u07/
    git init
    git add -A
    git commit -m "Initial Commit"
    
  5. Kör följande kommandon för att konfigurera autentiseringsuppgifter för distribution på användarnivå:

    DEPLOYMENTUSER=m03u07User$RANDOM
    DEPLOYMENTPASS=m03u07Pass$RANDOM$RANDOM
    az webapp deployment user set --user-name $DEPLOYMENTUSER --password $DEPLOYMENTPASS
    
  6. Kör följande kommandon för att identifiera autentiseringsuppgifterna för distribution på användarnivå. Se till att registrera deras värden eftersom du behöver dem senare i den här övningen:

    echo $DEPLOYMENTUSER
    echo $DEPLOYMENTPASS
    
  7. Kör följande kommando för att identifiera azure-webbappens distributions-URL som du ska använda som mål för git push kommandot:

    DEPLOYMENTURL=$(az webapp deployment source config-local-git --name $WEBAPPNAME --resource-group $RG2NAME --output tsv)
    
  8. Kör följande kommando för att konfigurera fjärrdatabasen med namnet azure, som representerar distributions-URL:en som du identifierade i föregående steg:

    git remote add azure $DEPLOYMENTURL
    
  9. Kör följande kommandon för att skicka innehållet i huvudgrenen till Azure-webbappen när du uppmanas att ange lösenordet som ingår i de autentiseringsuppgifter för distribution på användarnivå som du registrerade tidigare i den här uppgiften:

    git push --set-upstream azure master
    

    Kommentar

    Vänta tills distributionen har slutförts. Detta bör ta ungefär tio minuter. När distributionen är klar bör du få ett meddelande om att distributionen lyckades.

  10. Stäng Cloud Shell-fönstret.

Verifiera funktionerna i Next.js-programmet

I den här uppgiften verifierar du funktionerna i Next.js-programmet som distribueras till en Azure-webbapp.

  1. I webbläsarfönstret som visar Azure-portalen använder du textrutan Sök efter resurser, tjänster och dokument överst på Azure Portal-sidan för att söka efter App Services.

  2. På bladet App Services går du till listan över App Service-instanser och väljer posten som representerar den Azure-webbapp som du distribuerade i föregående uppgift i den här övningen.

    Kommentar

    Webbappens namn har prefixet nextjs . Du kan också identifiera den genom att granska utdata från distributionen som du slutförde i föregående uppgift.

  3. På bladet som visar egenskaperna för webbappen går du till den lodräta menyn i avsnittet Utvecklingsverktyg och väljer posten App Service-redigeraren (förhandsversion) och väljer sedan i App Service-redigeraren (förhandsversion).

  4. I apptjänstredigerarens gränssnitt går du till den lodräta menyn och väljer ikonen Öppna konsol, som är direkt efter Start-ikonen.

    Screenshot of the console pane of the App Service Editor interface of the Azure web app.

  5. Från konsolprompten kör du följande kommando för att skapa next.js-programmet som du skickade till Azure-webbappen:

    npm run-script build
    
  6. Vänta tills byggprocessen har slutförts.

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

  7. Stäng webbläsarfliken som visar sidan App Service-redigerare.

  8. På bladet Azure-portalen som visar egenskaperna för webbappen går du till den lodräta menyn och väljer posten Översikt. I fönstret Essentials väljer du länken med etiketten URL. Då öppnas automatiskt en annan webbläsarflik som visar den nyligen distribuerade Azure-webbappen.

  9. Kontrollera att webbläsarsidan visar sidan Next.js – PostgreSQL-inventeringsdata med inventeringsobjekten som hämtats från Azure PostgreSQL-databasen.

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

Resultat

Klar! Du har slutfört den tredje och sista övningen i den här modulen. I den här övningen skapade och konfigurerade du en Next.js-baserad app som förlitar sig på Prisma för att ge åtkomst till Azure Database for PostgreSQL.

Rensa resurserna

För att undvika onödiga avgifter från användning av Azure-resurser bör du ta bort resursgrupperna postgresql-db-RG, can-express-RG och can-nextjs-RG som du skapade under övningarna i den här modulen. Om du vill göra det går du till bladet för var och en av dessa resursgrupper i Azure-portalen och väljer posten Ta bort resursgrupp i verktygsfältet. I textrutan SKRIV RESURSGRUPPNAMN anger du namnet på resursgruppen och väljer sedan Ta bort.