Gyakorlat – Next.js felügyeleti webalkalmazás beállítása

20 perc

Ez a gyakorlat végigvezeti egy Next.js-alapú webszolgáltatás létrehozásának és konfigurálásának folyamatán, amely a Prismára támaszkodik, hogy hozzáférést biztosítson az Azure Database for PostgreSQL-hez.

Megjegyzés:

A Prisma egy újabban kifejlesztett objektum-relációs térképtár, amely alternatív módszert kínál az adatok modellezésére a Sequelize által kínálttól.

Ebben a gyakorlatban a következőket fogja végrehajtani:

Konfiguráljon egy Next.js-alkalmazást.
Helyezzen üzembe egy Azure-alkalmazás Service-webalkalmazást, amely a Next.js alkalmazást üzemelteti.
Ellenőrizze a Next.js alkalmazás funkcióit.

Előfeltételek

A gyakorlat elvégzéséhez a következőkre van szüksége:

Azure-előfizetés.
Egy Microsoft-fiók vagy Egy Microsoft Entra-fiók, amely globális Rendszergazda istrator szerepkörrel rendelkezik az Azure-előfizetéshez társított Microsoft Entra-bérlőben, valamint az Azure-előfizetés tulajdonosi vagy közreműködői szerepkörével.
A modul első gyakorlatának elvégzése. A gyakorlatban létrehozott és konfigurált Azure PostgreSQL-adatbázist fogja használni.

Next.js-alkalmazás konfigurálása

Ebben a feladatban klónozni fog egy Next.js-kódot tartalmazó GitHub-adattárat, és testre szabja a meglévő Azure PostgreSQL-adatbázishoz való csatlakozáshoz.

Szükség esetén indítsa el a webböngészőt, lépjen az Azure Portalra , és jelentkezzen be a modulban használt Azure-előfizetés eléréséhez.
Az Azure Portalon indítsa el a Bash-munkamenetet a Cloud Shellben a keresőmező melletti eszköztár ikonjának kiválasztásával.
A Cloud Shell panelen futó Bash-munkamenetben futtassa az alábbi parancsot a gyakorlatban használt Next.js mintaalkalmazás-kódot tartalmazó GitHub-adattár klónozásához:
```
cd ~/
git clone https://github.com/MicrosoftDocs/mslearn-cloud-native-apps.git
```
Futtassa a következő parancsot a GitHub-adattár klónját tartalmazó könyvtárra való váltáshoz:
```
cd ~/mslearn-cloud-native-apps/m03u07/
```

Futtassa a következő parancsot a ./prisma/schema.prisma fájl tartalmának megjelenítéséhez, amely tartalmazza a cnainventory adatbázis leltártáblájánakmegfelelő adatmodell definícióját:

cat ./prisma/schema.prisma

A schema.prisma fájl tartalma a következő:

// 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
}

Futtassa a következő parancsot az Azure PostgreSQL-adatbázisba kapcsolati sztring tároló .env fájl tartalmának megjelenítéséhez, beleértve a PostgreSQL-kiszolgáló nevét, a rendszergazdai fiók nevét és jelszavát (ez DATABASE_URL a ./prisma/schema.prisma fájlban hivatkozott):
```
cat ./.env
```
A fájl tartalmazza a kapcsolati sztring bejegyzést a következő tartalomban:
```
DATABASE_URL="postgresql://USER_NAME%40SERVER_NAME:PASSWORD@SERVER_NAME.postgres.database.azure.com:5432/cnainventory"
```

Futtassa a következő parancsot a Next.js szkriptet tartalmazó index.tsx fájl tartalmának megjelenítéséhez, amely a Prisma alapján lekérdezi a cnainventory adatbázis leltártáblájának tartalmát:

cat ./pages/index.tsx

Megjegyzés:

Az index.tsx fájl tartalma a következő:

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

Megjegyzés:

A szkript a Prismára támaszkodik az adatbázis tartalmának lekérdezéséhez, és a React használatával jeleníti meg a leltártáblából származó egyes rekordokat, beleértve a vonatkozó adatokat is.

