Azure API Management は、既存のバックエンド サービス用の最新の API ゲートウェイを作成できるサービスです。
Azure API Management サービスを静的 Web アプリにリンクすると、 /api で始まるルートを持つ静的 Web アプリへの要求は、Azure API Management サービス内の同じルートにプロキシされます。
Azure API Management サービスは、複数の静的 Web アプリに同時にリンクできます。 API Management 製品は、リンクされた静的 Web アプリごとに作成されます。 製品に追加されたすべての API は、関連付けられている静的 Web アプリで使用できます。
すべての Azure API Management 価格レベルは、Azure Static Web Apps で使用できます。
Static Web Apps の API オプションには、次の Azure サービスが含まれます。
詳細については、「API の概要」を参照してください。
注
Azure API Management との統合には、静的 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 エンドポイントを指しています。 API Management インスタンスのエンドポイントには /api プレフィックスが必要です。なぜなら、静的 Web Apps は/apiに対して行われた要求と一致し、リンクされたリソースへのパス全体をプロキシするからです。
Azure API Management サービスをリンクする
API Management インスタンスを静的 Web Apps にリンクする
静的 Web アプリの API バックエンドとして Azure API Management サービスをリンクするには、次の手順に従います。
Azure portal で、静的 Web アプリに移動します。
ナビゲーション メニューから [API] を選択します。
API Management サービスをリンクする環境を見つけます。 リンクを選択します。
[ バックエンド リソースの種類] で、[ API Management] を選択します。
[ サブスクリプション] で、リンクする Azure API Management サービスを含むサブスクリプションを選択します。
[ リソース名] で、Azure API Management サービスを選択します。
リンクを選択します。
Important
リンク プロセスが完了すると、 /api で始まるルートへの要求が Azure API Management サービスにプロキシされます。 ただし、既定では API は公開されません。 API Management 製品を構成して使用したい API を許可するには、API がリクエストを受け付けるように構成するを参照してください。
要求を受信するように API を構成する
Azure API Management には、API の表示方法を定義する 製品 機能があります。 リンク プロセスの一環として、API Management サービスは Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked) という名前の製品で構成されます。
リンクされた静的 Web アプリで API を使用できるようにするには、 それらを製品に追加します。
ポータルの API Management インスタンス内で、[ 製品 ] タブを選択します。
Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked)製品を選択します。[ + API の追加] を選択します。
静的 Web アプリから公開したい API を選び、選択リンクをクリックします。
![Azure portal の [API Management Products API] ブレードのスクリーンショット。静的 Web Apps リソース用に作成された製品に API を追加する方法が示されています。](media/add-api/apim-add-api.png)
リンク プロセスでは、API Management サービスに次の構成も自動的に適用されます。
- リンクされた静的 Web アプリに関連付けられている製品は、サブスクリプションを要求するように構成されています。
-
Generated for Static Web Apps resource with default hostname: <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME>という名前の API Management サブスクリプションが作成され、同じ名前の製品にスコープが設定されます。 - 受信 validate-jwt ポリシーが製品に追加され、リンクされた静的 Web アプリからの有効なアクセス トークンを含む要求のみが許可されます。
- リンクされた静的 Web アプリは、API Management サービスに要求をプロキシするときに、サブスクリプションの主キーと有効なアクセス トークンを含むように構成されます。
Important
validate-jwt ポリシーを変更するか、サブスクリプションの主キーを再生成すると、静的 Web アプリが API Management サービスに要求をプロキシできなくなります。 リンクされている間は、静的 Web アプリに関連付けられているサブスクリプションまたは製品を変更または削除しないでください。
Azure API Management サービスのリンクを解除する
静的 Web アプリから Azure API Management サービスのリンクを解除するには、次の手順に従います。
Azure portal で、静的 Web アプリに移動します。
リンクを解除する環境を見つけて、API Management サービス名を選択します。
[リンク解除] を選択します。
リンク解除プロセスが完了すると、 /api/ 以降のルートへの要求は API Management サービスにプロキシされなくなります。
注
リンクされた静的 Web アプリに関連付けられている API Management 製品とサブスクリプションは、自動的には削除されません。 API Management サービスから削除できます。
トラブルシューティング
静的 Web Apps リソース用に作成された API Management 製品 に API が関連付けられていない場合、静的 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 を構成する」セクションで詳しく説明されているように、静的 Web アプリ内で公開する API を、それに対して作成された製品に構成します。