Aracılığıyla paylaş

Azure API Management ile Azure Static Web Apps'te API desteği

  • Makale

Azure API Management , mevcut arka uç hizmetleri için modern bir API ağ geçidi oluşturmanıza olanak tanıyan bir hizmettir.

Azure API Management hizmetinizi statik web uygulamanıza bağladığınızda, ile başlayan /api bir yol ile statik web uygulamanıza yapılan tüm istekler Azure API Management hizmetinde aynı yola bağlanır.

Azure API Management hizmeti aynı anda birden çok statik web uygulamasına bağlanabilir. Her bağlantılı statik web uygulaması için bir API Management ürünü oluşturulur. Ürüne eklenen tüm API'ler ilişkili statik web uygulaması tarafından kullanılabilir.

Tüm Azure API Management fiyatlandırma katmanları Azure Static Web Apps ile kullanılabilir.

Statik Web Uygulamaları için API seçenekleri aşağıdaki Azure hizmetlerini içerir:

Daha fazla bilgi için API'lere genel bakış bölümüne bakın.

Dekont

Azure API Management ile tümleştirme için Statik Web Apps Standart planı gerekir.

Arka uç tümleştirmesi Statik Web Apps çekme isteği ortamlarında desteklenmez.

Ön koşullar

Bir API management örneğini statik web uygulamanıza bağlamak için mevcut bir Azure API Management kaynağına ve statik bir web uygulamasına sahip olmanız gerekir.

Kaynak Tanım
Azure API Management Henüz bir örneğiniz yoksa Yeni Azure API Management hizmeti örneği oluşturma kılavuzundaki adımları izleyin.
Mevcut statik web uygulaması Henüz bir uygulamanız yoksa, Başlangıç kılavuzundaki adımları izleyerek Çerçeve Yok statik web uygulaması oluşturun.

Örnek

Aşağıdaki konum aracılığıyla bir uç noktayı kullanıma sunan mevcut bir Azure API Management örneğini göz önünde bulundurun.

https://my-api-management-instance.azure-api.net/api/getProducts

Bağlandıktan sonra, bu örnek URL'de gösterildiği gibi statik web uygulamanızdan yol üzerinden api aynı uç noktaya erişebilirsiniz.

https://red-sea-123.azurestaticapps.net/api/getProducts

Her iki URL de aynı API uç noktasına işaret eder. Statik Web Uygulamaları, bağlı kaynağa gönderilen /api isteklerle eşleşip tüm yolu ara sunucuya eklediğinden, API Management örneğindeki uç nokta ön ekine sahip /api olmalıdır.

Bir Azure API Management hizmetini statik bir web uygulamasının API arka ucu olarak bağlamak için şu adımları izleyin:

  1. Azure portalında statik web uygulamasına gidin.

  2. Gezinti menüsünden API'ler'i seçin.

  3. API Management hizmetini bağlamak istediğiniz ortamı bulun. Bağlantı'yı seçin.

  4. Arka uç kaynak türünde API Management'ı seçin.

  5. Abonelik bölümünde, bağlamak istediğiniz Azure API Management hizmetini içeren aboneliği seçin.

  6. Kaynak adı bölümünde Azure API Management hizmetini seçin.

  7. Bağlantı'yı seçin.

Önemli

Bağlama işlemi tamamlandığında, ile /api başlayan yollara yönelik istekler Azure API Management hizmetinize bağlanır. Ancak varsayılan olarak hiçbir API gösterilmez. Bkz . Kullanmak istediğiniz API'lere izin vermek için API Management ürünü yapılandırma isteklerini almak için API'leri yapılandırma.

API'leri istekleri alacak şekilde yapılandırma

Azure API Management, API'lerin nasıl ortaya çıkarıldığını tanımlayan bir ürün özelliğine sahiptir. Bağlama işleminin bir parçası olarak API Management hizmetiniz adlı Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked)bir ürünle yapılandırılır.

API'leri bağlı statik web uygulamanız için kullanılabilir hale getirmek için bunları ürüne ekleyin.

  1. Portaldaki API Management örneğinde Ürünler sekmesini seçin.

  2. Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked) Ürünü seçin.

  3. + API Ekle'yi seçin.

  4. Statik Web Uygulamalarınızdan kullanıma açmak istediğiniz API'leri seçin ve ardından Seç bağlantısını seçin.

Screenshot of the API Management Products API blade in the Azure portal, showing how to add an API to the product created for the Static Web Apps resource.

Bağlama işlemi, AŞAĞıDAKI yapılandırmayı API Management hizmetinize de otomatik olarak uygular:

  • Bağlı statik web uygulamasıyla ilişkili ürün, abonelik gerektirecek şekilde yapılandırılmıştır.
  • adlı Generated for Static Web Apps resource with default hostname: <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> bir API Management aboneliği oluşturulur ve kapsamı aynı ada sahip ürün olarak belirlenmiştir.
  • Yalnızca bağlı statik web uygulamasından geçerli bir erişim belirteci içeren isteklere izin vermek için ürüne bir gelen validate-jwt ilkesi eklenir.
  • Bağlı statik web uygulaması, API Management hizmetine yönelik istekler için ara sunucu oluştururken aboneliğin birincil anahtarını ve geçerli bir erişim belirtecini içerecek şekilde yapılandırılır.

Önemli

validate-jwt ilkesinin değiştirilmesi veya aboneliğin birincil anahtarının yeniden yenilenmesi, statik web uygulamanızın API Management hizmetine yönelik isteklere ara sunucu oluşturmasını engeller. Statik web uygulamanızla ilişkili aboneliği veya ürünü bağlı oldukları sırada değiştirmeyin veya silmeyin.

Azure API Management hizmetinin statik bir web uygulamasıyla bağlantısını kaldırmak için şu adımları izleyin:

  1. Azure portalında statik web uygulamasına gidin.

  2. Bağlantısını açmak istediğiniz ortamı bulun ve API Management hizmet adını seçin.

  3. Bağlantıyı Kaldır'ı seçin.

Bağlantıyı kaldırma işlemi tamamlandığında, ile /api/ başlayan yollara yönelik istekler artık API Management hizmetinize yakın olmaz.

Dekont

Bağlı statik web uygulamasıyla ilişkili API Management ürünü ve aboneliği otomatik olarak silinmez. Bunları API Management hizmetinden silebilirsiniz.

Sorun giderme

API'ler Statik Web Uygulamaları kaynağı için oluşturulan API Management ürünüyle ilişkili değilse, statik web uygulamanızdaki bir /api yola erişmek API management'tan aşağıdaki hatayı döndürür.

{
  "statusCode": 401,
  "message": "Access denied due to invalid subscription key. Make sure to provide a valid key for an active subscription."
}

Bu hatayı düzeltmek için, Statik Web Uygulamalarınızda kullanıma açmak istediğiniz API'leri, ISTEKLERI almak için API'leri yapılandırma bölümünde açıklandığı gibi, onun için oluşturulan ürüne yapılandırın.

Sonraki adımlar

API’ye genel bakış