Tutorial: Membangun chatbot dengan Azure App Service dan Azure OpenAI (Express.js)

2025-05-20

Dalam tutorial ini, Anda akan membangun aplikasi AI cerdas dengan mengintegrasikan Azure OpenAI dengan aplikasi Node.js dan menyebarkannya ke Azure App Service. Anda akan membuat aplikasi Express dengan tampilan dan pengontrol yang mengirim permintaan penyelesaian obrolan ke model di Azure OpneAI.

Cuplikan layar memperlihatkan chatbot yang berjalan di Azure App Service.

Dalam tutorial ini, Anda akan belajar cara:

Buat sumber daya Azure OpenAI dan sebarkan model bahasa.
Buat aplikasi Express.js yang tersambung ke Azure OpenAI.
Sebarkan aplikasi ke Azure App Service.
Terapkan autentikasi aman tanpa kata sandi baik di lingkungan pengembangan maupun di Azure.

Prasyarat

Akun Azure dengan langganan aktif
Akun GitHub untuk menggunakan GitHub Codespaces

1. Membuat sumber daya Azure OpenAI

Di bagian ini, Anda akan menggunakan GitHub Codespaces untuk membuat sumber daya Azure OpenAI dengan Azure CLI.

Buka GitHub Codespaces dan masuk dengan akun GitHub Anda.
Temukan templat Kosong oleh GitHub dan pilih Gunakan templat ini untuk membuat Codespace kosong baru.

Di terminal Codespace, instal Azure CLI:

curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash

Masuk ke akun Azure Anda:
```
az login
```
Ikuti instruksi di terminal untuk mengautentikasi.
Atur variabel lingkungan untuk nama grup sumber daya, nama layanan Azure OpenAI, dan lokasi Anda:
```
export RESOURCE_GROUP="<group-name>"
export OPENAI_SERVICE_NAME="<azure-openai-name>"
export APPSERVICE_NAME="<app-name>"
export LOCATION="eastus2"
```
Penting

Wilayah ini sangat penting karena terkait dengan ketersediaan regional model yang dipilih. Ketersediaan model dan ketersediaan jenis penyebaran bervariasi dari wilayah ke wilayah. Tutorial ini menggunakan gpt-4o-mini, yang tersedia di eastus2 dengan jenis penyebaran Standar. Jika Anda menyebarkan ke wilayah lain, model ini mungkin tidak tersedia atau mungkin memerlukan tingkat yang berbeda. Sebelum mengubah wilayah, lihat Tabel ringkasan model dan ketersediaan wilayah untuk memverifikasi dukungan model di wilayah pilihan Anda.

Buat grup sumber daya dan sumber daya Azure OpenAI dengan domain kustom, lalu tambahkan model gpt-4o-mini:

# Resource group
az group create --name $RESOURCE_GROUP --location $LOCATION
# Azure OpenAI resource
az cognitiveservices account create \
  --name $OPENAI_SERVICE_NAME \
  --resource-group $RESOURCE_GROUP \
  --location $LOCATION \
  --custom-domain $OPENAI_SERVICE_NAME \
  --kind OpenAI \
  --sku s0
# gpt-4o-mini model
az cognitiveservices account deployment create \
  --name $OPENAI_SERVICE_NAME \
  --resource-group $RESOURCE_GROUP \
  --deployment-name gpt-4o-mini \
  --model-name gpt-4o-mini \
  --model-version 2024-07-18 \
  --model-format OpenAI \
  --sku-name Standard \
  --sku-capacity 1
# Cognitive Services OpenAI User role that lets the signed in Azure user to read models from Azure OpenAI
az role assignment create \
  --assignee $(az ad signed-in-user show --query id -o tsv) \
  --role "Cognitive Services OpenAI User" \
  --scope /subscriptions/$(az account show --query id -o tsv)/resourceGroups/$RESOURCE_GROUP/providers/Microsoft.CognitiveServices/accounts/$OPENAI_SERVICE_NAME

