Azure API Management による Azure Static Web Apps での API のサポート
Azure API Management は、既存のバックエンド サービス用の最新の API ゲートウェイを作成できるサービスです。
Azure API Management サービスを静的 Web アプリにリンクすると、/api で始まるルートを持つ静的 Web アプリへの要求は、Azure API Management サービスの同じルートにプロキシされます。
1 つの Azure API Management サービスを、同時に複数の静的 Web アプリにリンクできます。 リンクされた静的 Web アプリごとに、1 つの API Management 製品が作成されます。 製品に追加されたすべての API は、関連付けられている静的 Web アプリで使用できます。
Azure Static Web Apps を使用するために、すべての Azure API Management 価格レベルを利用できます。
Static Web Apps の API オプションには、次の Azure サービスが含まれます。
詳細については、「API の概要」を参照してください。
Note
Azure API Management との統合には、Static Web Apps Standard プランが必要です。
バックエンド統合は、Static Web Apps の pull request 環境ではサポートされていません。
前提条件
API Management インスタンスを静的 Web アプリにリンクするには、既存の Azure API Management リソースと静的 Web アプリが必要です。
| リソース | 説明 |
|---|---|
| Azure API Management | まだ用意していない場合は、新しい Azure API Management サービス インスタンスの作成 ガイドの手順に従ってください。 |
| 既存の静的 Web アプリ | まだない場合は、ファースト ステップ ガイドの手順に従って、"フレームワークなし" の静的 Web アプリを作成します。 |
例
次の場所を経由してエンドポイントを公開する既存の Azure API Management インスタンスについて検討します。
https://my-api-management-instance.azure-api.net/api/getProducts
リンクされると、この URL の例に示すように、静的 Web アプリから api パスを介してその同じエンドポイントにアクセスできます。
https://red-sea-123.azurestaticapps.net/api/getProducts
どちらの URL も同じ API エンドポイントを指しています。 Static Web Appss は /api に対して行われた要求を照合し、リンクされたリソースへのパス全体をプロキシするため、API Management インスタンスのエンドポイントには /api プレフィックスが必要です。
Azure API Management サービスをリンクする
API Management インスタンスを Static Web Apps にリンクする
静的 Web アプリの API バックエンドとして Azure API Management サービスをリンクするには、次の手順に従います。
Azure portal で、静的 Web アプリに移動します。
ナビゲーション メニューから [API] を選択します。
API Management サービスをリンクする先の環境を見つけます。 リンクを選択します。
[バックエンド リソースの種類] で、[API Management] を選択します。
[サブスクリプション] で、リンクする Azure API Management サービスを含むサブスクリプションを選択します。
[リソース名] で、Azure API Management サービスを選択します。
リンクを選択します。
重要
リンク プロセスが完了すると、/api で始まるルートへの要求は、Azure API Management サービスにプロキシされます。 ただし、既定では API は公開されません。 使用する API を許可するように API Management 製品を構成するには、「要求を受信するように API を構成する」を参照してください。
要求を受信するように API を構成する
Azure API Management には、API の表示方法を定義する "製品" 機能があります。 リンク プロセスの一環として、API Management サービスには、Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked) という名前の製品が構成されます。
リンクされた静的 Web アプリで API を使用できるようにするには、それらの API を製品に追加します。
ポータルの API Management インスタンス内で、[製品] タブを選びます。
Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked)製品を選びます。[+ API の追加] を選択します。
Static Web Apps から公開する API を選んで、[選択] リンクを選びます。
また、リンク プロセスによって、次の構成が API Management サービスに適用されます。
- リンクされた静的 Web アプリに関連付けられている製品は、サブスクリプションを要求するように構成されます。
Generated for Static Web Apps resource with default hostname: <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME>という名前の API Management サブスクリプションが作成され、同じ名前の製品にスコープが設定されます。- リンクされた静的 Web アプリからの有効なアクセス トークンを含む要求のみを許可するために、受信 validate-jwt ポリシーが製品に追加されます。
- リンクされた静的 Web アプリは、API Management サービスに要求をプロキシするときに、サブスクリプションの主キーと有効なアクセス トークンを含めるように構成されます。
重要
validate-jwt ポリシーを変更すると、またはサブスクリプションの主キーを再生成すると、静的 Web アプリは要求を API Management サービスにプロキシできなくなります。 静的 Web アプリがリンクされている間、その静的 Web アプリに関連付けられているサブスクリプションや製品は変更または削除しないでください。
Azure API Management サービスのリンクを解除する
静的 Web アプリから Azure API Management サービスのリンクを解除するには、次の手順に従います。
Azure portal で、静的 Web アプリに移動します。
リンクを解除する環境を見つけて、API Management サービス名を選択します。
[リンク解除] を選択します。
リンク解除プロセスが完了すると、/api/ で始まるルートへの要求は、API Management サービスにはプロキシされなくなります。
Note
リンクされた静的 Web アプリに関連付けられている API Management 製品とサブスクリプションは自動的には削除されません。 これらは、API Management サービスから削除してかまいません。
トラブルシューティング
API が Static Web Apps リソース用に作成された API Management "製品" に関連付けられていない場合、静的 Web アプリの /api ルートにアクセスすると、API Management から次のエラーが返されます。
{
"statusCode": 401,
"message": "Access denied due to invalid subscription key. Make sure to provide a valid key for an active subscription."
}
このエラーを解決するには、「要求を受信するように API を構成する」セクションで詳しく説明されているように、Static Web Apps 内でそれに対して作成された製品向けに公開する API を構成します。