Tutorial: Membuat aplikasi TypeScript dengan emulator Azure Cosmos DB dan menyebarkan ke Azure Cosmos DB

Berlaku untuk: ✅ NoSQL

Dalam tutorial ini, Anda menggunakan emulator Linux Azure Cosmos DB sebagai database pengembangan lokal, membangun aplikasi TypeScript, lalu bermigrasi ke Azure Cosmos DB dengan menukar kredensial Anda.

Di tutorial ini, Anda akan:

Memulai emulator Azure Cosmos DB di kontainer Docker
Membuat aplikasi TypeScript
Menyambungkan aplikasi ke emulator lokal
Membuat akun Azure Cosmos DB
Menyebarkan aplikasi ke Azure Cosmos DB

Prasyarat

Node.js 22 atau yang lebih baru
Desktop Docker
Azure CLI
Langganan Azure. Jika Anda tidak memiliki langganan Azure, buat akun free sebelum Memulai.

Mulai emulator

Gunakan gambar kontainer Docker untuk emulator Azure Cosmos DB berbasis Linux untuk membuat database pengembangan lokal.

Tarik gambar kontainer emulator.

docker pull mcr.microsoft.com/cosmosdb/linux/azure-cosmos-emulator:vnext-preview

Mulai kontainer emulator.

docker run --detach --publish 8081:8081 --publish 1234:1234 --name cosmos-db mcr.microsoft.com/cosmosdb/linux/azure-cosmos-emulator:vnext-preview

Verifikasi bahwa kontainer sedang berjalan.
```
docker ps --filter "name=cosmos-db"
```
Penting

Titik akhir gateway emulator tersedia di https://localhost:8081 dan penjelajah data tersedia di http://localhost:1234. Emulator menggunakan kunci autentikasi terkenal:
```
AccountEndpoint=http://localhost:8081/;AccountKey=C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==;
```
Setting Nilai

Titik Akhir https://localhost:8081

Kunci C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==

Setting	Nilai
Titik Akhir	`https://localhost:8081`
Kunci	`C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==`

Buat aplikasi

Buat aplikasi Next.js dan sambungkan ke emulator lokal.

Buat aplikasi Next.js baru di folder kosong. Terima pengaturan default apa pun.
```
npx create-next-app .
```
Instal pustaka klien Node.js untuk Azure Cosmos DB.
```
npm install --save @azure/cosmos
```

Buat file baru bernama app/data.tsx dengan kode berikut. File ini berisi tindakan server yang berinteraksi dengan database.

"use server";

import { CosmosClient } from "@azure/cosmos";
import { revalidatePath } from "next/cache";

const connectionString = "<cosmos-db-connection-string>";

const client = new CosmosClient(connectionString);

const { database } = await client.databases.createIfNotExists({ id: "work-management" });
const { container } = await database.containers.createIfNotExists({ id: "tasks", partitionKey: "/id" });

export type Todo = {
  id: string;
  title: string;
  completed: boolean;
};

export async function getTodos(): Promise<Todo[]> {
  const { resources } = await container.items
    .query("SELECT * FROM c ORDER BY c._ts DESC")
    .fetchAll();
  return resources.map((doc) => ({
    id: doc.id,
    title: doc.title,
    completed: doc.completed,
  }));
}

export async function addTodo(formData: FormData) {
  const title = formData.get("title") as string;
  if (!title?.trim()) return;
  await container.items.create({
    title: title.trim(),
    completed: false,
  });
  revalidatePath("/");
}

export async function toggleTodo(formData: FormData) {
  const id = formData.get("id") as string;
  const { resource: doc } = await container.item(id, id).read();
  if (doc) {
    await container.item(id, id).replace({
      ...doc,
      completed: !doc.completed,
    });
  }
  revalidatePath("/");
}

export async function deleteTodo(formData: FormData) {
  const id = formData.get("id") as string;
  await container.item(id, id).delete();
  revalidatePath("/");
}

Penting

Ganti tempat penampung string koneksi dengan kredensial yang ditentukan sebelumnya dalam tutorial ini saat memulai kontainer.

Hapus file yang app/page.tsx ada dan ganti dengan kode berikut.

import { getTodos, addTodo, toggleTodo, deleteTodo } from "./data";

