Partekatu bidez

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

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

Por motivos de simplicidad, en este tutorial se 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.

Nota:

En este tutorial se muestra cómo usar el servidor flexible de Azure Database for MySQL. Si desea usar otra base de datos, consulte los tutoriales de Azure Cosmos DB, Azure SQL o PostgreSQL .

Explorador web que muestra los resultados de MySQL en la ventana de la consola de herramientas de desarrollo.

En este tutorial, aprenderá a:

  • Vinculación de una base de datos de Azure Database for MySQL a la aplicación web estática
  • Creación, lectura, actualización y eliminación de datos

Prerrequisitos

Para completar este tutorial, debe tener una base de datos de Azure Database for MySQL existente y una aplicación web estática. Además, debe instalar Visual Studio Code.

Resource Description
Servidor flexible para Azure Database for MySQL Si necesita crear una base de datos, siga los pasos descritos en la guía creación de un servidor flexible de Azure Database for MySQL . Si tiene previsto usar una autenticación de cadena de conexión para la aplicación web, asegúrese de crear la base de datos con la autenticación de MySQL. Puede cambiar esta configuración más adelante si quiere usar la identidad administrada más adelante.
Aplicación web estática existente Si aún no tiene una, siga los pasos descritos en la guía de introducción para crear una aplicación web estática Sin Framework .
Visual Studio Code, con la extensión de Shell de MySQL Si aún no tiene Visual Studio Code instalado, siga la guía para instalar Visual Studio Code, con la extensión de Shell de MySQL. Como alternativa, puede usar cualquier otra herramienta para consultar la base de datos MySQL, como MySQL Workbench.

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

Configuración de la conectividad de la 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 solicitudes desde su propia dirección IP.

  1. Vaya al servidor flexible de Azure Database for MySQL en Azure Portal.

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

  3. En la sección Reglas de firewall , seleccione el botón Agregar la dirección IP del cliente actual . Este paso garantiza que puede usar esta base de datos para el desarrollo local.

  4. En la sección Reglas de firewall , active la casilla Permitir el acceso público desde cualquier servicio de Azure en Azure a este servidor . Este paso garantiza que el recurso de Static Web Apps implementado pueda acceder a la base de datos.

  5. Haga clic en Guardar.

Consigue 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 al servidor flexible de Azure Database for MySQL en Azure Portal.

  2. En la sección Configuración , seleccione Conectar.

  3. En la sección Conectar desde la aplicación , seleccione la cadena de conexión ADO.NET y establézcala en un editor de texto.

  4. Reemplace el marcador {your_password} de la cadena de conexión con la contraseña.

  5. Reemplace el marcador de posición {your_database} con el nombre MyTestPersonDatabase de la base de datos. Crearás el MyTestPersonDatabase en los próximos pasos.

  6. Elimine las secciones SslMode y SslCa de la cadena de conexión, ya que requieren pasos adicionales y están pensados para fines de producción.

Creación de datos de ejemplo

Cree una tabla de ejemplo y la inicialíe con datos de ejemplo para que coincidan con el tutorial. Aquí puede usar Visual Studio Code, pero puede usar MySQL Workbench o cualquier otra herramienta.

  1. En Visual Studio Code con la extensión de MySQL Shell, cree una conexión al Azure MySQL Flexible Server.

  2. Haga clic con el botón derecho en el servidor y cree una nueva base de datos. Escriba MyTestPersonDatabase como el nombre de la base de datos y seleccione el conjunto de caracteres que va a ser utf8mb4 y la intercalación de utf8mb4_0900_ai_ci.

  3. Haga clic con el botón derecho en el servidor y seleccione Actualizar.

  4. Haga clic con el botón derecho en la MyTestPersonDatabase base de datos y seleccione Nueva consulta. Ejecute el siguiente script para crear una nueva tabla denominada MyTestPersonTable.

    CREATE TABLE MyTestPersonTable (
    Id INT AUTO_INCREMENT NOT NULL,
    Name VARCHAR(25) NULL,
    PRIMARY KEY (Id)
);

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

    INSERT INTO MyTestPersonTable (Name)
VALUES ('Sunny');

INSERT INTO MyTestPersonTable (Name)
VALUES ('Dheeraj');

  6. Haga clic con el botón derecho en la MyTestPersonTable tabla y seleccione Seleccionar los 1000 principales para comprobar que hay datos en la base de datos.

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 localmente.

Importante

