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

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.

Uyarı

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.

Önkoş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 Description
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 No Framework statik web uygulaması oluşturun.

Example

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ızın yolu ü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. API Yönetimi örneğindeki uç nokta, Statik Web Uygulamaları, bağlı kaynağa yapılan /api isteklerle eşleşip tüm yolu ara sunucuya yönlendirdiğinden, ön eki /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ündeAPI 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. İstekleri almak için API'leri yapılandırma bölümüne bakın. Kullanmak istediğiniz API'lere izin vermek amacıyla bir API Yönetimi ürününü yapılandırın.

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.

Azure portalında, Statik Web Apps kaynağı için oluşturulan ürüne API'nin nasıl ekleneceğini gösteren API Management Ürünleri API dikey penceresinin ekran görüntüsü.

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.
  • Generated for Static Web Apps resource with default hostname: <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> adlı bir API Management aboneliği oluşturulur ve aynı ada sahip ürüne yönelik olarak kapsamı belirlenir.
  • 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 yapılan istekleri proxy ederken aboneliğin birincil anahtarını ve geçerli bir erişim belirtecini içerecek şekilde yapılandırılmıştır.

Önemli

validate-jwt ilkesinin değiştirilmesi veya aboneliğin birincil anahtarının yeniden oluşturulması, statik web uygulamasının API Management hizmetine yönlendirdiği istekler için proxy oluşturmasını engellemesine neden olur. 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 başlayan /api/ rotalarına yönelik istekler artık API Management hizmetinize yönlendirilmez.

Uyarı

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