Kurz: Přidání připojení k databázi MySQL ve službě Azure Static Web Apps (Preview)

V tomto kurzu se dozvíte, jak připojit flexibilní serverovou databázi Azure Database for MySQL k vaší statické webové aplikaci. Po nakonfigurování můžete provádět požadavky REST nebo GraphQL na integrovaný /data-api koncový bod pro manipulaci s daty, aniž byste museli zapisovat back-endový kód.

Pro zjednodušení vám tento kurz ukáže, jak používat databázi Azure pro místní účely vývoje, ale můžete také použít místní databázový server pro potřeby místního vývoje.

Poznámka:

V tomto kurzu se dozvíte, jak používat flexibilní server Azure Database for MySQL. Pokud chcete použít jinou databázi, projděte si kurzy ke službě Azure Cosmos DB, Azure SQL nebo PostgreSQL .

V tomto kurzu se naučíte:

• Propojení databáze Azure Database for MySQL se statickou webovou aplikací
• Vytváření, čtení, aktualizace a odstraňování dat

Požadavky

K dokončení tohoto kurzu potřebujete existující databázi Azure Database for MySQL a statickou webovou aplikaci. Kromě toho je potřeba nainstalovat Visual Studio Code.

Resource	Description
Flexibilní server Azure Database for MySQL	Pokud potřebujete vytvořit databázi, postupujte podle kroků v průvodci vytvořením flexibilního serveru Azure Database for MySQL . Pokud pro webovou aplikaci plánujete použít ověřování připojovacího řetězce, ujistěte se, že vytvoříte databázi s ověřováním MySQL. Toto nastavení můžete později změnit, pokud budete chtít později použít spravovanou identitu.
Existující statická webová aplikace	Pokud ho ještě nemáte, vytvořte statickou webovou aplikaci No Framework podle pokynů v úvodní příručce.
Visual Studio Code s rozšířením MySQL Shell	Pokud ještě nemáte visual Studio Code nainstalovaný, nainstalujte Visual Studio Code pomocí rozšíření MySQL Shell podle průvodce. Případně můžete použít jakýkoli jiný nástroj k dotazování databáze MySQL, například MySQL Workbench.

Začněte konfigurací databáze tak, aby fungovala s funkcí připojení k databázi Azure Static Web Apps.

Konfigurace připojení k databázi

Azure Static Web Apps musí mít síťový přístup k vaší databázi, aby připojení k databázi fungovala. Pokud chcete navíc použít databázi Azure pro místní vývoj, musíte databázi nakonfigurovat tak, aby umožňovala požadavky z vaší vlastní IP adresy.

1. Na webu Azure Portal přejděte na flexibilní server Azure Database for MySQL.

2. V části Nastavení vyberte kartu Sítě.

3. V části Pravidla brány firewall vyberte tlačítko Přidat aktuální IP adresu klienta . Tento krok zajistí, že tuto databázi můžete použít pro místní vývoj.

4. V části Pravidla brány firewall zaškrtněte políčko Povolit veřejný přístup z jakékoli služby Azure v Rámci Azure na tento server . Tento krok zajistí, že váš nasazený prostředek Static Web Apps bude mít přístup k vaší databázi.

5. Vyberte Uložit.

Získání spojovacího řetězce databáze pro místní vývoj

Pokud chcete použít databázi Azure pro místní vývoj, musíte načíst připojovací řetězec databáze. Tento krok můžete přeskočit, pokud plánujete používat místní databázi pro účely vývoje.

1. Na webu Azure Portal přejděte na flexibilní server Azure Database for MySQL.

2. V části Nastavení vyberte Připojit.

3. V části Připojit z aplikace vyberte ADO.NET připojovací řetězec a uložte ho stranou v textovém editoru.

4. {your_password} Zástupný symbol v připojovacím řetězci nahraďte heslem.

5. Nahraďte zástupný symbol {your_database} názvem databáze MyTestPersonDatabase. Vytvoříte MyTestPersonDatabase v následujících krocích.

6. Odstraňte oddíly SslMode a SslCa připojovacího řetězce, protože vyžadují další kroky a jsou určeny pro produkční účely.

Vytvoření ukázkových dat

Vytvořte ukázkovou tabulku a naplňte ji ukázkovými daty, která odpovídají tutoriálu. Tady můžete použít Visual Studio Code, ale můžete použít MySQL Workbench nebo jakýkoli jiný nástroj.

1. V editoru Visual Studio Code s rozšířením MySQL Shell vytvořte připojení k flexibilnímu serveru Azure MySQL.

2. Klikněte pravým tlačítkem na server a vytvořte novou databázi. Zadejte MyTestPersonDatabase jako název databáze a vyberte znakovou sadu utf8mb4 a porovnávání utf8mb4_0900_ai_ci.