En los pasos siguientes se supone que está trabajando con la aplicación web estática creada en la guía de introducción. Si usa un proyecto diferente, asegúrese de ajustar los siguientes comandos git para que coincidan con los nombres de rama.

  1. Cambie a la rama main.

    git checkout main

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

    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 variable para contener la cadena de conexión. La sintaxis específica puede variar en función del tipo de shell que use.

    export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'

    Asegúrese de reemplazar <YOUR_CONNECTION_STRING> por el valor de cadena de conexiones que ha reservado en un editor de texto.

  2. Use npm para instalar o actualizar la CLI de Static Web Apps. Seleccione qué comando es mejor para su situación.

    Para instalar, use npm install.

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

    Para actualizar, use npm update.

    npm update

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

    swa db init --database-type mysql

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

  4. Pegue este ejemplo en el archivo staticwebapp.database.config.json generó.

{
  "$schema": "https://github.com/Azure/data-api-builder/releases/latest/download/dab.draft.schema.json",
  "data-source": {
    "database-type": "mysql",
    "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": "MyTestPersonTable",
      "permissions": [
        {
          "actions": ["*"],
          "role": "anonymous"
        }
      ]
    }
  }
}

Antes de pasar al paso siguiente, revise la tabla siguiente que explica distintos aspectos del archivo de configuración. Para obtener documentación completa sobre el archivo de configuración, consulte la documentación de Data API Builder.

Característica Explanation
Conexión de base de datos En desarrollo, el tiempo de ejecución lee el valor de la cadena de conexión del archivo de configuración. Aunque puede especificar la cadena de conexión directamente en el archivo de configuración, un procedimiento recomendado es almacenar cadenas de conexión en una variable de entorno local. Puede hacer referencia a los valores de las variables de entorno en el archivo de configuración a través de la @env('DATABASE_CONNECTION_STRING') notación. El valor de la cadena de conexión se sobrescribe mediante Static Web Apps para el sitio implementado con la información recopilada al conectar la base de datos.
Punto de conexión de API El punto de conexión REST está disponible a través de /data-api/rest, mientras que el punto de conexión GraphQL está disponible a través de /data-api/graphql, según está configurado en este archivo de configuración. Puede configurar las rutas rest y GraphQL, pero el /data-api prefijo no es configurable.
Seguridad de API La runtime.host.cors configuración le permite definir orígenes permitidos que pueden realizar solicitudes a la API. En este caso, la configuración refleja un entorno de desarrollo y permite incluir en la lista la http://localhost:4280 ubicación.
Modelo de entidad Define las entidades expuestas a través de rutas en la API REST o como tipos en el esquema GraphQL. En este caso, el nombre Person es el nombre expuesto al punto de conexión, mientras que entities.<NAME>.source es el esquema de la base de datos y la asignación de tablas. Observe cómo el nombre del punto de conexión de API no necesita ser idéntico al nombre de la tabla.
Seguridad de entidades Las reglas de permisos enumeradas en la entity.<NAME>.permissions matriz controlan la configuración de autorización de una entidad. Puede proteger una entidad con roles de la misma manera en que protege las rutas con roles.

Nota:

Se sobrescriben las propiedades connection-string, host.mode y graphql.allow-introspection del archivo de configuración cuando despliega su sitio. La cadena de conexión se sobrescribe con los detalles de autenticación recopilados al conectar la base de datos al recurso de Static Web Apps. La propiedad host.mode se establece en production, y graphql.allow-introspection se establece en false. Estas sobreescrituras proporcionan coherencia en los archivos de configuración en las cargas de trabajo de desarrollo y producción, a la vez que garantizan que el recurso de Aplicaciones Web Estáticas con conexiones de base de datos estén habilitadas, seguras y listas para producción.

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

Actualización de la página principal

Reemplace el marcado entre las body etiquetas 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>

Iniciar la aplicación localmente

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 --data-api-location swa-db-connections

Ahora que se inicia la CLI, puede acceder a la base de datos a través de los puntos de conexión tal como se definen en el archivo staticwebapp.database.config.json .

El http://localhost:4280/data-api/rest/<ENTITY_NAME> punto de conexión acepta GET, PUT, POST y DELETE solicitudes para manipular datos en la base de datos.

El http://localhost:4280/data-api/graphql punto de conexión acepta las consultas y las mutaciones de GraphQL.

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.

Abra las herramientas de desarrollo presionando CMD/CTRL + MAYÚS + I y seleccione la pestaña Consola .

Enumerar todos los elementos

Agregue el código siguiente entre las script etiquetas de 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);
}

En este ejemplo:

  • La solicitud predeterminada de la fetch API usa el verbo GET.
  • Los datos de la carga de respuesta se encuentran en la propiedad 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);
}

