はじめに

夏休みの宿題として、即席 POST を。

Static Web Apps を使って Web サイトを構築する時、VNET 内で保護されたストレージやデータベースの中のデータを使ったり、そのデータを更新したりしたい、かもしれない。

でも Static Web Apps には VNET につなぐ機能 (App Service でいうところの VNET 統合) がない。
# 静的サイトのホスティングなんだから、当然な気もする。

そうだ！

Static Web Apps は、バックエンド API として Function App が使えるじゃないか！
Function App の VNET 統合を使って、VNET 内につなごう！！

構成

つまりはこう。

f:id:horihiro:20210727105346p:plain

構成のポイント。

Static Web Apps の後ろに Function App
ストレージアカウントやデータベースは、プライベートリンクを使って VNET 外からのアクセスを全力で拒否
Function App は VNET 統合で、2. のプライベートリンクと同じ VNET に接続

やってみる

Azure Functions を VNET 統合する

docs.microsoft.com

全く難しいことはなく、ポータルからポチポチしたら設定完了。

最近プレビューで出てきた [ネットワーク (プレビュー)] ブレードも見やすくていい感じ。

f:id:horihiro:20210727203435p:plain

注意点は以下の通り

VNET 統合が使える Function App のプランは、Elastic Premium プラン、または、Standard 以上の App Serviceプラン
統合先の VNET と Function App のリージョンは同じ
VNET には、Function App からの VNET 統合専用、つまり空っぽののサブネットが必須

一番の注意点は一つ目、 Elastic Premium プラン、または、Standard 以上の App Serviceプラン 。
Static Web Apps 付属の Function App は、Linux の従量課金プランなので、そのままでは VNET 統合が使えない。

なので、Static Web Apps の Bring Your Own Functions を使って、VNET 統合が使える Function App をリンクしてみる。

Static Web Apps で自前の Function App を使う (Bring Your Own Functions)

ドキュメントはこちら。

docs.microsoft.com

何故かこれだけ英語。

でも VNET 統合よりも設定は簡単で、ポータルから [関数] ブレードからポチポチしてリンク対象の Function App を選ぶだけ。

f:id:horihiro:20210727204236p:plain

結果

目論見通り、Function App からのアクセスは VNET 内のリソースにつながるので、関数のトリガーは HTTP にしてバックエンド API として作り、VNET 内にあるストレージアカウントやデータベースから入力バインドで取ってきたデータを HTTP のレスポンスにする、なんてことも簡単にできた。

バインディング、最高。