Azure İşlevleri ile API oluşturma
Şimdi alışveriş listesi uygulamanız için bir API oluşturmanın zamanı geldi.
Azure İşlevleri
Azure Static Web Apps'in en büyük avantajlarından biri, web uygulamanızı ve Azure İşlevleri ile oluşturulmuş bir API'yi birlikte barındırmasıdır. Azure Static Web Apps, web uygulamanızın statik varlıklarını genel olarak dağıtır ve API'nizi Azure İşlevleri'nde barındırır. Bu kurulumla, web uygulaması varlıklarınızın genel dağıtımıyla birlikte gelen kullanılabilirliği ve hızı kazanırsınız.
Elde etmediğiniz şey de önemlidir.
Ön ucunuzun veya arka ucunuzun yapılandırılması ve bakımı için tam bir sunucuya ihtiyacınız yoktur. Azure Static Web Apps ile harika bir noktaya ulaşabilirsiniz: Uygulamanızı ve API'nizi en az yapılandırma ve bakımla yayımlama kolaylığı elde edersiniz.
Azure İşlevleri, rota uç noktalarınıza hizmet sunar, yapılandırma veya bakım için tam bir back-end sunucusu gerektirmez ve talebe göre otomatik dışa ve içe ölçeklendirme sağlar. Bu özellikler, Azure İşlevleri'nin statik varlıklara hizmet veren alışveriş listesi web uygulamanız için harika bir API iş ortağı olmasını sağlar.
Azure Static Web Apps, siteniz için portaldaki Genel Bakış sekmesinde bulabileceğiniz benzersiz bir URL oluşturur. API, URL'ye eklenerek /api aynı URL üzerinden kullanılabilir.
Alışveriş listesi API'niz
Alışveriş listesi uygulamanız, kişilerin listelerindeki öğeleri almasına, eklemesine, güncelleştirmesine ve silmesine olanak tanır. Bu nedenle API'nizin bu gereksinimlere uyan uç noktaları olması mantıklıdır.
Oluşturduğunuz dört uç nokta şunlardır:
| Yöntemler | Yönlendirme uç noktaları | Tam API uç noktası |
|---|---|---|
| AL | products |
api/products |
| YAYINLA | products |
api/products |
| KOYMAK | products/:id |
api/products/:id |
| SİLMEK | products/:id |
api/products/:id |
HTTP GET isteklerinizin api/productsadresine 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
Şimdiye kadar bir ön uç çerçevesi kullanıyordunuz. Yakında bir API ekleyebilir ve bunu ön uç uygulamanıza bağlayabilirsiniz. Deponuzda, tamamlanmamış bir Azure İşlevleri projesi ve ürünlerinizin PUT, POST ve DELETE için HTTP uç noktalarını içeren bir api-starter klasörü vardır.
API'de HTTP GET işlevi eksik. Azure İşlevleri projesinin API'sini tamamlayın ve eksik işlevi ekleyin. Ardından API'nizi ön uç web uygulamanıza bağlayın.
Web uygulamanızdaki değişikliklerin önizlemesini görüntüleme
Uygulamada değişiklik yapmadan önce, değişiklikler için yeni bir dal oluşturmak iyi bir uygulamadır. Uygulamanızın API'sini tamamlamak için birkaç değişiklik yaptığınız için bu değişiklikler için bir dal oluşturmanız gerekir.
Değişiklikleri yaptıktan sonra, değişiklikleri birleştirmeye karar vermeden önce bunların çalıştığını görmek istersiniz. Yeni dalınızdan ana dala bir pull request oluşturduktan sonra GitHub Action uygulamanızı ve API'nizi derleyerek bir önizleme URL'sine dağıtır. Bu özellik, web uygulamanızı Azure Static Web Apps ile çalışır durumda bırakmanıza olanak tanır. Ayrıca, çekme isteğinizin sonuçlarını içeren ikinci bir önizleme örneği de görebilirsiniz.
Web uygulamanız ve API'niz arasında iletişim kurma
API'nizi Azure İşlevleri ile yerel olarak çalıştırdığınızda, varsayılan olarak 7071 numaralı bağlantı noktasında ç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, isteğe Çıkış Noktaları Arası Kaynak Paylaşımı (CORS) adı verilir. 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 Static Web Apps, uygulamanızı otomatik olarak yapılandırarak ters ara sunucu kullanarak Azure'da API'nizle iletişim kurabilmesini sağlar. Ters ara sunucu, web uygulamanızın ve API'nizin aynı web etki alanından geliyor gibi görünmesini sağlar. Bu nedenle CORS'yi yalnızca yerel olarak çalıştırdığınızda ayarlamanız gerekir.
Sonraki adımlar
Artık API'nizi oluşturmaya ve alışveriş listesi uygulamanız için HTTP uç noktalarınızı yapılandırmaya hazırsınız.