Tutoriel : Créer une application TypeScript avec DocumentDB et déployer sur Azure DocumentDB

Dans ce tutoriel, vous utilisez DocumentDB comme base de données de développement locale dans un conteneur Docker, générez une application TypeScript avec le pilote MongoDB, puis migrez vers Azure DocumentDB en échangeant votre chaîne de connexion.

Dans ce tutoriel, vous allez :

Démarrer DocumentDB dans un conteneur Docker
Créer une application TypeScript
Connecter l’application à la base de données locale
Créer un cluster DocumentDB Azure
Déployer l’application sur Azure DocumentDB

Prerequisites

Node.js 18 ou version ultérieure
Docker Desktop
Service de contrôle d’accès Azure (CLI)
Un abonnement Azure. Si vous n'avez pas d'abonnement Azure, créez un compte free avant de commencer.

Démarrer le conteneur

Utilisez l’image conteneur Docker pour DocumentDB pour créer une base de données de développement locale.

Extrayez l’image conteneur DocumentDB.

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

Démarrez le conteneur avec un nom d’utilisateur et un mot de passe.

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

Important

Remplacer <admin-username> et <admin-password> par vos propres informations d’identification.

Vérifiez que le conteneur est en cours d’exécution.

docker ps --filter "name=documentdb"

Important

Le point de terminaison de passerelle DocumentDB est disponible sur le port 10260. Utilisez le format chaîne de connexion suivant pour vous connecter :

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

Réglage	Valeur
Point de terminaison	`https://localhost:10260`
Nom d’utilisateur	`<admin-username>`
Mot de passe	`<admin-password>`
TLS	`true`
TLS Autoriser les certificats non valides	`true`

Remplacer <admin-username> et <admin-password> par vos propres informations d’identification.

Créer l’application

Créez une application Next.js et connectez-la à la base de données locale.

Créez une application Next.js dans un dossier vide.
```
npx create-next-app .
```
Installez le pilote MongoDB Node.js.
```
npm install --save mongodb
```

Créez un fichier nommé app/data.tsx avec le code suivant. Ce fichier contient les actions de serveur qui interagissent avec la base de données.

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

Important

Remplacez l’espace réservé chaîne de connexion par les informations d’identification spécifiées précédemment dans ce didacticiel lors du démarrage du conteneur.

Supprimez le fichier existant app/page.tsx et remplacez-le par le code suivant.

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

Exécuter localement l’application.
```
npm run dev
```
Ouvrez http://localhost:3000 votre navigateur pour vérifier que l’application est en cours d’exécution et connectée à la base de données locale.

Conseil / Astuce

Vous pouvez afficher les données créées par cette application en vous connectant au conteneur DocumentDB avec l’extension DocumentDB pour Visual Studio Code. La base de données est nommée work-management et la collection est nommée tasks.
Arrêtez l’application.

Créer un cluster DocumentDB Azure

Créez un cluster DocumentDB Azure pour héberger vos données d’application dans le cloud.

Créez des variables pour le nom du cluster et le nom du groupe de ressources cible.
```
RESOURCE_GROUP_NAME="<resource-group-name>"
CLUSTER_NAME="<cluster-name>"
ADMIN_USERNAME="<admin-username>"
ADMIN_PASSWORD="<admin-password>"
```
Important

Remplacez les valeurs d’espace réservé par vos propres valeurs. Le nom du cluster doit être globalement unique.

Créez un cluster 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

Créez une règle de pare-feu pour autoriser l’accès à partir de votre adresse IP actuelle.

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

Obtenez la chaîne de connexion pour le cluster.

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

Enregistrez la valeur de la chaîne de connexion. Vous l’utiliserez à l’étape suivante.

Connecter l’application à Azure DocumentDB

Mettez à jour l’application pour vous connecter à Azure DocumentDB au lieu du conteneur local.

Dans app/data.tsx, remplacez la chaîne de connexion locale par la chaîne de connexion DocumentDB d'Azure.
```
const connectionString = "<azure-documentdb-connection-string>";
```
Important

Remplacez <azure-documentdb-connection-string> par la chaîne de connexion que vous avez enregistrée à l’étape précédente. Le chaîne de connexion à partir du portail n'inclut pas le mot de passe. Remplacez l’espace réservé <password> dans le chaîne de connexion par le mot de passe que vous avez spécifié lors de la création du cluster.
Démarrez à nouveau l’application.
```
npm run dev
```
Ouvrez http://localhost:3000 dans votre navigateur. L’application lit et écrit désormais des données dans votre cluster DocumentDB Azure.

Nettoyer les ressources

Lorsque vous n’avez plus besoin des ressources créées dans ce didacticiel, supprimez-les pour éviter les frais.

Supprimez le cluster DocumentDB Azure.

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

Arrêtez et supprimez le conteneur DocumentDB.
```
docker stop documentdb
docker rm documentdb
```

Étape suivante

Quickstart : Azure DocumentDB avec Node.js

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2026-04-27

Tutoriel : Créer une application TypeScript avec DocumentDB et déployer sur Azure DocumentDB

Prerequisites

Démarrer le conteneur

Créer l’application

Créer un cluster DocumentDB Azure

Connecter l’application à Azure DocumentDB

Nettoyer les ressources

Étape suivante

Commentaires

Ressources supplémentaires