Latihan - Menyiapkan aplikasi web manajemen Next.js

  • 20 menit

Latihan ini membawa Anda melalui proses pembuatan dan konfigurasi layanan web berbasis Next.js yang bergantung pada Prisma untuk menyediakan akses ke Azure Database for PostgreSQL.

Catatan

Prisma adalah pustaka pemeta hubungan objek yang baru-baru ini dikembangkan yang menyediakan pendekatan alternatif untuk pemodelan data dari yang ditawarkan oleh Sequelize.

Dalam latihan ini, Anda akan:

  • Mengonfigurasi aplikasi Next.js.
  • Menyebarkan aplikasi web Azure App Service yang meng-hosting aplikasi Next.js.
  • Memvalidasi fungsionalitas aplikasi Next.js.

Prasyarat

Untuk melakukan latihan ini, Anda membutuhkan:

  • Langganan Azure.
  • Akun Microsoft atau akun Microsoft Entra dengan peran Administrator Global di penyewa Microsoft Entra yang terkait dengan langganan Azure dan dengan peran Pemilik atau Kontributor dalam langganan Azure.
  • Untuk menyelesaikan latihan pertama dalam modul ini. Anda akan menggunakan database Azure PostgreSQL yang Anda buat dan mengonfigurasinya dalam latihan tersebut.

Mengonfigurasi aplikasi Next.js

Dalam tugas ini, Anda akan mengkloning repositori GitHub yang berisi sampel kode Next.js dan mengkustomisasinya untuk menyambungkan ke database Azure PostgreSQL yang ada.

  1. Jika perlu, buka browser web, navigasikan ke portal Microsoft Azure dan masuk untuk mengakses langganan Azure yang Anda gunakan dalam modul ini.

  2. Di portal Microsoft Azure, mulai sesi Bash dalam Cloud Shell dengan memilih ikon dari toolbar di samping kotak teks pencarian.

  3. Dari sesi Bash pada panel Cloud Shell, jalankan perintah berikut untuk mengkloning repositori GitHub yang berisi sampel kode aplikasi Next.js yang akan Anda gunakan dalam latihan ini:

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

  4. Jalankan perintah berikut untuk beralih ke direktori yang berisi kloning repositori GitHub:

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

  5. Jalankan perintah berikut untuk menampilkan konten file ./prisma/schema.prisma yang berisi definisi model data yang terkait dengan tabel inventaris dalam database cnainventory:

    cat ./prisma/schema.prisma

    File schema.prisma memiliki konten berikut:

    // 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. Jalankan perintah berikut untuk menampilkan konten file .env yang menyimpan string koneksi ke database Azure PostgreSQL termasuk nilai yang mewakili nama server PostgreSQL, nama akun administratif, dan kata sandinya (itulah yang direferensikan oleh DATABASE_URL dalam file ./prisma/schema.prisma):

    cat ./.env

    File menyertakan entri string koneksi dalam konten berikut:

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

  7. Jalankan perintah berikut untuk menampilkan konten file index.tsx yang berisi skrip Next.js yang meminta konten tabel inventaris dalam database cnainventory berdasarkan informasi yang berasal dari Prisma:

    cat ./pages/index.tsx

    Catatan

    File index.tsx memiliki konten berikut:

    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

    Catatan

    Skripnya bergantung pada Prisma untuk mengkueri konten database dan menggunakan React untuk menampilkan rekaman individual dari tabel inventaris, termasuk data mereka masing-masing.

  8. Jalankan perintah berikut untuk mengambil nilai titik akhir API SQL Cosmos DB dan kunci akses yang sesuai dan simpan dalam variabel sementara:

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

  9. Jalankan perintah berikut untuk mengganti tempat penampung di file .env dengan nilai yang Anda tetapkan di langkah sebelumnya:

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

  10. Jalankan perintah berikut untuk memvalidasi bahwa file .env berisi nilai aktual dari server Azure PostgreSQL dan kredensial administratifnya:

    cat ./.env

    Catatan

    Pada titik ini, Anda biasanya akan menjalankan npm run install dan npm run-script build. Karena masalah penerapan versi, ini tidak tersedia secara langsung di Azure Cloud Shell. Anda akan memulihkannya dengan menjalankan build mengikuti penyebaran.

Menyebarkan aplikasi web Azure App Service yang meng-hosting aplikasi Next.js

Seperti dalam latihan sebelumnya, Anda bisa, pada titik ini, melakukan kontainerisasi terhadap aplikasi Next.js yang baru dikustomisasi. Namun, demi kesederhanaan, Anda akan menyebarkannya ke Azure App Service. Ini akan memberikan cara cepat untuk memvalidasi kegunaannya dan memastikan bahwa mengkontainerkannya adalah opsi yang layak.

Catatan