Futtassa a következő parancsokat a Cosmos DB SQL API-végpont és a megfelelő hozzáférési kulcs értékeinek lekéréséhez, és tárolja őket ideiglenes változókban:
```
RG1NAME=postgresql-db-RG
SERVER_NAME=$(az postgres server list --resource-group $RG1NAME --query "[0].name" --output tsv)
USER_NAME='Student'
PASSWORD='Pa55w0rd1234'
```

Futtassa az alábbi parancsokat az .env fájl helyőrzőinek lecseréléséhez az előző lépésben megadott értékekre:

sed -i "s/SERVER_NAME/$SERVER_NAME/g" ./.env
sed -i "s/USER_NAME/$USER_NAME/" ./.env
sed -i "s/PASSWORD/$PASSWORD/" ./.env

Futtassa a következő parancsot annak ellenőrzéséhez, hogy az .env fájl tartalmazza-e az Azure PostgreSQL-kiszolgáló tényleges értékeit és rendszergazdai hitelesítő adatait:
```
cat ./.env
```
Megjegyzés:

Ezen a ponton általában a futtatás és npm run-script builda .npm run install Verziószámozási problémák miatt ez nem érhető el közvetlenül az Azure Cloud Shellben. Ezt az üzembe helyezést követő build futtatásával háríthatja el.

A Next.js alkalmazást üzemeltető Azure-alkalmazás Service-webalkalmazás üzembe helyezése

Az előző gyakorlathoz hasonlóan ezen a ponton is tárolóba állíthatja az újonnan testre szabott Next.js alkalmazást. Az egyszerűség kedvéért azonban üzembe fogja helyezni egy Azure-alkalmazás szolgáltatásban. Ezzel gyorsan ellenőrizheti a funkcióját, és meggyőződhet arról, hogy a tárolók használata életképes megoldás.

Megjegyzés:

Ugyanezt az alkalmazást bármely olyan Azure-szolgáltatásban üzembe helyezheti, amely a Node.js futtatókörnyezetet biztosítja, beleértve az Azure-beli virtuális gépeket, az Azure Container Instances-t vagy az Azure Kubernetes Service-t.

Az Azure Portalt megjelenítő böngészőablakban a Cloud Shell panel Bash-munkamenetéből futtassa a következő parancsokat egy olyan erőforráscsoport létrehozásához, amely az Azure-webalkalmazást fogja üzemeltetni, amelyben üzembe helyezi a Next.js alkalmazást:
```
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
```
Futtassa az alábbi parancsokat egy Azure-alkalmazás service-csomag létrehozásához, amely az új Azure-webalkalmazást fogja üzemeltetni:
```
SPNAME=nextjs-sp
az appservice plan create --name $SPNAME --resource-group $RG2NAME --sku B1
```

Node.js-alapú Azure-webalkalmazás létrehozásához futtassa a következő parancsokat:

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

Futtassa a következő parancsokat a helyi Git-adattár újraincializálásához és a főág összes módosításának véglegesítéséhez:
```
cd ~/wp2104-m03u07/
git init
git add -A
git commit -m "Initial Commit"
```

Futtassa a következő parancsokat a felhasználói szintű üzembehelyezési hitelesítő adatok beállításához:

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

Futtassa az alábbi parancsokat a felhasználói szintű üzembehelyezési hitelesítő adatok azonosításához. Ügyeljen arra, hogy rögzítse az értékeiket, mert a gyakorlat későbbi részében szüksége lesz rájuk:
```
echo $DEPLOYMENTUSER
echo $DEPLOYMENTPASS
```
Futtassa a következő parancsot az Azure webalkalmazás üzembehelyezési URL-címének azonosításához, amelyet a git push parancs céljaként fog használni:
```
DEPLOYMENTURL=$(az webapp deployment source config-local-git --name $WEBAPPNAME --resource-group $RG2NAME --output tsv)
```
Futtassa a következő parancsot az Azure nevű távoli adattár konfigurálásához, amely az előző lépésben azonosított üzembehelyezési URL-címet jelöli:
```
git remote add azure $DEPLOYMENTURL
```
Futtassa az alábbi parancsokat a főág tartalmának az Azure-webalkalmazásba való leküldéséhez, amikor a rendszer kéri a feladatban korábban rögzített felhasználói szintű üzembehelyezési hitelesítő adatok részét képező jelszót:
```
git push --set-upstream azure master
```
Megjegyzés:

