Dezvoltarea unui API de date utilizând Azure Static Web Apps

  • 7 minute

Aplicațiile web statice sunt un concept în designul site-urilor web care a devenit popular. Acestea constau în conținut trimis direct către browserul unui utilizator care nu necesită niciun cod pentru a fi executat pe server. Aplicațiile web statice constau din HTML și CSS. De asemenea, includ adesea cod JavaScript, care se execută pe partea clientului, nu pe server. Dezvoltatorii web consideră adesea că aplicațiile web statice:

  • Poate fi dezvoltat rapid cu framework-uri precum Bootstrap, Jekyll și AngularJS.
  • Sunt simplu de scalat, deoarece nu se schimbă starea pe server.
  • Încurajați separarea între codul interfeței cu utilizatorul și funcționalitatea back-end.

Azure Static Web Apps este un serviciu din Azure conceput pentru a simplifica codificarea și implementarea aplicațiilor web statice în Azure pentru producție. Azure Static Web Apps acceptă implementarea continuă prin monitorizarea unui depozit de cod în GitHub sau Azure DevOps. Când efectuați o modificare la codul site-ului web și împingeți modificarea în depozit, Azure Static Web Apps identifică modificarea și construiește și implementează automat noul site în Azure. Imediat, modificarea devine disponibilă pentru utilizatori.

Diagramă care arată modul în care Azure Static Web Apps ușurează implementarea aplicațiilor web statice din depozite.

Deoarece Data API Builder (DAB) este proiectat să funcționeze perfect cu Azure Static Web Apps, este simplu să găzduiți API-urile bazei de date în acest serviciu. Tot ce trebuie să faceți este să utilizați fișierul de configurare pentru a informa DAB despre instanța Azure Static Web Apps și să o implementați într-un depozit. Azure Static Web Apps vă va găzdui API-ul și utilizatorii pot începe să apeleze metodele sale.

Crearea unei aplicații web statice

Începeți prin a naviga la portalul Azure și selectați Creați o resursă. În bara de căutare, introduceți Static Web App. Când apare cardul Static Web App , selectați-l, apoi selectați Creare.

Apoi, alegeți abonamentul și selectați un grup de resurse existent sau creați unul nou. În caseta text Nume , introduceți un nume descriptiv pentru aplicație. Trebuie să selectați tipul de plan. Pentru proiectele personale, puteți utiliza planul gratuit , în timp ce pentru aplicațiile de producție, este recomandat planul Standard .

Captură de ecran care arată cum să finalizați expertul pentru a crea o aplicație web statică în portalul Azure.

Sub Detalii implementare, specificați tipul de depozit care conține aplicația. Trebuie să vă conectați la GitHub sau să selectați depozitul și ramura din Azure DevOps. În cele din urmă, revizuiți setările selectând Revizuire + creare, apoi selectați Creare pentru a finaliza procesul.

Crearea unui fișier de configurare a generatorului de API-uri de date

Pentru a implementa API-ul bazei de date în Azure Static Web Apps, trebuie să creați corect fișierul de configurare DAB. Puteți finaliza această sarcină cu două instrumente de linie de comandă:

  • swa: Utilizați acest CLI pentru a inițializa un nou fișier de configurare DAB.
  • dab: Utilizați această CLI pentru a adăuga una sau mai multe baze de date la fișier.

Înainte de a începe, fie clonați depozitul GitHub pe mașina locală, fie utilizați GitHub Codespaces pentru a deschide un prompt de comandă în GitHub însuși.

  1. Pentru a inițializa fișierul de configurare DAB în folderul rădăcină al depozitului, rulați următoarea comandă.

    swa db init --database-type "<database-type>"

    Înlocuiți <database type> cu serverul de baze de date. De exemplu, dacă baza de date este găzduită în baza de date SQL Azure, utilizați mssql. Dacă este în MySQL, utilizați mysql.

  2. Pentru a adăuga o bază de date la fișierul de configurare, rulați următoarea comandă.

    dab add "<database-name>" --source "<schema>.<table>" --permissions "anonymous:*" -config "swa-db-connections/staticwebapp.database.config.json"

    Înlocuiți <database-name> cu un nume descriptiv și <schema>.<table> cu schema și numele tabelului din baza de date.

Acești pași creează un fișier de configurare în depozit numit swa-db-connections/staticwebapp.database.config.json. Revizuiți acest fișier înainte de a trimite modificările în depozit.

Configurarea conexiunii la baza de date

Pentru a configura conexiunea la baza de date din aplicația web statică, începeți prin a deschide aplicația web statică în portalul Azure. Navigați la secțiunea Setări și selectați Conexiune la baza de date. Sub Producție, alegeți să legați o bază de date existentă. Selectați tipul de bază de date, grupul de resurse și numele bazei de date corespunzător. În cele din urmă, alegeți tipul de autentificare preferat și conectați baza de date.

Notă

Vă recomandăm să utilizați o identitate gestionată atribuită de sistem sau o identitate gestionată atribuită de utilizator pentru a vă autentifica, deoarece șirul de conexiune nu include o cheie de autorizare.

Validarea accesului la API

Pentru a valida accesul la API, începeți prin a deschide aplicația web statică pe care ați creat-o în portalul Azure. Navigați la secțiunea Elemente esențiale și selectați adresa URL pentru a naviga pe site. În bara de adrese a browserului, adăugați /data-api la adresa URL și apăsați pe Enter.

Ar trebui să vedeți o pagină care indică faptul că containerul DAB este sănătos. Pentru a răsfoi entitățile din baza de date, adăugați /data-api/rest/ la adresa URL. Aceasta trimite o solicitare HTTP GET și afișează răspunsul JSON.