Anda dapat menerapkan aplikasi yang sama ke layanan Azure lainnya yang menyediakan lingkungan runtime Node.js, termasuk Azure VM, Azure Container Instances, atau Azure Kubernetes Service.

  1. Dalam jendela browser web yang menampilkan portal Microsoft Azure, dari sesi Bash pada panel Cloud Shell, jalankan perintah berikut untuk membuat grup sumber daya yang akan meng-hosting aplikasi web Azure, ketika Anda akan menggunakan aplikasi 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. Jalankan perintah berikut untuk membuat paket Azure App Service yang akan meng-hosting aplikasi web Azure baru:

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

  3. Jalankan perintah berikut untuk membuat aplikasi web Azure berbasis Node.js:

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

  4. Jalankan perintah berikut untuk menginisiialisasi kembali repositori Git lokal dan lakukan semua perubahan di cabang utama:

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

  5. Jalankan perintah berikut untuk menyiapkan info masuk penyebaran tingkat pengguna:

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

  6. Jalankan perintah berikut untuk mengidentifikasi info masuk penyebaran tingkat pengguna. Pastikan untuk merekam nilai-nilainya karena Anda akan membutuhkannya nanti dalam latihan ini:

    echo $DEPLOYMENTUSER
echo $DEPLOYMENTPASS

  7. Jalankan perintah berikut untuk mengidentifikasi URL penyebaran aplikasi web Azure yang akan Anda gunakan sebagai target perintah git push:

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

  8. Jalankan perintah berikut untuk mengonfigurasi repo jarak jauh bernama azure, mewakili URL penyebaran yang Anda identifikasi di langkah sebelumnya:

    git remote add azure $DEPLOYMENTURL

  9. Jalankan perintah berikut untuk mendorong konten cabang master ke aplikasi web Azure, ketika diminta untuk memberikan kata sandi yang merupakan bagian dari info masuk penyebaran tingkat pengguna yang Anda rekam sebelumnya dalam tugas ini:

    git push --set-upstream azure master

    Catatan

    Tunggu hingga penerapan selesai. Proses ini memerlukan waktu sekitar sepuluh menit. Setelah penyebaran selesai, Anda harus menerima pesan yang menyatakan bahwa penyebaran berhasil.

  10. Tutup panel Cloud Shell.

Memvalidasi fungsionalitas aplikasi Next.js

Dalam tugas ini, Anda akan memvalidasi fungsionalitas aplikasi Next.js yang disebarkan ke aplikasi web Azure.

  1. Di jendela browser web yang menampilkan portal Azure, gunakan kotak teks Cari sumber daya, layanan, dan dokumen di bagian atas halaman portal Azure untuk mencari App Services.

  2. Pada panel App Services dalam daftar instans App Service, pilih entri yang mewakili aplikasi web Azure yang Anda sebarkan dalam tugas sebelumnya dari latihan ini.

    Catatan

    Nama aplikasi web akan memiliki awalan nextjs. Anda juga dapat mengidentifikasinya dengan meninjau output penyebaran yang Anda selesaikan di tugas sebelumnya.

  3. Pada bilah yang menampilkan properti aplikasi web di menu vertikal, di bagian Alat Pengembangan, pilih entri Editor Layanan Aplikasi (Pratinjau), lalu pada Editor App Service (Pratinjau), pilih Buka.

  4. Pada antarmuka Editor App Service, di menu vertikal, pilih ikon Buka Konsol yang berada tepat setelah ikon Mulai.

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

  5. Dari permintaan konsol, jalankan perintah berikut untuk membangun aplikasi Next.js yang Anda dorong ke aplikasi web Azure:

    npm run-script build

  6. Tunggu hingga proses pembangunan selesai.

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

  7. Tutup tab browser web yang menampilkan halaman Editor Layanan Aplikasi.

  8. Pada bilah portal Microsoft Azure yang menampilkan properti aplikasi web, di menu vertikal pilih entri berlabel Gambaran Umum. Pada panel Esensial, pilih tautan berlabel URL. Upaya ini akan secara otomatis membuka tab browser web lain yang menampilkan aplikasi web Azure yang baru disebar.

  9. Verifikasi bahwa halaman browser web menampilkan halaman Next.js - data inventaris PostgreSQL dengan item inventaris yang diambil dari database Azure PostgreSQL.

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

Hasil

Selamat! Anda telah menyelesaikan latihan ketiga dan yang terakhir dari modul ini. Dalam latihan ini, Anda membuat dan mengonfigurasi aplikasi berbasis Next.js yang bergantung pada Prisma untuk menyediakan akses ke Azure Database for PostgreSQL.

Membersihkan sumber daya

Untuk menghindari biaya yang tidak perlu dari penggunaan sumber daya Azure, Anda harus menghapus grup sumber daya postgresql-db-RG, cna-express-RG, dan cna-nextjs-RG yang Anda buat selama melakukan latihan di modul ini. Untuk melakukannya, di portal Microsoft Azure, navigasikan ke panel masing-masing grup sumber daya ini, dan pilih entri Hapus grup sumber daya di toolbar. Dalam kotak teks KETIK NAMA GRUP SUMBER DAYA, masukkan nama grup sumber daya, lalu pilih Hapus.