export default async function Home() {
  const todos = await getTodos();

  return (
    <div className="min-h-screen bg-black text-zinc-50 font-sans">
      <main className="max-w-lg mx-auto py-16 px-8">
        <h1 className="text-2xl font-semibold tracking-tight mb-8">Todo App</h1>

        <form action={addTodo} className="flex gap-2 mb-8">
          <input
            name="title"
            placeholder="Add a todo..."
            required
            className="flex-1 rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-600"
          />
          <button type="submit" className="rounded-md bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-300 transition-colors">
            Add
          </button>
        </form>

        <ul className="space-y-2">
          {todos.map((todo) => (
            <li key={todo.id} className="flex items-center gap-3 rounded-md border border-zinc-800 bg-zinc-900 px-3 py-2">
              <form action={toggleTodo}>
                <input type="hidden" name="id" value={todo.id} />
                <button type="submit" className="text-lg leading-none">{todo.completed ? "✅" : "⬜"}</button>
              </form>
              <span className={`flex-1 text-sm ${todo.completed ? "line-through text-zinc-500" : "text-zinc-100"}`}>{todo.title}</span>
              <form action={deleteTodo}>
                <input type="hidden" name="id" value={todo.id} />
                <button type="submit" className="text-sm text-red-400 hover:text-red-300 transition-colors">✕</button>
              </form>
            </li>
          ))}
        </ul>

        {todos.length === 0 && <p className="text-center text-sm text-zinc-500 mt-4">No todos yet.</p>}
      </main>
    </div>
  );
}

Jalankan aplikasi secara lokal.
```
npm run dev
```
Buka http://localhost:3000 di browser Anda untuk memverifikasi aplikasi berjalan dan terhubung ke emulator.

Petunjuk / Saran

Anda dapat meninjau data yang dibuat aplikasi ini di Data Explorer Emulator Azure Cosmos DB di http://localhost:1234. Anda juga dapat menggunakan ekstensi Azure Cosmos DB untuk Visual Studio Code Database diberi nama work-management dan kontainer diberi nama tasks.
Hentikan aplikasi.

Membuat akun Azure Cosmos DB

Buat akun Azure Cosmos DB untuk menghosting data aplikasi Anda di cloud.

Buat variabel untuk nama akun dan nama grup sumber daya target.
```
RESOURCE_GROUP_NAME="<resource-group-name>"
ACCOUNT_NAME="<account-name>"
```
Penting

Ganti <resource-group-name> dan <account-name> dengan nilai Anda sendiri. Nama akun harus unik secara global.

Buat akun Azure Cosmos DB.

az cosmosdb create \
  --resource-group $RESOURCE_GROUP_NAME \
  --name $ACCOUNT_NAME

Dapatkan string koneksi untuk akun.

az cosmosdb keys list \
  --resource-group $RESOURCE_GROUP_NAME \
  --name $ACCOUNT_NAME \
  --type connection-strings \
  --query "connectionStrings[0].connectionString" \
  --output tsv

Catat nilai string koneksi. Anda menggunakannya di langkah berikutnya.

Menyambungkan aplikasi ke Azure Cosmos DB

Perbarui aplikasi untuk terhubung ke Azure Cosmos DB alih-alih emulator lokal.

Di app/data.tsx, ganti string koneksi emulator dengan string koneksi Azure Cosmos DB.
```
const connectionString = "<azure-cosmos-db-connection-string>";
```
Penting

Ganti <azure-cosmos-db-connection-string> dengan string koneksi yang Anda rekam di langkah sebelumnya.
Mulai aplikasi lagi.
```
npm run dev
```
Buka http://localhost:3000 di browser Anda. Aplikasi sekarang membaca dan menulis data ke akun Azure Cosmos DB Anda.

Membersihkan sumber daya

Ketika Anda tidak lagi memerlukan sumber daya yang dibuat dalam tutorial ini, hapus sumber daya tersebut untuk menghindari dikenakan biaya.

Hapus akun Azure Cosmos DB.

az cosmosdb delete \
  --resource-group $RESOURCE_GROUP_NAME \
  --name $ACCOUNT_NAME \
  --yes

Hentikan dan hapus kontainer emulator.

docker stop cosmos-db
docker rm cosmos-db

Langkah selanjutnya

Quickstart: Azure Cosmos DB dengan Node.js

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2026-04-27