Tutorial: Adición de una conexión de base de datos de Azure SQL en Azure Static Web Apps (versión preliminar)

En este tutorial, aprenderá a conectar una base de datos de Azure SQL a la aplicación web estática. Una vez configurado, puede realizar solicitudes REST o GraphQL al punto de conexión /data-api integrado para manipular datos sin tener que escribir código de back-end.

Para simplificar, este tutorial muestra cómo usar una base de datos de Azure con fines de desarrollo local, pero también puede usar un servidor de bases de datos local para sus necesidades de desarrollo local.

En este tutorial, aprenderá a:

Prerrequisitos

Para completar este tutorial, debe tener una base de datos de Azure SQL y una aplicación web estática existentes.

Empiece por configurar la base de datos para que funcione con la característica de conexión de base de datos Azure Static Web Apps.

Configuración de la conectividad de base de datos

Azure Static Web Apps debe tener acceso de red a la base de datos para que funcionen las conexiones de base de datos. Además, para usar una base de datos de Azure para el desarrollo local, debe configurar la base de datos para permitir las solicitudes desde su propia dirección IP.

1. Vaya a la página del servidor de Azure SQL en Azure Portal.

2. En la sección Security, seleccione Networking.

3. En la pestaña Public access situada junto a Public network access, seleccione Selected networks.

4. En la sección Firewall rules, seleccione el botón Add your client IPv4 address. Este paso garantiza que pueda usar esta base de datos para el desarrollo local.

5. En la sección Exceptions, active la casilla Allow Azure services and resources to access this server. Este paso garantiza que el recurso de Static Web Apps implementado pueda acceder a la base de datos.

6. Seleccione Guardar.

Obtención de la cadena de conexión de la base de datos para el desarrollo local

Para usar la base de datos de Azure para el desarrollo local, debe recuperar la cadena de conexión de la base de datos. Puede omitir este paso si planea usar una base de datos local con fines de desarrollo.

1. Vaya a la página del servidor de Azure SQL en Azure Portal.

2. En la sección Settings, seleccione SQL databases.

3. Seleccione la base de datos SQL que ha creado para este tutorial.

4. En la sección Settings, seleccione Connection strings.

5. En el cuadro ADO.NET (SQL authentication), copie la cadena de conexión y péguela en un editor de texto.

Asegúrese de reemplazar el marcador de posición {your_password} en la cadena de conexión por la contraseña.

Creación de datos de ejemplo

Cree una tabla de ejemplo e inicialícela con datos de ejemplo para que coincidan con el tutorial.

1. En la ventana de navegación izquierda, seleccione Query editor.

2. Inicie sesión en el servidor con la cuenta de Entra ID o el nombre de usuario y la contraseña del servidor.

3. Ejecute el siguiente script para crear una nueva tabla llamada MyTestPersonTable.

   CREATE TABLE [dbo].[MyTestPersonTable] (
       [Id] INT IDENTITY (1, 1) NOT NULL,
       [Name] VARCHAR (25) NULL,
       PRIMARY KEY (Id)
   );
   

4. Ejecute el siguiente script para agregar datos a la tabla MyTestPersonTable.

   INSERT INTO [dbo].[MyTestPersonTable] (Name)
   VALUES ('Sunny');
   
   INSERT INTO [dbo].[MyTestPersonTable] (Name)
   VALUES ('Dheeraj');
   

Configuración de la aplicación web estática

El resto de este tutorial se centra en editar el código fuente de la aplicación web estática para usar las conexiones de base de datos de forma local.

1. Cambie a la rama main.

   • Bash
   • PowerShell

   git checkout main
   

2. Sincronice la versión local con lo que hay en GitHub mediante git pull.

   • Bash
   • PowerShell

   git pull origin main
   

Creación del archivo de configuración de la base de datos

A continuación, cree el archivo de configuración que usa la aplicación web estática para interactuar con la base de datos.

1. Abra el terminal y cree una nueva variable para contener la cadena de conexión. La sintaxis específica puede variar en función del tipo de shell que use.

   • Bash
   • PowerShell

   export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
   

   Asegúrese de reemplazar <YOUR_CONNECTION_STRING> por el valor de la cadena de conexión que ha anotado en un editor de texto.

2. Utilice npm para instalar o actualizar la CLI de Static Web Apps. Seleccione el comando más adecuado para la situación.

   Para instalar, utilice npm install.

   • Bash
   • PowerShell

   npm install -g @azure/static-web-apps-cli
   

   Para actualizar, utilice npm update.

   • Bash
   • PowerShell

   npm update
   