Wait for the deployment to complete. Ez körülbelül tíz percet vesz igénybe. Miután az üzembe helyezés befejeződött, egy üzenetet kell kapnia arról, hogy az üzembe helyezés sikeres volt.
Zárja be a Cloud Shell panelt.

A Next.js alkalmazás működésének ellenőrzése

Ebben a feladatban egy Azure-webalkalmazásban üzembe helyezett Next.js alkalmazás funkcióit fogja ellenőrizni.

Az Azure Portalt megjelenítő webböngészőablakban az Azure Portal lap tetején található Keresés erőforrások, szolgáltatások és dokumentumok szövegmezővel keresse meg az App Servicest.
Az App Services panel App Service-példányok listájában válassza ki a gyakorlat előző feladatában üzembe helyezett Azure-webalkalmazást képviselő bejegyzést.

Megjegyzés:

A webalkalmazás neve a nextjs előtaggal fog rendelkezni. Azt is azonosíthatja, ha áttekinti az előző feladatban befejezett üzembe helyezés kimenetét.
A webalkalmazás tulajdonságait megjelenítő panelen, a függőleges menü Fejlesztési eszközök csoportjában válassza ki az App Service-szerkesztő (előzetes verzió) bejegyzést, majd az App Service-szerkesztő (előzetes verzió) területén válassza az Ugrás lehetőséget.
Az App Service-szerkesztő felületének függőleges menüjében válassza a Konzol megnyitása ikont, amely közvetlenül a Start ikon után található.
A konzol parancssorából futtassa a következő parancsot az Azure-webalkalmazásba leküldött Next.js alkalmazás létrehozásához:
```
npm run-script build
```
Várja meg, amíg a buildelési folyamat befejeződik.
Zárja be az App Service-szerkesztő lapot megjelenítő böngészőlapot.
A webalkalmazás tulajdonságait megjelenítő Azure Portal panel függőleges menüjében válassza az Áttekintés feliratú bejegyzést. Az Essentials panelen válassza ki a címkével ellátott URL-címet. Ezzel automatikusan megnyit egy másik böngészőlapot, amely megjeleníti az újonnan üzembe helyezett Azure-webalkalmazást.
Ellenőrizze, hogy a böngészőlap megjeleníti-e a Next.js – PostgreSQL leltáradatlapot az Azure PostgreSQL-adatbázisból lekért leltárelemekkel.

EREDMÉNY

Gratulálunk! Elvégezte a modul harmadik és egyben utolsó gyakorlatát. Ebben a gyakorlatban létrehozott és konfigurált egy Next.js-alapú alkalmazást, amely a Prismára támaszkodik, hogy hozzáférést biztosítson az Azure Database for PostgreSQL-hez.

Az erőforrások eltávolítása

Az Azure-erőforrások használatából származó szükségtelen díjak elkerülése érdekében törölnie kell a postgresql-db-RG, a can-express-RG és a can-nextjs-RG erőforráscsoportokat, amelyeket a modul gyakorlatai során hozott létre. Ehhez az Azure Portalon navigáljon az egyes erőforráscsoportok paneljére, és válassza az eszköztárOn az Erőforráscsoport törlése bejegyzést. Az ERŐFORRÁSCSOPORT NEVE szövegmezőbe írja be az erőforráscsoport nevét, majd válassza a Törlés lehetőséget.

Folytatás

Gyakorlat – Next.js felügyeleti webalkalmazás beállítása

Előfeltételek

Next.js-alkalmazás konfigurálása

A Next.js alkalmazást üzemeltető Azure-alkalmazás Service-webalkalmazás üzembe helyezése

A Next.js alkalmazás működésének ellenőrzése

EREDMÉNY

Az erőforrások eltávolítása

Visszajelzés