Azure App Service による Azure Static Web Apps での API のサポート
Azure App Service は、サーバーでコードを実行する Web アプリケーションをホストするためのマネージド プラットフォームです。 Azure App Service では、Node.js、ASP.NET Core、PHP、Java、Python など、多くのランタイムとフレームワークがサポートされています。
Azure App Service Web アプリを静的 Web アプリにリンクすると、/api で始まるルートを持つ静的 Web アプリへの要求は、Azure App Service アプリの同じルートにプロキシされます。
既定では、App Service アプリが静的 Web アプリにリンクされている場合、App Service アプリは、リンクされた静的 Web アプリを介してプロキシされる要求のみを受け入れます。 Azure App Service アプリは、一度に 1 つの静的 Web アプリにのみリンクできます。
Azure Static Web Apps を使用するために、すべての Azure App Service ホスティング プランを利用できます。
Static Web Apps の API オプションには、次の Azure サービスが含まれます。
詳細については、「API の概要」を参照してください。
Note
Azure App Service との統合には、Static Web Apps Standard プランが必要です。
バックエンド統合は、Static Web Apps の pull request 環境ではサポートされていません。
前提条件
App Service を Static Web Apps にリンクするには、既存の App Service リソースと Static Web Apps が必要です。
| リソース | 説明 |
|---|---|
| Azure App Service | まだない場合は、「Azure での Web アプリの作成」ガイドの手順に従います。 |
| 既存の静的 Web アプリ | まだない場合は、ファースト ステップ ガイドの手順に従って、"フレームワークなし" の静的 Web アプリを作成します。 |
例
次の場所を経由してエンドポイントを公開する既存の Azure App Service インスタンスについて検討します。
https://my-web-app.azurewebsites.net/api/getProducts
リンクされると、この URL の例に示すように、静的 Web アプリから api パスを介してその同じエンドポイントにアクセスできます。
https://red-sea-123.azurestaticapps.net/api/getProducts
どちらの URL も同じ API エンドポイントを指しています。 Static Web Apps は /api に対して行われた要求を照合し、リンクされたリソースへのパス全体をプロキシするため、App Service のエンドポイントには /api プレフィックスが必要です。
Azure App Service Web アプリをリンクする
静的 Web アプリの API バックエンドとして Web アプリをリンクするには、次の手順に従います。
Azure portal で、静的 Web アプリに移動します。
ナビゲーション メニューから [API] を選択します。
API Management インスタンスをリンクする先の環境を見つけます。 リンクを選択します。
[バックエンド リソースの種類] で、[Web アプリ] を選択します。
[サブスクリプション] で、リンクする Azure App Service アプリを含むサブスクリプションを選択します。
[リソース名] で、Azure App Service アプリを選択します。
リンクを選択します。
リンク プロセスが完了すると、/api で始まるルートへの要求は、リンクされた App Service アプリにプロキシされます。
Azure App Service へのアクセスを管理する
App Service アプリには、静的 Web アプリを介してプロキシされるトラフィックのみを許可する Azure Static Web Apps (Linked) という名前の ID プロバイダーが構成されます。 他のアプリケーションが App Service アプリにアクセスできるようにするには、その認証構成を更新して別の ID プロバイダーを追加するか、セキュリティ設定を変更して未認証のアクセスを許可します。
Azure App Service アプリのリンクを解除する
Static Web Apps から App Service のリンクを解除する
静的 Web アプリから Web アプリのリンクを解除するには、次の手順に従います。
Azure portal で、静的 Web アプリに移動します。
ナビゲーション メニューから [API] を選択します。
リンクを解除する環境を見つけて、Web アプリ名を選択します。
[リンク解除] を選択します。
リンク解除プロセスが完了すると、/api で始まるルートへの要求は、App Service アプリにはプロキシされなくなります。
Note
App Service アプリが匿名トラフィックに誤って公開されないようにするために、リンク プロセスによって作成された ID プロバイダーは自動的には削除されません。 App Service アプリの認証設定から "Azure Static Web Apps (リンク済み)" という名前の ID プロバイダーは削除してかまいません。
App Service リソースから認証を削除する
App Service リソースで匿名トラフィックを受信できるようにするには、以下の手順に従って ID プロバイダーを削除します。
Azure portal で、App Service リソースに移動します。
ナビゲーション メニューから [認証] を選びます。
[ID プロバイダー] の一覧から、Static Web Apps リソースに関連する ID プロバイダーを削除します。
[認証の削除] を選択して認証を削除し、App Service リソースへの匿名トラフィックを許可します。
App Service リソースが匿名トラフィックを受信できるようになりました。