Sekarang setelah Anda memiliki sumber daya Azure OpenAI, Anda akan membuat aplikasi web untuk berinteraksi dengannya.

2. Membuat dan menyiapkan aplikasi web Express.js

Di terminal Codespace Anda, buat templat Express.js di ruang kerja dan coba jalankan pertama kali.
```
npx express-generator . --view ejs
npm audit fix --force
npm install && npm start
```
Anda akan melihat pemberitahuan di GitHub Codespaces yang menunjukkan bahwa aplikasi tersedia di port tertentu. Pilih Buka di browser untuk meluncurkan aplikasi di tab browser baru.
Kembali ke terminal Codespace, hentikan aplikasi dengan Ctrl+C.
Instal dependensi NPM untuk bekerja dengan Azure OpenAI:
```
npm install openai @azure/openai @azure/identity
```

Buka views/index.ejs dan ganti dengan kode berikut, untuk antarmuka obrolan sederhana.

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body class="bg-light">
    <div class="container py-4">
      <h1 class="mb-4"><%= title %></h1>
      <div class="card mb-3">
        <div class="card-body" style="min-height: 80px;">
          <form action="/chat" method="POST" class="d-flex gap-2 mb-3">
            <input type="text" name="message" class="form-control" placeholder="Type your message..." autocomplete="off" required />
            <button type="submit" class="btn btn-primary">Send</button>
          </form>
          <% if (aiMessage) { %>
            <div class="mb-2">
              <span class="fw-bold text-success">AI:</span>
              <span class="ms-2"><%= aiMessage %></span>
            </div>
          <% } %>
        </div>
      </div>
    </div>
  </body>
</html>

Buka rute/index.js dan ganti kontennya dengan kode berikut, untuk panggilan penyelesaian obrolan sederhana dengan Azure OpenAI:

var express = require('express');
var router = express.Router();
const { AzureOpenAI } = require('openai');
const { getBearerTokenProvider, DefaultAzureCredential } = require('@azure/identity');

const endpoint = process.env.AZURE_OPENAI_ENDPOINT;
const deployment = 'gpt-4o-mini';
const apiVersion = '2024-10-21';

const credential = new DefaultAzureCredential();
const scope = 'https://cognitiveservices.azure.com/.default';
const azureADTokenProvider = getBearerTokenProvider(credential, scope);

// Initialize Azure OpenAI client using Microsoft Entra authentication
const openai = new AzureOpenAI({ endpoint, azureADTokenProvider, deployment, apiVersion });

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express Chat', aiMessage: null });
});

router.post('/chat', async function(req, res, next) {
  const userMessage = req.body.message;
  if (!userMessage) {
    return res.redirect('/');
  }
  let aiMessage = '';
  try {
    // Call Azure OpenAI chat completion
    const result = await openai.chat.completions.create({
      model: deployment,
      messages: [
        { role: 'system', content: 'You are a helpful assistant.' },
        { role: 'user', content: userMessage }
      ],
    });
    aiMessage = result.choices[0]?.message?.content || '';
  } catch (err) {
    aiMessage = 'Error: Unable to get response from Azure OpenAI.';
  }
  res.render('index', { title: 'Express Chat', aiMessage });
});

module.exports = router;

Pada terminal, dapatkan titik akhir OpenAI Anda:

az cognitiveservices account show \
  --name $OPENAI_SERVICE_NAME \
  --resource-group $RESOURCE_GROUP \
  --query properties.endpoint \
  --output tsv

Jalankan aplikasi lagi dengan menambahkan AZURE_OPENAI_ENDPOINT dengan nilainya dari output CLI:
```
AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> npm start
```
Pilih Buka di browser untuk meluncurkan aplikasi di tab browser baru. Kirimkan pertanyaan dan lihat apakah Anda mendapatkan pesan respons.

3. Sebarkan ke Azure App Service dan konfigurasikan koneksi OpenAI

Sekarang setelah aplikasi Anda berfungsi secara lokal, mari kita sebarkan ke Azure App Service dan siapkan koneksi layanan ke Azure OpenAI menggunakan identitas terkelola.

