Cvičení – nastavení webové aplikace Next.js management

  • 20 min

Toto cvičení vás provede procesem vytvoření a konfigurace webové služby založené na next.js, která spoléhá na Prisma a poskytuje přístup ke službě Azure Database for PostgreSQL.

Poznámka:

Prisma je nedávno vyvinutá knihovna mapovačů relačních objektů, která poskytuje alternativní přístup k modelování dat z modelu, který nabízí Sequelize.

V tomto cvičení:

  • Nakonfigurujte aplikaci Next.js.
  • Nasaďte webovou aplikaci Aplikace Azure Service hostující aplikaci Next.js.
  • Ověřte funkčnost aplikace Next.js.

Požadavky

K provedení tohoto cvičení potřebujete:

  • Předplatné Azure.
  • Účet Microsoft nebo účet Microsoft Entra s rolí Globální Správa istrator v tenantovi Microsoft Entra přidruženém k předplatnému Azure a s rolí Vlastník nebo Přispěvatel v předplatném Azure.
  • Abyste dokončili první cvičení tohoto modulu. Použijete databázi Azure PostgreSQL, kterou jste vytvořili a nakonfigurovali v daném cvičení.

Konfigurace aplikace Next.js

V této úloze naklonujete úložiště GitHub obsahující ukázkový kód Next.js a přizpůsobíte ho pro připojení k existující databázi Azure PostgreSQL.

  1. V případě potřeby spusťte webový prohlížeč, přejděte na web Azure Portal a přihlaste se, abyste získali přístup k předplatnému Azure, které používáte v tomto modulu.

  2. Na webu Azure Portal spusťte relaci Bash v Cloud Shellu tak, že na panelu nástrojů vedle vyhledávacího textového pole vyberete její ikonu.

  3. Z relace Bash v podokně Cloud Shell spusťte následující příkaz, kterým naklonujete úložiště GitHub obsahující ukázkový kód aplikace Next.js, který použijete v tomto cvičení:

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

  4. Spuštěním následujícího příkazu přepněte do adresáře obsahujícího klon úložiště GitHub:

    cd ~/mslearn-cloud-native-apps/m03u07/

  5. Spuštěním následujícího příkazu zobrazte obsah souboru ./prisma/schema.prisma obsahující definici datového modelu odpovídající tabulce inventáře v databázi cnainventory :

    cat ./prisma/schema.prisma

    Soubor schema.prisma má následující obsah:

    // 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. Spuštěním následujícího příkazu zobrazte obsah souboru .env, který ukládá připojovací řetězec do databáze Azure PostgreSQL, včetně hodnot představujících název serveru PostgreSQL, názvu účtu správce a jeho hesla (to je DATABASE_URL odkazovaný v souboru ./prisma/schema.prisma):

    cat ./.env

    Soubor obsahuje připojovací řetězec položku v následujícím obsahu:

    DATABASE_URL="postgresql://USER_NAME%40SERVER_NAME:PASSWORD@SERVER_NAME.postgres.database.azure.com:5432/cnainventory"

  7. Spuštěním následujícího příkazu zobrazte obsah souboru index.tsx obsahujícího skript Next.js, který se dotazuje na obsah tabulky inventáře v databázi cnainventory na základě informací odvozených z Prismy:

    cat ./pages/index.tsx

    Poznámka:

    Soubor index.tsx obsahuje následující obsah:

    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

    Poznámka:

    Skript spoléhá na prisma dotazování na obsah databáze a používá React k zobrazení jednotlivých záznamů z tabulky inventáře, včetně příslušných dat.

  8. Spuštěním následujících příkazů načtěte hodnoty koncového bodu rozhraní SQL API služby Cosmos DB a odpovídající přístupový klíč a uložte je do dočasných proměnných:

    RG1NAME=postgresql-db-RG
SERVER_NAME=$(az postgres server list --resource-group $RG1NAME --query "[0].name" --output tsv)
USER_NAME='Student'
PASSWORD='Pa55w0rd1234'

  9. Spuštěním následujících příkazů nahraďte zástupné symboly v souboru .env hodnotami, které jste nastavili v předchozím kroku:

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

  10. Spuštěním následujícího příkazu ověřte, že soubor .env obsahuje skutečné hodnoty serveru Azure PostgreSQL a jeho přihlašovacích údajů pro správu:

    cat ./.env

    Poznámka:

    V tuto chvíli byste obvykle spustili npm run install a npm run-script build. Kvůli problémům s verzí to není přímo dostupné v Azure Cloud Shellu. Opravíte to spuštěním sestavení po nasazení.

Nasazení webové aplikace Aplikace Azure Service hostující aplikaci Next.js

Stejně jako v předchozím cvičení můžete v tuto chvíli kontejnerizovat nově přizpůsobenou aplikaci Next.js. Kvůli jednoduchosti ho ale nasadíte do služby Aplikace Azure Service. Tím získáte rychlý způsob, jak ověřit jeho funkčnost a zajistit, aby kontejnerizace byla proveditelnou možností.

Poznámka:

