Självstudie: Lägga till en MySQL-databasanslutning i Azure Static Web Apps (förhandsversion)

I den här självstudien får du lära dig hur du ansluter en Azure Database for MySQL Flexible Server-databas till din statiska webbapp. När du har konfigurerat det kan du göra REST- eller GraphQL-begäranden till den inbyggda /data-api slutpunkten för att manipulera data utan att behöva skriva serverdelskod.

För enkelhetens skull visar den här självstudien hur du använder en Azure-databas för lokal utveckling, men du kan också använda en lokal databasserver för dina lokala utvecklingsbehov.

I den här handledningen får du lära dig att:

Förutsättningar

För att slutföra den här självstudien måste du ha en befintlig Azure Database for MySQL-databas och en statisk webbapplikation. Dessutom måste du installera Visual Studio Code.

Börja med att konfigurera databasen så att den fungerar med azure static web apps-databasanslutningsfunktionen.

Konfigurera databasanslutning

Azure Static Web Apps måste ha nätverksåtkomst till databasen för att databasanslutningar ska fungera. Om du vill använda en Azure-databas för lokal utveckling måste du dessutom konfigurera databasen så att den tillåter begäranden från din egen IP-adress.

1. Gå till Azure Database for MySQL Server – Flexibel Server i Azure-portalen.

2. Under Inställningar väljer du Nätverk.

3. Under avsnittet Brandväggsregler väljer du knappen Lägg till din aktuella klient-IP-adress . Det här steget säkerställer att du kan använda den här databasen för din lokala utveckling.

4. Under avsnittet Brandväggsregler väljer du kryssrutan Tillåt offentlig åtkomst från alla Azure-tjänster i Azure till den här servern . Det här steget säkerställer att din distribuerade Static Web Apps-resurs kan komma åt databasen.

5. Välj Spara.

Hämta databasanslutningssträng för lokal utveckling

Om du vill använda din Azure-databas för lokal utveckling måste du hämta databasens anslutningssträng. Du kan hoppa över det här steget om du planerar att använda en lokal databas i utvecklingssyfte.

1. Gå till Azure-databas för MySQL Server - flexibel server i Azure-portalen.

2. Under avsnittet Inställningar väljer du Anslut.

3. I avsnittet Anslut från din app väljer du anslutningssträngen ADO.NET och lägger den åt sidan i en textredigerare.

4. {your_password} Ersätt platshållaren i anslutningssträngen med ditt lösenord.

5. {your_database} Ersätt platshållaren med databasnamnet MyTestPersonDatabase. Du skapar MyTestPersonDatabase i de kommande stegen.

6. Ta bort avsnitten SslMode och SslCa i anslutningssträngen eftersom dessa kräver extra steg och är avsedda för produktion.

Skapa exempeldata

Skapa en exempeltabell och fyll den med exempeldata som matchar handledningen. Här kan du använda Visual Studio Code, men du kan använda MySQL Workbench eller något annat verktyg.

1. I Visual Studio Code med MySQL Shell-tillägget skapar du en anslutning till din flexibla Azure MySQL-server.

2. Högerklicka på servern och skapa en ny databas. Ange MyTestPersonDatabase som databasnamn och välj den teckenuppsättning som ska vara utf8mb4 och sortering av utf8mb4_0900_ai_ci.

3. Högerklicka på servern och välj Uppdatera.

4. Högerklicka på databasen MyTestPersonDatabase och välj Ny fråga. Kör följande skript för att skapa en ny tabell med namnet MyTestPersonTable.

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

5. Kör följande skript för att lägga till data i MyTestPersonTable tabellen.

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

6. Högerklicka på tabellen MyTestPersonTable och välj Välj topp 1000 för att kontrollera att det finns data i databasen.

Konfigurera den statiska webbappen

Resten av den här handledningen fokuserar på att modifiera källkoden för din statiska webbapp för att använda databasanslutningar lokalt.

1. Växla till grenen main .

   • Bash
   • PowerShell

   git checkout main
   

2. Synkronisera din lokala version med vad som finns på GitHub med hjälp git pullav .

   • Bash
   • PowerShell

   git pull origin main
   

Skapa databaskonfigurationsfilen

Skapa sedan konfigurationsfilen som din statiska webbapp använder för att interagera med databasen.

1. Öppna terminalen och skapa en ny variabel för att lagra anslutningssträngen. Den specifika syntaxen kan variera beroende på vilken gränssnittstyp du använder.

   • Bash
   • PowerShell

   export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
   

   Ersätt <YOUR_CONNECTION_STRING> med det anslutningssträngsvärde som du har angett i en textredigerare.

2. Använd npm för att installera eller uppdatera Static Web Apps CLI. Välj vilket kommando som är bäst för din situation.

   Om du vill installera använder du npm install.

   • Bash
   • PowerShell

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

   Om du vill uppdatera använder du npm update.

   • Bash
   • PowerShell

   npm update
   

