Tutorial: Compilación de una aplicación TypeScript con el emulador de Azure Cosmos DB e implementación en Azure Cosmos DB

  • Se aplica a: ✅ NoSQL

En este tutorial, usará el emulador de Azure Cosmos DB Linux como base de datos de desarrollo local, creará una aplicación typeScript y, a continuación, migrará a Azure Cosmos DB intercambiando las credenciales.

En este tutorial, usted hará lo siguiente:

  • Inicio del emulador de Azure Cosmos DB en un contenedor de Docker
  • Creación de una aplicación TypeScript
  • Conexión de la aplicación al emulador local
  • Creación de una cuenta de Azure Cosmos DB
  • Implementación de la aplicación en Azure Cosmos DB

Prerrequisitos

Inicio del emulador

Use la imagen de contenedor de Docker para el emulador de Azure Cosmos DB basado en Linux para crear una base de datos de desarrollo local.

  1. Extraiga la imagen del contenedor del emulador.

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

  2. Inicie el contenedor del emulador.

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

  3. Compruebe que el contenedor se está ejecutando.

    docker ps --filter "name=cosmos-db"

    Importante

    El punto de conexión de puerta de enlace del emulador está disponible en https://localhost:8081 y el explorador de datos está disponible en http://localhost:1234. El emulador usa una clave de autenticación conocida:

    AccountEndpoint=http://localhost:8081/;AccountKey=C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==;
    Configuración Importancia
    Punto final https://localhost:8081
    Clave C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==

Creación de la aplicación

Cree una aplicación Next.js y conéctela al emulador local.

  1. Cree una aplicación Next.js en una carpeta vacía. Acepte cualquier configuración predeterminada.

    npx create-next-app .

  2. Instale la biblioteca cliente de Node.js para Azure Cosmos DB.

    npm install --save @azure/cosmos

  3. Cree un nuevo archivo denominado app/data.tsx con el código siguiente. Este archivo contiene las acciones del servidor que interactúan con la base de datos.

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

    Importante

    Reemplace el marcador de posición cadena de conexión por las credenciales especificadas anteriormente en este tutorial al iniciar el contenedor.

  4. Elimine el archivo existente app/page.tsx y reemplácelo por el código siguiente.

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

  5. Ejecutar la aplicación localmente.

    npm run dev

  6. Abra http://localhost:3000 en el explorador para comprobar que la aplicación se está ejecutando y conectada al emulador.

    Captura de pantalla de la nueva aplicación que se ejecuta en un explorador web con varios elementos guardados en la base de datos.

    Sugerencia

    Puede revisar los datos que crea esta aplicación en el Data Explorer emulador de Azure Cosmos DB en http://localhost:1234. También puede usar la extensión Azure Cosmos DB para Visual Studio Code La base de datos se denomina work-management y el contenedor se denomina tasks.

  7. Detenga la aplicación.

Creación de una cuenta de Azure Cosmos DB

Cree una cuenta de Azure Cosmos DB para hospedar los datos de la aplicación en la nube.

  1. Cree variables para el nombre de la cuenta y el nombre del grupo de recursos de destino.

    RESOURCE_GROUP_NAME="<resource-group-name>"
ACCOUNT_NAME="<account-name>"

    Importante

    Reemplace <resource-group-name> y <account-name> con sus propios valores. El nombre de la cuenta debe ser único globalmente.

  2. Cree una cuenta de Azure Cosmos DB.

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

  3. Obtenga la cadena de conexión de la cuenta.

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

  4. Anote el valor de la cadena de conexión. Lo usa en el siguiente paso.

Conexión de la aplicación a Azure Cosmos DB

Actualice la aplicación para conectarse a Azure Cosmos DB en lugar del emulador local.

  1. En app/data.tsx, reemplaza la cadena de conexión del emulador por la cadena de conexión de Azure Cosmos DB.

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

    Importante

    Reemplace <azure-cosmos-db-connection-string> por la cadena de conexión que registró en el paso anterior.

  2. Vuelva a iniciar la aplicación.

    npm run dev

  3. Abra http://localhost:3000 en el explorador. La aplicación ahora lee y escribe datos en la cuenta de Azure Cosmos DB.

Limpieza de recursos

Cuando ya no necesite los recursos creados en este tutorial, elimínelos para evitar incurrir en cargos.

  1. Elimine la cuenta de Azure Cosmos DB.

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

  2. Detener y quitar el contenedor del emulador.

    docker stop cosmos-db
docker rm cosmos-db

Paso siguiente

Quickstart: Azure Cosmos DB con Node.js

  • Last updated on