3. Klikněte pravým tlačítkem na server a vyberte Aktualizovat.

4. Klikněte pravým tlačítkem na MyTestPersonDatabase databázi a vyberte Nový dotaz. Spuštěním následujícího skriptu vytvořte novou tabulku s názvem MyTestPersonTable.

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

5. Spuštěním následujícího skriptu přidejte data do MyTestPersonTable tabulky.

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

6. Klikněte pravým tlačítkem na MyTestPersonTable tabulku a vyberte Vybrat prvních 1000 a ověřte, že v databázi jsou data.

Konfigurace statické webové aplikace

Zbytek tohoto kurzu se zaměřuje na úpravu zdrojového kódu statické webové aplikace, aby bylo možné využívat připojení k databázi místně.

Důležité

Následující kroky předpokládají, že pracujete se statickou webovou aplikací vytvořenou v příručce Začínáme. Pokud používáte jiný projekt, nezapomeňte upravit následující příkazy Git tak, aby odpovídaly názvům větví.

1. Přepněte na main větev.

   Bash

   git checkout main
   

   PowerShell

   git checkout main
   

2. Synchronizujte místní verzi s tím, co je na GitHubu pomocí git pull.

   Bash

   git pull origin main
   

   PowerShell

   git pull origin main
   

Vytvoření konfiguračního souboru databáze

Dále vytvořte konfigurační soubor, který vaše statická webová aplikace používá pro rozhraní s databází.

1. Otevřete terminál a vytvořte novou proměnnou pro uložení připojovacího řetězce. Konkrétní syntaxe se může lišit v závislosti na typu prostředí, který používáte.

   Bash

   export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
   

   PowerShell

   $env:DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
   

   Nezapomeňte nahradit <YOUR_CONNECTION_STRING> hodnotou připojovacího řetězce, kterou jste si v textovém editoru vyhradili.

2. K instalaci nebo aktualizaci rozhraní příkazového řádku Static Web Apps použijte npm. Vyberte, který příkaz je pro vaši situaci nejvhodnější.

   K instalaci použijte npm install.

   Bash

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

   PowerShell

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

   Chcete-li aktualizovat, použijte npm update.

   Bash

   npm update
   

   PowerShell

   npm update
   

3. swa db init Pomocí příkazu vygenerujte konfigurační soubor databáze.

   Bash

   swa db init --database-type mysql
   

   PowerShell

   swa db init --database-type mysql
   

   Příkaz init vytvoří soubor staticwebapp.database.config.json ve složce swa-db-connections .

4. Vložte tuto ukázku do souboru staticwebapp.database.config.json, který jste vygenerovali.

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

Než přejdete k dalšímu kroku, projděte si následující tabulku, která vysvětluje různé aspekty konfiguračního souboru. Úplnou dokumentaci ke konfiguračnímu souboru najdete v dokumentaci k Data API Builderu.

Vlastnost	Explanation
Připojení k databázi	Modul runtime při vývoji načte připojovací řetězec z hodnoty připojovacího řetězce v konfiguračním souboru. I když připojovací řetězec můžete zadat přímo v konfiguračním souboru, osvědčeným postupem je ukládat připojovací řetězce do místní proměnné prostředí. Hodnoty proměnných prostředí můžete v konfiguračním souboru odkazovat prostřednictvím notace @env('DATABASE_CONNECTION_STRING'). Hodnota připojovacího řetězce se přepíše službou Static Web Apps pro nasazený web na základě informací získaných při připojení k databázi.
Koncový bod rozhraní API	Koncový bod REST je k dispozici prostřednictvím /data-api/rest, zatímco koncový bod GraphQL je dostupný prostřednictvím /data-api/graphql, jak je nakonfigurováno v tomto konfiguračním souboru. Můžete nakonfigurovat cesty REST a GraphQL, ale předpona /data-api není konfigurovatelná.
Zabezpečení rozhraní API	Nastavení runtime.host.cors umožňují definovat povolené zdroje, které můžou posílat požadavky do rozhraní API. V tomto případě konfigurace odráží vývojové prostředí a seznam povolených http://localhost:4280 umístění.
Model entit	Definuje entity vystavené prostřednictvím tras v rozhraní REST API nebo jako typy ve schématu GraphQL. V tomto případě je jméno Osoba jméno vystavené koncovému bodu, zatímco entities.<NAME>.source se jedná o schéma databáze a mapování tabulek. Všimněte si, že název koncového bodu rozhraní API nemusí být shodný s názvem tabulky.
Zabezpečení entit	Pravidla oprávnění uvedená v entity.<NAME>.permissions poli řídí nastavení autorizace pro entitu. Entitu můžete zabezpečit pomocí rolí stejným způsobem jako cesty tímto zabezpečujete pomocí rolí.

