Oktatóanyag: TypeScript-alkalmazás létrehozása a DocumentDB-vel és üzembe helyezés Azure DocumentDB-ben

Ebben az oktatóanyagban a DocumentDB-t használja helyi fejlesztési adatbázisként egy Docker-tárolóban, létrehoz egy TypeScript-alkalmazást a MongoDB-illesztőprogrammal, majd a kapcsolati karakterlánc felcserélésével migrál Azure DocumentDB-be.

Ebben az útmutatóban Ön:

DocumentDB indítása Docker-tárolóban
TypeScript-alkalmazás létrehozása
Az alkalmazás csatlakoztatása a helyi adatbázishoz
Hozzon létre egy Azure DocumentDB-fürtöt
Az alkalmazás üzembe helyezése az Azure DocumentDB-be

Előfeltételek

Node.js 18 vagy újabb
Docker Desktop
Azure CLI-
Egy Azure előfizetés. Ha nem rendelkezik Azure előfizetéssel, a kezdés előtt hozzon létre egy felszabadító fiókot.

A tároló indítása

Helyi fejlesztési adatbázis létrehozásához használja a DocumentDB Docker-tárolólemezképét.

Töltse le a DocumentDB konténerképet.

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

Indítsa el a tárolót felhasználónévvel és jelszóval.

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

Fontos

Cserélje le a <admin-username> és <admin-password> elemeket a saját hitelesítő adataira.

Ellenőrizze, hogy fut-e a tároló.

docker ps --filter "name=documentdb"

Fontos

A DocumentDB-átjáró végpontja elérhető a porton 10260. A csatlakozáshoz használja a következő kapcsolati karakterlánc formátumot:

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

Setting	Érték
végpont	`https://localhost:10260`
Felhasználónév	`<admin-username>`
Jelszó	`<admin-password>`
TLS	`true`
Érvénytelen tanúsítványok engedélyezése a TLS-ben	`true`

Cserélje le a <admin-username> és <admin-password> elemeket a saját hitelesítő adataira.

Az alkalmazás létrehozása

Hozzon létre egy Next.js alkalmazást, és csatlakoztassa a helyi adatbázishoz.

Hozzon létre egy új Next.js alkalmazást egy üres mappában.
```
npx create-next-app .
```
Telepítse a Node.js MongoDB-illesztőt.
```
npm install --save mongodb
```

Hozzon létre egy új fájlt app/data.tsx az alábbi kóddal. Ez a fájl tartalmazza az adatbázist kezelő kiszolgálói műveleteket.

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

Fontos

Cserélje le a kapcsolati karakterlánc helyőrzőt az oktatóanyag korábbi részében megadott hitelesítő adatokra a tároló indításakor.

Törölje a meglévő app/page.tsx fájlt, és cserélje le a következő kódra.

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

Az alkalmazás helyi futtatása.
```
npm run dev
```
Nyissa meg http://localhost:3000 a böngészőben, és ellenőrizze, hogy az alkalmazás fut-e, és csatlakozik-e a helyi adatbázishoz.

Jótanács

Az alkalmazás által létrehozott adatokat úgy tekintheti meg, hogy csatlakozik a DocumentDB-tárolóhoz a Visual Studio Code DocumentDB-kiterjesztéssel. Az adatbázis neve work-management és a gyűjtemény neve tasks.
Állítsa le az alkalmazást.

Hozzon létre egy Azure DocumentDB-fürtöt

Hozzon létre egy Azure DocumentDB-fürtöt az alkalmazásadatok felhőben való üzemeltetéséhez.

Hozzon létre változókat a fürt nevéhez és a célerőforrás-csoport nevéhez.
```
RESOURCE_GROUP_NAME="<resource-group-name>"
CLUSTER_NAME="<cluster-name>"
ADMIN_USERNAME="<admin-username>"
ADMIN_PASSWORD="<admin-password>"
```
Fontos

Cserélje le a helyőrző értékeket a saját értékeire. A fürt nevének globálisan egyedinek kell lennie.

Hozzon létre egy Azure DocumentDB-fürtöt.

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

Hozzon létre egy tűzfalszabályt, amely engedélyezi a hozzáférést az aktuális IP-címről.

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érd le a fürt csatlakozási karakterláncát.

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

Jegyezze fel a kapcsolati karakterlánc értéket. A következő lépésben használja.

Az alkalmazás csatlakoztatása az Azure DocumentDB-hez

Frissítse az alkalmazást úgy, hogy a helyi tároló helyett Azure DocumentDB-hez csatlakozzon.

A app/data.tsx helyi kapcsolati karakterláncot cserélje le az Azure DocumentDB kapcsolati karakterláncra.
```
const connectionString = "<azure-documentdb-connection-string>";
```
Fontos

Cserélje le <azure-documentdb-connection-string> az előző lépésben rögzített kapcsolati karakterláncra. A portálon található kapcsolati karakterlánc nem tartalmazza a jelszót. Cserélje le a <password> helyőrzőt a kapcsolati karakterláncban a fürt létrehozásakor megadott jelszóra.
Indítsa újra az alkalmazást.
```
npm run dev
```
Nyissa meg http://localhost:3000 a böngészőben. Az alkalmazás most már beolvassa és beírja az adatokat az Azure DocumentDB-klaszterbe.

Erőforrások tisztítása

Ha már nincs szüksége az oktatóanyagban létrehozott erőforrásokra, törölje őket a díjak elkerülése érdekében.

Törölje az Azure DocumentDB-fürtöt.

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

Állítsa le és távolítsa el a DocumentDB-tárolót.
```
docker stop documentdb
docker rm documentdb
```

Következő lépés

Gyorsindítás: Azure DocumentDB használata Node.js-szel

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2026-04-27

Oktatóanyag: TypeScript-alkalmazás létrehozása a DocumentDB-vel és üzembe helyezés Azure DocumentDB-ben

Előfeltételek

A tároló indítása

Az alkalmazás létrehozása

Hozzon létre egy Azure DocumentDB-fürtöt

Az alkalmazás csatlakoztatása az Azure DocumentDB-hez

Erőforrások tisztítása

Következő lépés

Visszajelzés

További források