Stejnou aplikaci můžete nasadit do jakékoli jiné služby Azure, která poskytuje prostředí runtime Node.js, včetně virtuálních počítačů Azure, Azure Container Instances nebo Azure Kubernetes Service.

  1. V okně webového prohlížeče zobrazujícího Azure Portal spusťte z relace Bash v podokně Cloud Shell následující příkazy a vytvořte skupinu prostředků, která bude hostovat webovou aplikaci Azure, do které nasadíte aplikaci Next.js:

    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. Spuštěním následujících příkazů vytvořte plán služby Aplikace Azure, který bude hostovat novou webovou aplikaci Azure:

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

  3. Spuštěním následujících příkazů vytvořte webovou aplikaci Azure založenou na Node.js:

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

  4. Spuštěním následujících příkazů znovu inicializujete místní úložiště Git a potvrdíte všechny změny v hlavní větvi:

    cd ~/wp2104-m03u07/
git init
git add -A
git commit -m "Initial Commit"

  5. Spuštěním následujících příkazů nastavte přihlašovací údaje nasazení na úrovni uživatele:

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

  6. Spuštěním následujících příkazů identifikujte přihlašovací údaje nasazení na úrovni uživatele. Nezapomeňte zaznamenat jejich hodnoty, protože je budete potřebovat později v tomto cvičení:

    echo $DEPLOYMENTUSER
echo $DEPLOYMENTPASS

  7. Spuštěním následujícího příkazu identifikujte adresu URL nasazení webové aplikace Azure, kterou použijete jako cíl git push příkazu:

    DEPLOYMENTURL=$(az webapp deployment source config-local-git --name $WEBAPPNAME --resource-group $RG2NAME --output tsv)

  8. Spuštěním následujícího příkazu nakonfigurujte vzdálené úložiště s názvem Azure, které představuje adresu URL nasazení, kterou jste identifikovali v předchozím kroku:

    git remote add azure $DEPLOYMENTURL

  9. Spuštěním následujících příkazů odešlete obsah hlavní větve do webové aplikace Azure, když se zobrazí výzva k zadání hesla, které je součástí přihlašovacích údajů pro nasazení na úrovni uživatele, které jste si poznamenali dříve v této úloze:

    git push --set-upstream azure master

    Poznámka:

    Počkejte, až se nasazení dokončí. Mělo by to trvat asi deset minut. Po dokončení nasazení by se měla zobrazit zpráva s informací, že nasazení bylo úspěšné.

  10. Zavřete podokno Cloud Shellu.

Ověření funkčnosti aplikace Next.js

V této úloze ověříte funkčnost aplikace Next.js nasazené do webové aplikace Azure.

  1. V okně webového prohlížeče zobrazujícího Azure Portal použijte textové pole Hledat prostředky, služby a dokumenty v horní části stránky webu Azure Portal a vyhledejte App Services.

  2. V okně App Services v seznamu instancí služby App Service vyberte položku představující webovou aplikaci Azure, kterou jste nasadili v předchozím úkolu tohoto cvičení.

    Poznámka:

    Název webové aplikace bude mít předponu nextjs . Můžete ho také identifikovat kontrolou výstupu nasazení, které jste dokončili v předchozím úkolu.

  3. V okně zobrazující vlastnosti webové aplikace v vertikální nabídce v části Vývojové nástroje vyberte položku Editor služby App Service (Preview) a pak v Editoru služby App Service (Preview) vyberte Přejít.

  4. V rozhraní Editoru služby App Service v vertikální nabídce vyberte ikonu Otevřít konzolu, která je přímo za ikonou Start.

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

  5. Z příkazového řádku konzoly spusťte následující příkaz, který sestaví aplikaci Next.js, kterou jste odeslali do webové aplikace Azure:

    npm run-script build

  6. Počkejte na dokončení procesu sestavení.

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

  7. Zavřete kartu webového prohlížeče zobrazující stránku Editor služby App Service.

  8. V okně webu Azure Portal zobrazující vlastnosti webové aplikace vyberte ve svislé nabídce položku s popiskem Přehled. V podokně Základy vyberte odkaz označenou adresu URL. Tím se automaticky otevře další karta webového prohlížeče zobrazující nově nasazenou webovou aplikaci Azure.

  9. Ověřte, že se na stránce webového prohlížeče zobrazí stránka s daty inventáře Next.js – PostgreSQL s položkami inventáře načtenými z databáze Azure PostgreSQL.

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

Výsledky

Blahopřejeme! Dokončili jste třetí a poslední cvičení tohoto modulu. V tomto cvičení jste vytvořili a nakonfigurovali aplikaci založenou na next.js, která spoléhá na Prisma a poskytuje přístup ke službě Azure Database for PostgreSQL.

Vyčištění prostředků

Abyste se vyhnuli zbytečným poplatkům za používání prostředků Azure, měli byste odstranit skupiny prostředků postgresql-db-RG, can-express-RG a can-nextjs-RG , které jste vytvořili v průběhu cvičení tohoto modulu. Uděláte to tak, že na webu Azure Portal přejdete do okna každé z těchto skupin prostředků a na panelu nástrojů vyberete položku Odstranit skupinu prostředků. Do textového pole ZADEJTE NÁZEV SKUPINY PROSTŘEDKŮ zadejte název skupiny prostředků a pak vyberte Odstranit.