3. Utilice el comando swa db init para generar un archivo de configuración de la base de datos.

   • Bash
   • PowerShell

   swa db init --database-type mssql
   

   El comando init crea el archivo staticwebapp.database.config.json en la carpeta swa-db-connections.

4. Pegue este ejemplo en el archivo staticwebapp.database.config.json que ha generado.

{
  "$schema": "https://github.com/Azure/data-api-builder/releases/latest/download/dab.draft.schema.json",
  "data-source": {
    "database-type": "mssql",
    "options": {
      "set-session-context": false 
    },
    "connection-string": "@env('DATABASE_CONNECTION_STRING')"
  },
  "runtime": {
    "rest": {
      "enabled": true,
      "path": "/rest"
    },
    "graphql": {
      "allow-introspection": true,
      "enabled": true,
      "path": "/graphql"
    },
    "host": {
      "mode": "production",
      "cors": {
        "origins": ["http://localhost:4280"],
        "allow-credentials": false
      },
      "authentication": {
        "provider": "StaticWebApps"
      }
    }
  },
  "entities": {
    "Person": {
      "source": "dbo.MyTestPersonTable",
      "permissions": [
        {
          "actions": ["*"],
          "role": "anonymous"
        }
      ]
    }
  }
}

Antes de avanzar al paso siguiente, revise la tabla siguiente, que explica los distintos aspectos del archivo de configuración. Para obtener documentación completa sobre el archivo de configuración y la funcionalidad como, por ejemplo, sobre las relaciones y directivas de seguridad en el nivel de elemento, consulte la documentación del generador de API de datos.

Con la aplicación web estática configurada para conectarse a la base de datos, ahora puede comprobar la conexión.

Actualizar la página principal

Reemplace el marcado que hay entre las etiquetas body del archivo index.html por el código HTML siguiente.

<h1>Static Web Apps Database Connections</h1>
<blockquote>
    Open the console in the browser developer tools to see the API responses.
</blockquote>
<div>
    <button id="list" onclick="list()">List</button>
    <button id="get" onclick="get()">Get</button>
    <button id="update" onclick="update()">Update</button>
    <button id="create" onclick="create()">Create</button>
    <button id="delete" onclick="del()">Delete</button>
</div>
<script>
    // add JavaScript here
</script>

Inicio de la aplicación de forma local

Ahora, puede ejecutar el sitio web y manipular datos directamente en la base de datos.

1. Inicie la aplicación web estática con la configuración de la base de datos.

   swa start ./src --data-api-location swa-db-connections
   

Ahora que se ha iniciado la CLI, puede acceder a la base de datos mediante los puntos de conexión definidos en el archivo staticwebapp.database.config.json.

Manipulación de datos

Los siguientes comandos independientes del marco muestran cómo realizar operaciones CRUD completas en la base de datos.

La salida de cada función aparece en la ventana de la consola del explorador.

Para abrir las herramientas para el desarrollador, pulse CMD/CTRL + MAYÚS + I y seleccione la pestaña Consola.

Enumerar todos los elementos

Agregue el código siguiente entre las etiquetas script del archivo index.html.

async function list() {
  const endpoint = '/data-api/rest/Person';
  const response = await fetch(endpoint);
  const data = await response.json();
  console.table(data.value);
}

async function list() {

  const query = `
      {
        people {
          items {
            Id
            Name
          }
        }
      }`;

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ query: query })
  });
  const result = await response.json();
  console.table(result.data.people.items);
}

Actualice la página y seleccione el botón Lista.

La ventana de la consola del explorador ahora muestra una tabla que enumera todos los registros de la base de datos.

Esta es una captura de pantalla del aspecto que debería tener en el explorador.

Obtener por identificador

Agregue el código siguiente entre las etiquetas script del archivo index.html.

async function get() {
  const id = 1;
  const endpoint = `/data-api/rest/Person/Id`;
  const response = await fetch(`${endpoint}/${id}`);
  const result = await response.json();
  console.table(result.value);
}

async function get() {

  const id = 1;

  const gql = `
    query getById($id: Int!) {
      person_by_pk(Id: $id) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id,
    },
  };

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query),
  });
  const result = await response.json();
  console.table(result.data.person_by_pk);
}

Actualice la página y seleccione el botón Obtener.

En la ventana de la consola del explorador aparece ahora una tabla que muestra el registro único solicitado de la base de datos.

Actualizar

Agregue el código siguiente entre las etiquetas script del archivo index.html.

async function update() {

  const id = 1;
  const data = {
    Name: "Molly"
  };

  const endpoint = '/data-api/rest/Person/Id';
  const response = await fetch(`${endpoint}/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  const result = await response.json();
  console.table(result.value);
}

