Öğretici: DocumentDB ile TypeScript uygulaması oluşturma ve Azure DocumentDB'ye dağıtma

Bu öğreticide, DocumentDB'yi Docker kapsayıcısında yerel geliştirme veritabanı olarak kullanır, MongoDB sürücüsüyle bir TypeScript uygulaması oluşturur ve ardından bağlantı dizesi değiştirerek Azure DocumentDB'ye geçiş yaparsınız.

Bu eğitimde, siz:

Docker kapsayıcısında DocumentDB'i başlatma
TypeScript uygulaması oluşturma
Uygulamayı yerel veritabanına bağlama
Azure DocumentDB kümesi oluşturma
Uygulamayı Azure DocumentDB'ye dağıtma

Önkoşullar

Node.js 18 veya üzeri
Docker Desktop
Azure CLI
Azure aboneliği. Azure aboneliğiniz yoksa başlamadan önce free hesabı oluşturun.

Kapsayıcıyı başlat

Yerel bir geliştirme veritabanı oluşturmak için DocumentDB için Docker kapsayıcı görüntüsünü kullanın.

DocumentDB kapsayıcı görüntüsünü çekin.

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

Kapsayıcıyı bir kullanıcı adı ve parolayla başlatın.

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

Önemli

<admin-username> ve <admin-password> öğelerini kendi kimlik bilgilerinizle değiştirin.

Kapsayıcının çalıştığını doğrulayın.

docker ps --filter "name=documentdb"

Önemli

DocumentDB ağ geçidi uç noktası, 10260 numaralı bağlantı noktasında mevcuttur. Bağlanmak için aşağıdaki bağlantı dizesi biçimini kullanın:

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

Setting	Değer
Bitiş noktası	`https://localhost:10260`
Kullanıcı adı	`<admin-username>`
Parola	`<admin-password>`
TLS	`true`
TLS Geçersiz Sertifikalara İzin Ver	`true`

<admin-username> ve <admin-password> öğelerini kendi kimlik bilgilerinizle değiştirin.

Uygulamayı oluşturma

bir Next.js uygulaması oluşturun ve yerel veritabanına bağlayın.

Boş bir klasörde yeni bir Next.js uygulaması oluşturun.
```
npx create-next-app .
```
Node.js MongoDB sürücüsünü yükleyin.
```
npm install --save mongodb
```

Aşağıdaki kodla adlı app/data.tsx yeni bir dosya oluşturun. Bu dosya, veritabanıyla etkileşim kuran sunucu eylemlerini içerir.

"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("/");
}

Önemli

Kapsayıcıyı başlatırken ‘bağlantı dizesi’ yer tutucusunu, bu öğreticinin önceki bölümlerinde belirtilen kimlik bilgileriyle değiştirin.

Varolan app/page.tsx dosyayı silin ve aşağıdaki kodla değiştirin.

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>
  );
}

Uygulamayı yerel olarak çalıştırın.
```
npm run dev
```
Uygulamanın çalıştığını ve yerel veritabanına bağlı olduğunu doğrulamak için tarayıcınızda açın http://localhost:3000 .

Tip

Bu uygulamanın oluşturduğu verileri, Visual Studio Code için DocumentDB uzantısıyla DocumentDB kapsayıcısına bağlanarak görüntüleyebilirsiniz. Veritabanının adı work-management, koleksiyonun adı tasks olarak adlandırılır.
Uygulamayı durdurun.

Azure DocumentDB kümesi oluşturma

Uygulama verilerinizi bulutta barındırmak için bir Azure DocumentDB kümesi oluşturun.

Küme adı ve hedef kaynak grubu adı için değişkenler oluşturun.
```
RESOURCE_GROUP_NAME="<resource-group-name>"
CLUSTER_NAME="<cluster-name>"
ADMIN_USERNAME="<admin-username>"
ADMIN_PASSWORD="<admin-password>"
```
Önemli

Yer tutucu değerlerini kendi değerlerinizle değiştirin. Küme adı genel olarak benzersiz olmalıdır.

Azure DocumentDB kümesi oluşturun.

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

Geçerli IP adresinizden erişime izin vermek için bir güvenlik duvarı kuralı oluşturun.

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

Küme için bağlantı dizisini alın.

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

bağlantı dizesi değerini kaydedin. Bunu sonraki adımda kullanacaksınız.

Uygulamayı Azure DocumentDB'ye bağlama

Uygulamayı yerel kapsayıcı yerine Azure DocumentDB'ye bağlanacak şekilde güncelleştirin.

app/data.tsx içinde, yerel bağlantı dizesini Azure DocumentDB bağlantı dizesi ile değiştirin.
```
const connectionString = "<azure-documentdb-connection-string>";
```
Önemli

<azure-documentdb-connection-string> yerine önceki adımda kaydettiğiniz bağlantı dizisini ekleyin. Portaldaki bağlantı dizesi parolayı içermez. bağlantı dizesi <password> yer tutucusunun yerine kümeyi oluştururken belirttiğiniz parolayı yazın.
Uygulamayı yeniden başlatın.
```
npm run dev
```
Tarayıcınızda açın http://localhost:3000 . Uygulama artık Azure DocumentDB kümenize veri okur ve yazar.

Kaynakları temizle

Bu öğreticide oluşturulan kaynaklara artık ihtiyacınız kalmadığında ücret yansıtılmasını önlemek için bunları silin.

Azure DocumentDB kümesini silin.

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

DocumentDB kapsayıcısını durdurun ve kaldırın.
```
docker stop documentdb
docker rm documentdb
```

Sonraki adım

Hızlı Başlangıç: Node.js ile Azure DocumentDB

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2026-04-27

Öğretici: DocumentDB ile TypeScript uygulaması oluşturma ve Azure DocumentDB'ye dağıtma

Önkoşullar

Kapsayıcıyı başlat

Uygulamayı oluşturma

Azure DocumentDB kümesi oluşturma

Uygulamayı Azure DocumentDB'ye bağlama

Kaynakları temizle

Sonraki adım

Geri Bildirim

Ek kaynaklar