Poznámka:

Konfigurační soubor a jeho vlastnosti connection-string, host.mode a graphql.allow-introspection se při nasazení webu přepíší. Váš připojovací řetězec je přepsán podrobnostmi o ověření, které jsou shromažďovány při připojení vaší databáze k prostředku Static Web Apps. Vlastnost host.mode je nastavena na production hodnotu a graphql.allow-introspection je nastavena na false hodnotu. Tato přepsání poskytují konzistenci v konfiguračních souborech napříč vývojovými a produkčními úlohami a zároveň zajišťují, aby byl prostředek Static Web Apps s povolenými databázovými připojeními zabezpečený a připravený pro produkční prostředí.

Když je statická webová aplikace nakonfigurovaná pro připojení k databázi, můžete teď připojení ověřit.

Aktualizace domovské stránky

Nahraďte značky body mezi značkami v souboru index.html následujícím kódem 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>

Místní spuštění aplikace

Teď můžete web spustit a manipulovat s daty v databázi přímo.

1. Spusťte statickou webovou aplikaci s konfigurací databáze.

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

Teď, když je rozhraní příkazového řádku spuštěné, můžete k databázi přistupovat prostřednictvím koncových bodů definovaných v souborustaticwebapp.database.config.json .

Koncový http://localhost:4280/data-api/rest/<ENTITY_NAME> bod přijímá GET, PUT, POST a DELETE požadavky na manipulaci s daty v databázi.

Koncový http://localhost:4280/data-api/graphql bod přijímá dotazy a mutované grafy GraphQL.

Manipulace s daty

Následující příkazy nezávislé na rozhraní ukazují, jak provádět úplné operace CRUD v databázi.

Výstup pro každou funkci se zobrazí v okně konzoly prohlížeče.

Otevřete vývojářské nástroje stisknutím kláves CMD/CTRL + SHIFT + I a vyberte kartu Konzola .

Výpis všech položek

Přidejte následující kód mezi script značky v 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);
}

V tomto příkladu:

• Výchozí požadavek rozhraní fetch API používá příkaz GET.
• Data v datové části odpovědi se nacházejí ve value vlastnosti.

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

V tomto příkladu:

• Dotaz GraphQL vybere pole Id a Name z databáze.
• Požadavek předaný serveru vyžaduje datovou část, ve které query vlastnost obsahuje definici dotazu.
• Data v datové části odpovědi se nacházejí ve data.people.items atributu.

Aktualizujte stránku a vyberte tlačítko Seznam .

V okně konzoly prohlížeče se teď zobrazí tabulka se seznamem všech záznamů v databázi.

ID	Název
1	Sunny
2	Dheeraj

Tady je snímek obrazovky s tím, jak by měl vypadat v prohlížeči.

Získání podle ID

Přidejte následující kód mezi script značky v 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);
}

V tomto příkladu:

• Koncový bod má příponu /person/Id.
• Hodnota ID je přidána na konec umístění koncového bodu.
• Data v datové části odpovědi jsou ve vlastnosti 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);
}

V tomto příkladu:

• Dotaz GraphQL vybírá pole Id a Name z databáze.
• Požadavek předaný serveru vyžaduje datovou část, ve které query vlastnost obsahuje definici dotazu.
• Data v datové části odpovědi jsou ve vlastnosti data.person_by_pk.

Aktualizujte stránku a vyberte tlačítko Získat .

V okně konzoly prohlížeče se teď zobrazí tabulka se seznamem jednoho záznamu požadovaného z databáze.

ID	Název
1	Sunny

Update

Přidejte následující kód mezi script značky v index.html.

Static Web Apps podporují slovesa PUT i PATCH. Požadavek PUT aktualizuje celý záznam, zatímco PATCH provádí částečnou aktualizaci.

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

V tomto příkladu:

• Koncový bod má příponu /person/Id/.
• Hodnota ID je připojena na konec umístění koncového bodu.
• Příkaz REST slouží PUT k aktualizaci záznamu databáze.
• Data v datové části odpovědi se nacházejí ve vlastnosti 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);
}

V tomto příkladu:

• Dotaz GraphQL vybere pole Id a Name z databáze.
• Objekt query obsahuje dotaz GraphQL ve query vlastnosti.
• Hodnoty argumentů do funkce GraphQL se předávají prostřednictvím query.variables vlastnosti.
• Požadavek předaný serveru vyžaduje datovou část, ve které query vlastnost obsahuje definici dotazu.
• Data v obsahu odpovědi se nacházejí ve data.updatePerson vlastnosti.

Aktualizujte stránku a vyberte tlačítko Aktualizovat .