Pertama, sebarkan aplikasi Anda ke Azure App Service menggunakan perintah az webapp upAzure CLI . Perintah ini membuat aplikasi web baru dan menyebarkan kode Anda ke dalamnya:
```
az webapp up \
  --resource-group $RESOURCE_GROUP \
  --location $LOCATION \
  --name $APPSERVICE_NAME \
  --plan $APPSERVICE_NAME \
  --sku B1 \
  --os-type Linux \
  --track-status false
```
Perintah ini mungkin perlu waktu beberapa menit untuk diselesaikan. Ini membuat aplikasi web baru di grup sumber daya yang sama dengan sumber daya OpenAI Anda.
Setelah aplikasi disebarkan, buat koneksi layanan antara aplikasi web Anda dan sumber daya Azure OpenAI menggunakan identitas terkelola:
```
az webapp connection create cognitiveservices \
  --resource-group $RESOURCE_GROUP \
  --name $APPSERVICE_NAME \
  --target-resource-group $RESOURCE_GROUP \
  --account $OPENAI_SERVICE_NAME \
  --connection azure-openai \
  --system-identity
```
Perintah ini membuat koneksi antara aplikasi web Anda dan sumber daya Azure OpenAI dengan:
- Menghasilkan identitas terkelola yang ditetapkan sistem untuk aplikasi web.
- Menambahkan peran Kontributor Cognitive Services OpenAI ke identitas yang dikelola untuk sumber daya Azure OpenAI.
- AZURE_OPENAI_ENDPOINT Menambahkan pengaturan aplikasi ke aplikasi web Anda.
Buka aplikasi web yang disebarkan di browser. Temukan URL aplikasi web yang disebarkan di output terminal. Buka browser web Anda dan navigasikan ke browser web tersebut.
```
az webapp browse
```
Ketik pesan di kotak teks dan pilih "Kirim, dan berikan aplikasi beberapa detik untuk membalas dengan pesan dari Azure OpenAI.

Aplikasi Anda sekarang disebarkan dan terhubung ke Azure OpenAI dengan identitas terkelola.

Tanya jawab umum

Bagaimana jika saya ingin tersambung ke OpenAI alih-alih Azure OpenAI?
Dapatkah saya tersambung ke Azure OpenAI dengan kunci API sebagai gantinya?
Bagaimana cara kerja DefaultAzureCredential dalam tutorial ini?

Bagaimana jika saya ingin tersambung ke OpenAI alih-alih Azure OpenAI?

Untuk menyambungkan ke OpenAI, gunakan kode berikut:

const { OpenAI } = require('openai');

const client = new OpenAI({
  apiKey: "<openai-api-key>",
});

Untuk informasi selengkapnya, lihat Autentikasi OpenAI API.

Saat bekerja dengan rahasia koneksi di App Service, Anda harus menggunakan referensi Key Vault alih-alih menyimpan rahasia langsung di basis kode Anda. Ini memastikan bahwa informasi sensitif tetap aman dan dikelola secara terpusat.

Dapatkah saya tersambung ke Azure OpenAI dengan kunci API sebagai gantinya?

Ya, Anda dapat terhubung ke Azure OpenAI menggunakan kunci API alih-alih identitas terkelola. Untuk informasi selengkapnya, lihat panduan cepat Azure OpenAI JavaScript.

Bagaimana cara kerja DefaultAzureCredential dalam tutorial ini?

DefaultAzureCredential menyederhanakan autentikasi dengan secara otomatis memilih metode autentikasi terbaik yang tersedia.

Selama pengembangan lokal: Setelah Anda menjalankan az login, ini menggunakan kredensial Azure CLI lokal Anda.
Saat disebarkan ke Azure App Service: Ini menggunakan identitas terkelola aplikasi untuk autentikasi tanpa kata sandi yang aman.

Pendekatan ini memungkinkan kode Anda berjalan dengan aman dan lancar di lingkungan lokal dan cloud tanpa modifikasi.

Bagikan melalui