独自の関数を Azure Static Web Apps で使用する

[アーティクル]
11/08/2023

Azure Static Web Apps には、データとサービスのバックエンド API に依存するフロントエンド Web アプリケーションを構築するための API 統合が用意されています。 API 統合オプションとして、マネージド関数と独自のバックエンドの使用の 2 つがあります。これらのオプションの違いの詳細については、概要を参照してください。

この記事では、既存の Azure Functions アプリを Azure Static Web Apps リソースにリンクする方法について説明します。

Note

Azure Functions との統合には、Static Web Apps Standard プランが必要です。

バックエンド統合は、Static Web Apps の pull request 環境ではサポートされていません。

前提条件

関数アプリを静的 Web アプリにリンクするには、既存の Azure Functions リソースと静的 Web アプリが必要です。

リソース	説明
Azure Functions	まだ用意していない場合は、「Azure Functions の概要」ガイドの手順に従ってください。
既存の静的 Web アプリ	まだない場合は、ファーストステップガイドの手順に従って、"フレームワークなし" の静的 Web アプリを作成します。

例

次の場所を経由してエンドポイントを公開する既存の Azure Functions アプリについて検討します。

https://my-functions-app.azurewebsites.net/api/getProducts

リンクされると、この URL の例に示すように、静的 Web アプリから api パスを介してその同じエンドポイントにアクセスできます。

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

どちらのエンドポイント URL も同じ関数を指します。 Static Web Apps は /api に対して行われた要求を照合し、リンクされたリソースへのパス全体をプロキシするため、関数アプリのエンドポイントには /api プレフィックスが必要です。

既存の Azure Functions アプリをリンクする

Static Web Apps リソースからマネージド関数を削除する (存在する場合)

マネージド関数がある場合は、既存の関数アプリを関連付ける前に、まず、マネージド関数を削除するために静的 Web アプリの構成を調整する必要があります。

ワークフロー構成ファイルで、api_location の値を空の文字列 ("") に設定します。

Azure Functions アプリを Static Web Apps リソースにリンクする

Azure portal で Static Web Apps インスタンスを開きます。
[設定] メニューから [ API] を選択します。

[運用 ] 行で [ リンク ] を選択して、[ 新しいバックエンドのリンク ] ウィンドウをオープンします。

次の設定を入力します。

設定	値
バックエンドリソースの種類	関数アプリの選択。
サブスクリプション	Azure サブスクリプション名を選択してください。
リソース名	Azure Functionsアプリ名を選択します。
バックエンドスロット	Azure 関数のスロット名を選択します。

リンクを選択します。

Azure Functions アプリが静的 Web アプリの/apiルートにマップされるようになりました。

重要

既存の Functions アプリケーションをリンクする前に、ワークフロー構成ファイルで api_location の値を空の文字列 ("") に必ず設定してください。また、呼び出しでは、外部関数アプリで既定のルートプレフィックス api が保持されることが前提となっています。多くのアプリでは、host.json 内でこのプレフィックスが削除されます。プレフィックスが構成内にあることを確認してください。そうでない場合、呼び出しが失敗します。

展開

Azure Functions アプリのデプロイワークフローの設定は、ご自身の責任で行う必要があります。

Azure Functions アプリのリンクを解除する

静的 Web アプリから関数アプリのリンクを解除する

静的 Web アプリから関数アプリのリンクを解除するには、次の手順に従います。

Azure portal で、静的 Web アプリに移動します。
ナビゲーションメニューから [API] を選択します。
リンクを解除する環境を見つけて、関数アプリ名を選択します。
[リンク解除] を選択します。

リンク解除プロセスが完了すると、/api で始まるルートへの要求は、Azure Functions アプリにはプロキシされなくなります。

Note

関数アプリが匿名トラフィックに誤って公開されないようにするために、リンクプロセスによって作成された ID プロバイダーは自動的には削除されません。関数アプリの認証設定から "Azure Static Web Apps (リンク済み)" という名前の ID プロバイダーは削除してかまいません。

Azure Functions リソースから認証を削除する

Azure Functions アプリで匿名トラフィックを受信できるようにするには、以下の手順に従って ID プロバイダーを削除します。

Azure portal で、Azure Functions リソースに移動します。
ナビゲーションメニューから [認証] を選びます。
[ID プロバイダー] の一覧から、Static Web Apps リソースに関連する ID プロバイダーを削除します。
[認証の削除] を選択して認証を削除し、Azure Functions リソースへの匿名トラフィックを許可します。

関数アプリが匿名トラフィックを受信できるようになりました。

セキュリティの制約

認証と認可: 既存の Functions アプリで認証と認可のポリシーがまだ設定されていない場合、静的 Web アプリは API への排他的アクセス権限を持ちます。 Functions アプリを他のアプリケーションからアクセス可能にするには、別の ID プロバイダーを追加するか、認証されていないアクセスを許可するようセキュリティ設定を変更します。

Note

リンクされた Functions アプリで認証と認可を有効にする場合は、Azure App Service 認証および認可プロバイダーバージョン 2 を使用する必要があります。
必要なパブリックアクセシビリティ: 既存の Functions アプリでは、次のセキュリティ構成を適用しないようにする必要があります。
- Functions アプリの IP アドレスの制限。
- プライベートリンクまたはサービスエンドポイントを介したトラフィックの制限。
関数アクセスキー: 関数にアクセスキーが必要な場合は、静的アプリから API への呼び出しをキーに指定する必要があります。

制限

1 つの静的 Web アプリで使用できる Azure Functions アプリは 1 つのみです。
api_locationワークフロー構成の値は、空の文字列に設定する必要があります。
Static Web Apps pull request 環境ではサポートされていません。
Azure Functions アプリはさまざまなトリガーに応答できますが、静的 Web アプリは HTTP エンドポイント経由でのみ関数にアクセスできます。

次のステップ

API を追加する

次の方法で共有