Azure İşlevleri ile API oluşturma
Şimdi alışveriş listesi uygulamanız için bir API oluşturmanın zamanı geldi.
Azure İşlevleri
Azure Statik Web Uygulamalarının sunduğu en önemli avantajlardan biri de web uygulamanızı ve Azure İşlevleri kullanılarak oluşturulan API’yi birlikte barındırmasıdır! Azure Statik Web Uygulamaları web uygulamanızın statik varlıklarını genel olarak dağıtır ve API’nizi Azure İşlevleri’nde barındırır. Böylece, web uygulamanıza ilişkin varlıklarının genel olarak dağıtılmasıyla kullanılabilirlik ve hız elde edersiniz. Elde edemedikleriniz de önemlidir.
Ön ucunuz veya arka ucunuz için tam sunucu yapılandırmanız ve bakımını yapmanız gerekmez. Bu özellik, Azure Static Web Apps için en iyi noktadır: Uygulamanızı ve API'nizi en az yapılandırma ve bakımla yayımlama kolaylığı elde edersiniz.
Azure İşlevleri yol uç noktalarınızı sağlar, yapılandırma ve bakım işlemleri için tam kapsamlı bir arka uç sunucusu gerektirmez ve talebe göre otomatik ölçek genişletme veya daraltma özelliği sunar. Bu özellikler, Azure İşlevleri statik varlıklara hizmet veren alışveriş listesi web uygulamanız için harika bir API iş ortağı yapar.
Azure Statik Web Uygulamaları siteniz için benzersiz bir URL oluşturur. Bu URL’yi portaldaki Genel bakış sekmesinde bulabilirsiniz. API, URL'ye eklenerek /api aynı URL üzerinden kullanılabilir.
Alışveriş listesi API’niz
Alışveriş listesi uygulamanız kullanıcılara listeden öğe alma, listeye öğe ekleme ve listedeki öğeleri güncelleştirip silme olanağı tanır. Bu nedenle API'nizin bu gereksinimlere uyan uç noktaları olması mantıklıdır.
Dört uç nokta şunlardır:
| Yöntemler | Yol uç noktaları | Tam API uç noktaları |
|---|---|---|
| AL | products |
api/products |
| PAYLAŞ | products |
api/products |
| YERLEŞTİRMEK | products/:id |
api/products/:id |
| SİL | products/:id |
api/products/:id |
HTTP GET isteklerinizin api/ürünlere yönlendirildiğini fark edin. Ön api ek, uygulamadaki API uç noktalarınız için ayrılmıştır. Sitenizin gereksinimlerine uyacak başka yollar tanımlayabilirsiniz, ancak api her zaman Azure İşlevleri uygulamasını işaret eder.
Web uygulaması için API oluşturma
Şu ana kadar bir ön uç çerçevesi kullanıyordunuz. Yakında bir API ekleyip bunu ön uç uygulamanıza bağlayabilirsiniz. Deponuzda, eksik bir Azure İşlevleri projesini ve ürünlerinize yönelik PUT, POST ve DELETE işlemleri için HTTP uç noktalarını içeren bir Api projesi bulunur. API’de HTTP GET işlevi eksik. Azure İşlevleri projesinin API'sini tamamlar ve eksik işlevi eklersiniz, ardından API'nizi ön uç web uygulamanıza bağlarsınız.
Web uygulamanızdaki değişiklikleri önizleme
Bir uygulamada değişiklik yapmadan önce yapılan değişiklikler için yeni bir dal oluşturma faydalı bir yöntemdir. Uygulamanızın API'sini tamamladığınızda birkaç değişiklik yaptığınız için bu değişiklikler için bir dal oluşturursunuz.
Değişiklikleri yaptıktan sonra, değişiklikleri birleştirmeye karar vermeden önce bunların çalıştığını görmek istiyorsunuz. Yeni dalınızdan ana dala çekme isteği oluşturduktan sonra GitHub Action uygulamanızı ve API'nizi oluşturur ve her ikisini de bir önizleme URL'sine dağıtır. Bu önizleme URL'si, web uygulamanızı Azure Static Web Apps ile çalışır durumda bırakmanızı sağlar, ancak çekme isteğinizin sonuçlarını içeren ikinci bir URL'yi de görüntülemenizi sağlar.
Web uygulamanız ve API’niz arasında gerçekleştirilen iletişimi yapılandırma
API’nizi yerel olarak çalıştırdığınızda, varsayılan olarak bağlantı noktası 7071’de çalışır. Web uygulamanız farklı bir yerel bağlantı noktasında çalışır. Web uygulamanız, API'nizin bağlantı noktası 7071'e bir HTTP isteği göndermeye çalıştığında, eylem Çıkış Noktaları Arası Kaynak Paylaşımı (CORS) olarak bilinir. API sunucusu isteğin devam etmesine izin vermediği sürece tarayıcınız HTTP isteğinin tamamlanmasını engeller.
Azure Static Web Apps'te yayımladığınızda CORS konusunda endişelenmeniz gerekmez. Azure Statik Web Uygulamaları, uygulamanızı otomatik olarak yapılandırır ve bunun bir ters ara sunucuyu kullanarak API’niz ile iletişim kurmasını sağlar. Ters ara sunucu, web uygulamanızın ve API’nizin aynı web etki alanında yer alıyormuş gibi görünmesini sağlar. Bu nedenle, yerel olarak çalışırken yalnızca CORS’yi ayarlamanız gerekir.
Sonraki adımlar
Artık API’nizi oluşturmaya ve alışveriş listesi uygulamanız için HTTP uç noktasını yapılandırmaya hazırsınız.