V okně konzoly prohlížeče se teď zobrazí tabulka s aktualizovanými daty.

ID	Název
1	Molly

Create

Přidejte následující kód mezi script značky v 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);
}

V tomto příkladu:

• Koncový bod má příponu /person/.
• Příkaz REST slouží POST k přidání záznamu databáze.
• Data v zátěži odpovědi se nacházejí ve vlastnosti 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);
}

V tomto příkladu:

• Dotaz GraphQL vybírá pole Id a Name z databáze.
• Objekt query obsahuje dotaz GraphQL ve query vlastnosti.
• Hodnoty argumentů do funkce GraphQL se předávají prostřednictvím query.variables vlastnosti.
• Požadavek předaný serveru vyžaduje datovou část, ve které query vlastnost obsahuje definici dotazu.
• Data v datové části odpovědi se nacházejí ve data.updatePerson vlastnosti.

Aktualizujte stránku a vyberte tlačítko Vytvořit .

V okně konzoly prohlížeče se teď zobrazí tabulka zobrazující nový záznam v databázi.

ID	Název
3	Pedro

Delete

Přidejte následující kód mezi script značky v 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);
  }
}

V tomto příkladu:

• Koncový bod má příponu /person/Id/.
• Hodnota ID je přidána na konec umístění koncového bodu.
• Příkaz REST slouží DELETE k odebrání záznamu databáze.
• Pokud je odstranění úspěšné, je vlastnost datové části ok odpovědi 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 }`);
}

V tomto příkladu:

• Dotaz GraphQL vybere Id pole z databáze.
• Objekt query obsahuje dotaz GraphQL ve query vlastnosti.
• Hodnoty argumentů do funkce GraphQL se předávají prostřednictvím query.variables vlastnosti.
• Požadavek předaný serveru vyžaduje datovou část, ve které query vlastnost obsahuje definici dotazu.
• Data v datové části odpovědi se nacházejí v atributu data.deletePerson.

Aktualizujte stránku a vyberte tlačítko Odstranit .

V okně konzoly prohlížeče se teď zobrazí tabulka s odpovědí z žádosti o odstranění.

Záznam odstraněn: 3

Teď, když jste pracovali s webem místně, můžete ho teď nasadit do Azure.

Nasazení webu

Pokud chcete nasadit tuto lokalitu do produkčního prostředí, stačí potvrdit konfigurační soubor a odeslat změny na server.

1. Přidejte změny souboru, které chcete sledovat.

   git add .
   

2. Potvrďte změny konfigurace.

   git commit -am "Add database configuration"
   

3. Nahrajte své změny na server.

   git push origin main
   

Připojení databáze ke statické webové aplikaci

Pomocí následujícího postupu vytvořte propojení mezi instancí statické webové aplikace vašeho webu a vaší databází.

1. Otevřete statickou webovou aplikaci na webu Azure Portal.

2. V části Nastavení vyberte Připojení k databázi.

3. V části Výroba vyberte Odkaz na stávající databázi.

4. V okně Propojit existující databázi zadejte následující hodnoty:

   Vlastnictví	Hodnota
   Typ databáze	V rozevíracím seznamu vyberte typ databáze.
   Subscription	V rozevíracím seznamu vyberte své předplatné Azure.
   Název prostředku	Vyberte název databázového serveru, který má požadovanou databázi.
   Název databáze	Vyberte název databáze, kterou chcete propojit se statickou webovou aplikací.
   Typ ověřování	Vyberte Připojovací řetězec a zadejte uživatelské jméno a heslo MySQL.

5. Vyberte OK.

Ověřte, že je vaše databáze připojená k vašemu prostředku Static Web Apps.

Jakmile připojíte databázi ke statické webové aplikaci a web se dokončí, pomocí následujícího postupu ověřte připojení k databázi.

1. Otevřete statickou webovou aplikaci na webu Azure Portal.

2. V části Základy vyberte adresu URL prostředku Static Web Apps a přejděte do své statické webové aplikace.

3. Výběrem tlačítka Seznam zobrazíte seznam všech položek.

   Výstup by měl vypadat podobně jako na tomto snímku obrazovky.

   

Vyčistěte zdroje

Pokud chcete odebrat prostředky vytvořené během tohoto kurzu, musíte zrušit propojení databáze a odebrat ukázková data.

1. Zrušení propojení databáze: Otevřete statickou webovou aplikaci na webu Azure Portal. V části Nastavení vyberte Připojení k databázi. Vedle propojené databáze vyberte Zobrazit podrobnosti. V okně Podrobnosti o připojení k databázi vyberte tlačítko Zrušit propojení .

2. Odeberte ukázková data: V databázi odstraňte tabulku s názvem MyTestPersonTable.

Další kroky

Přidání rozhraní API