3. swa db init Använd kommandot för att generera en databaskonfigurationsfil.

   • Bash
   • PowerShell

   swa db init --database-type mysql
   

   Kommandot init skapar filenstaticwebapp.database.config.json i mappen swa-db-connections .

4. Klistra in det här exemplet i filen staticwebapp.database.config.json du skapade.

{
  "$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"
        }
      ]
    }
  }
}

Innan du går vidare till nästa steg läser du följande tabell som förklarar olika aspekter av konfigurationsfilen. Fullständig dokumentation om konfigurationsfilen finns i Dokumentation om Data API Builder.

Med den statiska webbappen konfigurerad för att ansluta till databasen kan du nu verifiera anslutningen.

Uppdatera startsida

Ersätt pålägget mellan taggarna body i index.html-filen med följande HTML.

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

Starta programmet lokalt

Nu kan du köra din webbplats och ändra data i databasen direkt.

1. Starta den statiska webbappen med databaskonfigurationen.

   swa start --data-api-location swa-db-connections
   

Nu när CLI har startats kan du komma åt databasen via slutpunkterna enligt definitionen i staticwebapp.database.config.json-filen .

Manipulera data

Följande ramverksagnostiska kommandon visar hur du utför fullständiga CRUD-åtgärder i databasen.

Utdata för varje funktion visas i webbläsarens konsolfönster.

Öppna utvecklarverktygen genom att trycka på CMD/CTRL + SKIFT + I och välj fliken Konsol .

Visa en lista över alla objekt

Lägg till följande kod mellan taggarna script i 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);
}

Uppdatera sidan och välj knappen Lista .

Webbläsarens konsolfönster visar nu en tabell som visar alla poster i databasen.

Här är en skärmbild av hur det ska se ut i webbläsaren.

Hämta med ID

Lägg till följande kod mellan taggarna script i 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);
}

Uppdatera sidan och välj knappen Hämta .

Webbläsarens konsolfönster visar nu en tabell med den enda posten som begärts från databasen.

Update

Lägg till följande kod mellan taggarna script i 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);
}

Uppdatera sidan och välj knappen Uppdatera .

Webbläsarens konsolfönster visar nu en tabell som visar uppdaterade data.

Create

Lägg till följande kod mellan taggarna script i 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);
}

Uppdatera sidan och välj knappen Skapa .

Webbläsarens konsolfönster visar nu en tabell som visar den nya posten i databasen.

Ta bort

Lägg till följande kod mellan taggarna script i 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 }`);
}

Uppdatera sidan och välj knappen Ta bort .

Webbläsarens konsolfönster visar nu en tabell som visar svaret från borttagningsbegäran.

Raderad post: 3

Nu när du har arbetat med din webbplats lokalt kan du nu distribuera den till Azure.

Lansera din webbplats

Om du vill distribuera den här platsen till produktion behöver du bara checka in konfigurationsfilen och skicka ändringarna till servern.

1. Lägg till filändringarna för att spåra.

   git add .
   

2. Genomför konfigurationsändringarna.

   git commit -am "Add database configuration"
   

3. Skicka ändringarna till servern.

   git push origin main
   

Ansluta databasen till din statiska webbapp

Använd följande steg för att skapa en anslutning mellan Static Web Apps-instansen av webbplatsen och databasen.

1. Öppna din statiska webbapp i Azure Portal.

2. I avsnittet Inställningar väljer du Databasanslutning.

3. Under avsnittet Produktion väljer du länken Länka befintlig databas .

4. I fönstret Länka befintlig databas anger du följande värden:

   Fastighet	Värde
   Databastyp	Välj din databastyp i listrutan.
   Subscription	Välj din Azure-prenumeration i listrutan.
   Resursnamn	Välj det databasservernamn som har önskad databas.
   Databasnamn	Välj namnet på den databas som du vill länka till din statiska webbapp.
   Autentiseringstyp	Välj Anslutningssträng och ange MySQL-användarnamnet och lösenordet.

5. Välj OK.

Kontrollera att databasen är ansluten till din Static Web Apps-resurs

När du har anslutit databasen till din statiska webbapp och webbplatsen har skapats kan du använda följande steg för att verifiera databasanslutningen.

1. Öppna din statiska webbapp i Azure Portal.

2. I avsnittet Essentials väljer du URL:en för din Static Web Apps-resurs för att navigera till din statiska webbapp.

3. Välj knappen Lista för att visa en lista över alla objekt.

   Utdata bör likna det som visas i den här skärmbilden.

   

Rensa resurser

Om du vill ta bort de resurser som skapades under den här självstudien måste du ta bort länken till databasen och ta bort exempeldata.

1. Ta bort länk till databas: Öppna din statiska webbapp i Azure-portalen. Under avsnittet Inställningar väljer du Databasanslutning. Bredvid den länkade databasen väljer du Visa information. I fönstret Databasanslutningsinformation väljer du knappen Ta bort länk .

2. Ta bort exempeldata: Ta bort tabellen med namnet MyTestPersonTablei databasen.

Nästa steg