En este ejemplo:

  • La consulta GraphQL selecciona los Id campos y Name de la base de datos.
  • La solicitud que se pasa al servidor requiere una carga donde la query propiedad contiene la definición de consulta.
  • Los datos de la carga de respuesta se encuentran en la propiedad data.people.items.

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

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

identificación Nombre
1 Sunny
2 Dheeraj

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

Explorador web que muestra los resultados de una selección de base de datos en la ventana de la consola de herramientas de desarrollo.

Obtener por identificador

Agregue el código siguiente entre las script etiquetas de 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);
}

En este ejemplo:

  • El punto de conexión tiene el sufijo /person/Id.
  • El valor de id. se anexa al final de la ubicación del punto de conexión.
  • Los datos de la carga de respuesta se encuentran en la propiedad 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);
}

En este ejemplo:

  • La consulta GraphQL selecciona los Id campos y Name de la base de datos.
  • La solicitud que se pasa al servidor requiere una carga donde la query propiedad contiene la definición de consulta.
  • Los datos de la carga de respuesta se encuentran en la propiedad data.person_by_pk.

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

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

identificación Nombre
1 Sunny

Update

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

Static Web Apps admite tanto los verbos PUT como PATCH. Una PUT solicitud actualiza todo el registro, mientras PATCH realiza una actualización parcial.

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

En este ejemplo:

  • El punto de conexión tiene el sufijo /person/Id/.
  • El valor de id. se anexa al final de la ubicación del punto de conexión.
  • El verbo REST consiste PUT en actualizar el registro de la base de datos.
  • Los datos de la carga de respuesta se encuentran en la propiedad 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);
}

En este ejemplo:

  • La consulta GraphQL selecciona los Id campos y Name de la base de datos.
  • El query objeto contiene la consulta GraphQL en la query propiedad .
  • Los valores de argumento de la función GraphQL se pasan a través de la query.variables propiedad .
  • La solicitud que se pasa al servidor requiere una carga donde la query propiedad contiene la definición de consulta.
  • Los datos de la carga de respuesta se encuentran en la propiedad data.updatePerson.

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

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

identificación Nombre
1 Molly

Create

Agregue el código siguiente entre las script etiquetas de 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);
}

En este ejemplo:

  • El punto de conexión tiene el sufijo /person/.
  • El verbo REST consiste POST en agregar un registro de base de datos.
  • Los datos de la carga de respuesta se encuentran en la propiedad 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);
}

En este ejemplo:

  • La consulta GraphQL selecciona los Id campos y Name de la base de datos.
  • El query objeto contiene la consulta GraphQL en la query propiedad .
  • Los valores de argumento para la función GraphQL se pasan a través de la propiedad query.variables.
  • La solicitud que se pasa al servidor requiere una carga donde la query propiedad contiene la definición de consulta.
  • Los datos de la carga de respuesta se encuentran en la data.updatePerson propiedad .

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

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

identificación Nombre
3 Pedro

Delete

Agregue el código siguiente entre las script etiquetas de 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);
  }
}

En este ejemplo:

  • El punto de conexión tiene el sufijo /person/Id/.
  • El valor de id. se anexa al final de la ubicación del punto de conexión.
  • El verbo REST es DELETE para eliminar el registro de base de datos.
  • Si la eliminación se realiza correctamente, la propiedad ok de carga de la respuesta es true.
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 }`);
}

En este ejemplo:

  • La consulta GraphQL selecciona el Id campo de la base de datos.
  • El query objeto contiene la consulta GraphQL en la query propiedad .
  • Los valores de argumento para la función GraphQL se pasan a través de la propiedad query.variables.
  • La solicitud que se pasa al servidor requiere una carga donde la query propiedad contiene la definición de consulta.
  • Los datos de la carga de respuesta se encuentran en la data.deletePerson propiedad .

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

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

Registro eliminado: 3

Ahora que ha trabajado con el sitio localmente, ahora puede implementarlo en Azure.

Despliega tu 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 Importancia
    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.
    Nombre de recurso Seleccione el nombre del servidor de base de datos que tiene la base de datos deseada.
    Nombre de la base de datos Seleccione el nombre de la base de datos que desea vincular a la aplicación web estática.
    Tipo de autenticación Seleccione Cadena de conexión y escriba el nombre de usuario y la contraseña de MySQL.

  5. Selecciona Aceptar.

Compruebe 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 static Web Apps para ir a la aplicación web estática.

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

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

    Explorador web que muestra los resultados de enumerar registros de la base de datos en la ventana de la consola de herramientas de desarrollo.

Limpieza de recursos

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

  1. Desvincular la base de datos: abra la aplicación web estática en el portal de Azure. 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 base de datos , seleccione el botón Desvincular .

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

Pasos siguientes

Adición de una API

  • Last updated on