async function update() {

  const id = 1;
  const data = {
    Name: "Molly"
  };

  const gql = `
    mutation update($id: Int!, $item: UpdatePersonInput!) {
      updatePerson(Id: $id, item: $item) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id,
      item: data
    } 
  };

  const endpoint = "/data-api/graphql";
  const res = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const result = await res.json();
  console.table(result.data.updatePerson);
}

Actualice la página y seleccione el botón Actualizar.

La ventana de la consola del explorador presenta ahora una tabla que muestra los datos actualizados.

Crear

Agregue el código siguiente entre las etiquetas script del archivo index.html.

async function create() {

  const data = {
    Name: "Pedro"
  };

  const endpoint = `/data-api/rest/Person/`;
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  const result = await response.json();
  console.table(result.value);
}

async function create() {

  const data = {
    Name: "Pedro"
  };

  const gql = `
    mutation create($item: CreatePersonInput!) {
      createPerson(item: $item) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      item: data
    } 
  };

  const endpoint = "/data-api/graphql";
  const result = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const response = await result.json();
  console.table(response.data.createPerson);
}

Actualice la página y seleccione el botón Crear.

La ventana de la consola del explorador presenta ahora una tabla que muestra el nuevo registro de la base de datos.

Eliminar

Agregue el código siguiente entre las etiquetas script del archivo index.html.

async function del() {
  const id = 3;
  const endpoint = '/data-api/rest/Person/Id';
  const response = await fetch(`${endpoint}/${id}`, {
    method: "DELETE"
  });
  if(response.ok) {
    console.log(`Record deleted: ${ id }`)
  } else {
    console.log(response);
  }
}

async function del() {

  const id = 3;

  const gql = `
    mutation del($id: Int!) {
      deletePerson(Id: $id) {
        Id
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id
    }
  };

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const result = await response.json();
  console.log(`Record deleted: ${ result.data.deletePerson.Id }`);
}

Actualice la página y seleccione el botón Eliminar.

La ventana de la consola del explorador presenta ahora una tabla que muestra la respuesta de la solicitud de eliminación.

Record deleted: 3

Ahora que ha trabajado con el sitio de forma local, puede implementarlo en Azure.

Implementación de su sitio

Para implementar este sitio en producción, solo tiene que confirmar el archivo de configuración e insertar los cambios en el servidor.

1. Agregue los cambios de archivo para realizar el seguimiento.

   git add .
   

2. Confirme los cambios de configuración.

   git commit -am "Add database configuration"
   

3. Inserte los cambios en el servidor.

   git push origin main
   

Conexión de la base de datos a la aplicación web estática

Siga estos pasos para crear una conexión entre la instancia de Static Web Apps del sitio y la base de datos.

1. Abra la aplicación web estática en Azure Portal.

2. En la sección Configuración, seleccione Conexión de base de datos.

3. En la sección Producción, seleccione el vínculo Vincular base de datos existente.

4. En la ventana Vincular base de datos existente, escriba los valores siguientes:

   Propiedad	Value
   Tipo de base de datos	Seleccione el tipo de base de datos en la lista desplegable.
   Subscription	Seleccione la suscripción de Azure en la lista desplegable.
   Grupo de recursos	Seleccione o cree un grupo de recursos para la base de datos.
   Nombre de recurso	Seleccione el nombre del servidor de bases de datos que tiene la base de datos deseada.
   Nombre de la base de datos	Seleccione el nombre de la base de datos que quiere vincular a la aplicación web estática.
   Tipo de autenticación	Seleccione Connection string y escriba el nombre de usuario y la contraseña de Azure SQL.

5. Seleccione Aceptar.

Comprobar que la base de datos está conectada al recurso de Static Web Apps

Una vez que haya conectado la base de datos a la aplicación web estática y el sitio haya terminado de compilarse, siga estos pasos para comprobar la conexión de la base de datos.

1. Abra la aplicación web estática en Azure Portal.

2. En la sección Essentials, seleccione la dirección URL del recurso de Static Web Apps para ir a la aplicación web estática.

3. Seleccione el botón Lista para mostrar todos los elementos.

   La salida debe ser similar a la que se muestra en esta captura de pantalla.

   

Limpieza de recursos

Si desea quitar los recursos creados durante este tutorial, debe desvincular la base de datos y quitar los datos de ejemplo.

1. Desvincular base de datos: abra la aplicación web estática en Azure Portal. En la sección Configuración, seleccione Conexión de base de datos. Junto a la base de datos vinculada, seleccione Ver detalles. En la ventana Detalles de conexión de la base de datos, seleccione el botón Desvincular.

2. Quitar los datos de ejemplo: en la base de datos, elimine la tabla llamada MyTestPersonTable.

Pasos siguientes