Tutorial: Membuat aplikasi TypeScript dengan DocumentDB dan menyebarkan ke Azure DocumentDB

Dalam tutorial ini, Anda menggunakan DocumentDB sebagai database pengembangan lokal dalam kontainer Docker, membangun aplikasi TypeScript dengan driver MongoDB, lalu bermigrasi ke Azure DocumentDB dengan menukar string koneksi Anda.

Di tutorial ini, Anda akan:

Memulai DocumentDB dalam kontainer Docker
Membuat aplikasi TypeScript
Menyambungkan aplikasi ke database lokal
Membuat kluster DocumentDB Azure
Menyebarkan aplikasi ke Azure DocumentDB

Prasyarat

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

Memulai kontainer

Gunakan gambar kontainer Docker untuk DocumentDB untuk membuat database pengembangan lokal.

Tarik gambar kontainer DocumentDB.

docker pull ghcr.io/documentdb/documentdb/documentdb-local:latest

Mulai kontainer dengan nama pengguna dan kata sandi.

docker run --detach --publish 10260:10260 --name documentdb ghcr.io/documentdb/documentdb/documentdb-local:latest --username <admin-username> --password <admin-password>

Penting

Ganti <admin-username> dan <admin-password> dengan kredensial Anda sendiri.

Verifikasi bahwa kontainer sedang berjalan.

docker ps --filter "name=documentdb"

Penting

Titik akhir gateway DocumentDB tersedia di port 10260. Gunakan format string koneksi berikut untuk menyambungkan:

mongodb://<admin-username>:<admin-password>@localhost:10260/?tls=true&tlsAllowInvalidCertificates=true

Setting	Nilai
Titik Akhir	`https://localhost:10260`
Nama pengguna	`<admin-username>`
Password	`<admin-password>`
TLS	`true`
TLS Memungkinkan Sertifikat Tidak Valid	`true`

Ganti <admin-username> dan <admin-password> dengan kredensial Anda sendiri.

Buat aplikasi

Buat aplikasi Next.js dan sambungkan ke database lokal.

Buat aplikasi Next.js baru di folder kosong.
```
npx create-next-app .
```
Instal driver Node.js MongoDB.
```
npm install --save mongodb
```

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

"use server";

import { MongoClient, ObjectId } from "mongodb";
import { revalidatePath } from "next/cache";

const connectionString = "<documentdb-connection-string>";

const client = new MongoClient(connectionString);
const db = client.db("work-management");
const collection = db.collection("tasks");

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

export async function getTodos(): Promise<Todo[]> {
  const docs = await collection.find().sort({ _id: -1 }).toArray();
  return docs.map((doc) => ({
    id: doc._id.toString(),
    title: doc.title,
    completed: doc.completed,
  }));
}

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

export async function toggleTodo(formData: FormData) {
  const id = formData.get("id") as string;
  const doc = await collection.findOne({ _id: new ObjectId(id) });
  if (doc) {
    await collection.updateOne(
      { _id: new ObjectId(id) },
      { $set: { completed: !doc.completed } }
    );
  }
  revalidatePath("/");
}

export async function deleteTodo(formData: FormData) {
  const id = formData.get("id") as string;
  await collection.deleteOne({ _id: new ObjectId(id) });
  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 bahwa aplikasi berjalan dan tersambung ke database lokal.

Petunjuk / Saran

Anda dapat melihat data yang dibuat aplikasi ini dengan menyambungkan ke kontainer DocumentDB dengan ekstensi DocumentDB untuk Visual Studio Code. Database diberi nama work-management dan koleksi diberi nama tasks.
Hentikan aplikasi.

Membuat kluster DocumentDB Azure

Buat kluster Azure DocumentDB untuk menghosting data aplikasi Anda di cloud.

Buat variabel untuk nama kluster dan nama grup sumber daya target.
```
RESOURCE_GROUP_NAME="<resource-group-name>"
CLUSTER_NAME="<cluster-name>"
ADMIN_USERNAME="<admin-username>"
ADMIN_PASSWORD="<admin-password>"
```
Penting

Gantilah nilai placeholder dengan nilai Anda sendiri. Nama kluster harus unik secara global.

Buat kluster DocumentDB Azure.

az cosmosdb mongocluster create \
  --resource-group $RESOURCE_GROUP_NAME \
  --cluster-name $CLUSTER_NAME \
  --location "eastus" \
  --administrator-login $ADMIN_USERNAME \
  --administrator-login-password $ADMIN_PASSWORD \
  --server-version "8.0" \
  --shard-node-tier "M30" \
  --shard-node-ha false \
  --shard-node-disk-size-gb 128 \
  --shard-node-count 1

Buat aturan firewall untuk mengizinkan akses dari alamat IP Anda saat ini.

MY_IP=$(curl -s ifconfig.me)

az cosmosdb mongocluster firewall rule create \
  --resource-group $RESOURCE_GROUP_NAME \
  --cluster-name $CLUSTER_NAME \
  --rule-name "allow-my-ip" \
  --start-ip-address $MY_IP \
  --end-ip-address $MY_IP

Dapatkan string koneksi untuk kluster.

az cosmosdb mongocluster show \
  --resource-group $RESOURCE_GROUP_NAME \
  --cluster-name $CLUSTER_NAME \
  --query "connectionString" \
  --output tsv

Catat nilai string koneksi. Anda menggunakannya di langkah berikutnya.

Menyambungkan aplikasi ke Azure DocumentDB

Perbarui aplikasi untuk menyambungkan ke Azure DocumentDB alih-alih kontainer lokal.

Di app/data.tsx, ganti string koneksi lokal dengan string koneksi Azure DocumentDB.
```
const connectionString = "<azure-documentdb-connection-string>";
```
Penting

Ganti <azure-documentdb-connection-string> dengan string koneksi yang Anda rekam di langkah sebelumnya. Connection string dari portal tidak berisi kata sandi. Gantilah placeholder <password> di string koneksi dengan kata sandi yang Anda tentukan ketika membuat kluster.
Mulai aplikasi lagi.
```
npm run dev
```
Buka http://localhost:3000 di browser Anda. Aplikasi sekarang membaca dan menulis data ke kluster DocumentDB Azure 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 gugus Azure DocumentDB.

az cosmosdb mongocluster delete \
  --resource-group $RESOURCE_GROUP_NAME \
  --cluster-name $CLUSTER_NAME \
  --yes

Hentikan dan hapus kontainer DocumentDB.

docker stop documentdb
docker rm documentdb

Langkah selanjutnya

Quickstart: Azure DocumentDB dengan Node.js

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2026-04-27

Tutorial: Membuat aplikasi TypeScript dengan DocumentDB dan menyebarkan ke Azure DocumentDB

Prasyarat

Memulai kontainer

Buat aplikasi

Membuat kluster DocumentDB Azure

Menyambungkan aplikasi ke Azure DocumentDB

Membersihkan sumber daya

Langkah selanjutnya

Saran dan Komentar

Sumber Daya Tambahan: