พัฒนา API ข้อมูลโดยใช้เว็บแอปแบบคงที่ของ Azure

เว็บแอปแบบคงที่เป็นแนวคิดในการออกแบบเว็บไซต์ที่ได้รับความนิยม ประกอบด้วยเนื้อหาที่ส่งโดยตรงไปยังเบราว์เซอร์ของผู้ใช้ซึ่งไม่ต้องการให้มีโค้ดใด ๆ เพื่อเรียกใช้บนเซิร์ฟเวอร์ เว็บแอปแบบคงที่ประกอบด้วย HTML และ CSS พวกเขามักจะมีโค้ด JavaScript ซึ่งดําเนินการบนฝั่งไคลเอ็นต์ ไม่ใช่เซิร์ฟเวอร์ นักพัฒนาเว็บมักพบว่าเว็บแอปแบบคงที่:

• สามารถพัฒนาได้อย่างรวดเร็วด้วยเฟรมเวิร์กเช่น Bootstrap, Jekyll และ AngularJS
• ง่ายต่อการปรับขนาดเนื่องจากไม่มีการเปลี่ยนแปลงสถานะบนเซิร์ฟเวอร์
• ส่งเสริมการแยกระหว่างโค้ดส่วนติดต่อผู้ใช้และฟังก์ชันส่วนหลัง

Azure Static Web Apps เป็นบริการใน Azure ที่ออกแบบมาเพื่อให้ง่ายต่อการเขียนโค้ดและปรับใช้เว็บแอปแบบคงที่ไปยัง Azure สําหรับการผลิต Azure Static Web Apps สนับสนุนการปรับใช้อย่างต่อเนื่องโดยการตรวจสอบที่เก็บโค้ดใน GitHub หรือ Azure DevOps เมื่อคุณทําการเปลี่ยนแปลงโค้ดเว็บไซต์ และพุชการเปลี่ยนแปลงของคุณไปยังที่เก็บ Azure Static Web Apps จะตรวจพบการเปลี่ยนแปลงและสร้างและปรับใช้ไซต์ใหม่ไปยัง Azure โดยอัตโนมัติ การเปลี่ยนแปลงของคุณจะพร้อมใช้งานสําหรับผู้ใช้ทันที

เนื่องจากตัวสร้าง API ข้อมูล (DAB) ได้รับการออกแบบมาให้ทํางานร่วมกับ Azure Static Web Apps ได้อย่างราบรื่น จึงเป็นเรื่องง่ายที่จะโฮสต์ API ฐานข้อมูลของคุณในบริการนี้ สิ่งที่คุณต้องทําคือใช้ไฟล์การกําหนดค่าเพื่อบอก DAB เกี่ยวกับอินสแตนซ์ Azure Static Web Apps ของคุณและปรับใช้กับที่เก็บ Azure Static Web Apps จะโฮสต์ API ของคุณ และผู้ใช้สามารถเริ่มเรียกใช้เมธอดได้

สร้างเว็บแอปแบบคงที่

เริ่มต้นด้วยการนําทางไปยังพอร์ทัล Azure และเลือก สร้างทรัพยากร ในแถบค้นหา ให้ป้อน Static Web App เมื่อการ์ด Static Web App ปรากฏขึ้น ให้เลือกการ์ดนั้น แล้วเลือก สร้าง

จากนั้น เลือก การสมัครใช้งาน ของคุณ และเลือก กลุ่มทรัพยากร ที่มีอยู่หรือสร้างใหม่ ในกล่องข้อความ ชื่อ ให้ใส่ชื่อที่สื่อความหมายสําหรับแอปของคุณ คุณต้องเลือกประเภทแผน สําหรับโปรเจ็กต์ส่วนตัว คุณสามารถใช้แผน Free ได้ ในขณะที่สําหรับแอปที่ใช้งานจริง แนะนําให้ใช้แผน Standard

ในส่วน รายละเอียดการปรับใช้ ให้ระบุประเภทของที่เก็บที่มีแอปของคุณ คุณต้องลงชื่อเข้าใช้ GitHub หรือเลือกที่เก็บและสาขาใน Azure DevOps สุดท้าย ให้ตรวจสอบการตั้งค่าของคุณโดยเลือก รีวิว + สร้าง แล้วเลือก สร้าง เพื่อดําเนินการให้เสร็จสิ้น

สร้างไฟล์การกําหนดค่าของ Data API Builder

เมื่อต้องการปรับใช้ API ฐานข้อมูลของคุณกับ Azure Static Web Apps คุณต้องสร้างไฟล์การกําหนดค่า DAB อย่างถูกต้อง คุณสามารถทํางานนี้ให้เสร็จสมบูรณ์ได้ด้วยเครื่องมือบรรทัดคําสั่งสองอย่าง:

• swa: ใช้ CLI นี้เพื่อเริ่มต้นไฟล์การกําหนดค่า DAB ใหม่
• dab: ใช้ CLI นี้เพื่อเพิ่มฐานข้อมูลอย่างน้อยหนึ่งฐานข้อมูลลงในไฟล์

ก่อนที่คุณจะเริ่ม ให้โคลนที่เก็บ GitHub ไปยังเครื่องในเครื่องของคุณ หรือใช้ GitHub Codespaces เพื่อเปิดพรอมต์คําสั่งใน GitHub เอง

1. เมื่อต้องการเริ่มต้นไฟล์คอนฟิกูเรชัน DAB ในโฟลเดอร์รากของที่เก็บ ให้เรียกใช้คําสั่งต่อไปนี้

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

   แทนที่ <database type> ด้วยเซิร์ฟเวอร์ฐานข้อมูลของคุณ ตัวอย่างเช่น ถ้าฐานข้อมูลของคุณโฮสต์ในฐานข้อมูล Azure SQL ให้ใช้ mssql. หากอยู่ใน MySQL ให้ใช้ mysql.

2. เมื่อต้องการเพิ่มฐานข้อมูลลงในแฟ้มการกําหนดค่า ให้เรียกใช้คําสั่งต่อไปนี้

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

   แทนที่ด้วย <database-name> ชื่อที่สื่อความหมายและ <schema>.<table> ด้วยชื่อ schema และตารางในฐานข้อมูลของคุณ

ขั้นตอนเหล่านี้สร้างไฟล์การกําหนดค่าในที่เก็บชื่อ swa-db-connections/staticwebapp.database.config.json ตรวจสอบไฟล์นี้ก่อนที่คุณจะส่งการเปลี่ยนแปลงของคุณไปยังที่เก็บ

กําหนดค่าการเชื่อมต่อกับฐานข้อมูล

เมื่อต้องการกําหนดค่าการเชื่อมต่อกับฐานข้อมูลในเว็บแอปแบบคงที่ของคุณ ให้เริ่มต้นด้วยการเปิดเว็บแอปแบบคงที่ในพอร์ทัล Azure ไปที่ส่วนการตั้งค่าและเลือกการเชื่อมต่อฐานข้อมูล ภายใต้ การผลิต ให้เลือกลิงก์ฐานข้อมูลที่มีอยู่ เลือกชนิดฐานข้อมูล กลุ่มทรัพยากร และชื่อฐานข้อมูลที่เหมาะสม สุดท้าย ให้เลือกประเภทการรับรองความถูกต้องที่คุณต้องการและเชื่อมโยงฐานข้อมูล

ตรวจสอบการเข้าถึง API

เมื่อต้องการตรวจสอบความถูกต้องของการเข้าถึง API ให้เริ่มต้นด้วยการเปิดเว็บแอปแบบคงที่ที่คุณสร้างขึ้นในพอร์ทัล Azure ไปที่ส่วน Essentials และเลือก URL เพื่อเรียกดูเว็บไซต์ ในแถบที่อยู่ของเบราว์เซอร์ ให้เพิ่ม/data-apiลงใน URL แล้วกด Enter

คุณควรเห็นหน้าเว็บที่ระบุว่าคอนเทนเนอร์ DAB มีสุขภาพดี เมื่อต้องการเรียกดูเอนทิตีจากฐานข้อมูลของคุณ ให้ผ /data-api/rest/ นวกเข้ากับ URL การดําเนินการนี้จะส่งคําขอ HTTP GET และแสดงการตอบกลับ JSON