Azure Static Web AppのUIレンダリングリソースはどこからくるの？という話及びその問題

Posted at 2024-09-22

これは

首題の通りAzure Static Web App(以下SWA)のUIレンダリングに必要なコンピューティングリソースと課金を巡る地を這い泥水をすするようなインフラエンジニア兼アーキテクトの戦いの記録。

これを読む人はSSRやユニバーサルレンダリング等の動的なページ作成について何かを知っていないと何書いてるのかわからないかも。

AzureでもAWS(Amplify, ECS, なんだったらEC2)でもいいので実際にこれらをデプロイして運用してみたことがあるのであれば理解ははやいとおもいます。

機能としてはフロントとよばれるUIの開発や運用が楽になるための便利なサービス、のはず。
AWSでいうところのAmplifyのようなもの。

具体的には下記のような機能だと思います。

いたれりつくせりですね、お高いんでしょう？

いいえ、サーバレスでも安い部類ですよ！

言語的なフレームワークはnext.jsやnuxtjs(3)とかvueとかreactとかいろいろあるけれど、これらが目指すところはたぶん全部一緒の理想郷で作ってるひとたちとアプローチの仕方が少し違うだけ・・のようにみえる。

さて、これらをデプロイするときに、動的なレンダリングを選択するかどうかがある。

SSR, ゆにれん等の動的なレンダリングを選択しない場合はここから先の問題はおこらない。

動的なレンダリングをSWA上で選択したとき、めんどくさいことがはじまりました。

SWAが提供する３つのコンピュートリソースについて下記。

静的にビルドされたUIを配る
- どこかのストレージにビルドされた静的なファイルを置いてからそれをHTTP(s)プロトコルで配るという機能。リクエストの数や送信容量的な従量課金スタイル。
- これだけをやる常時動いてる何かがクラウド上にあり、そこにのっかっていると思いましょう
- オンプレでいうところのApacheでもNginx
- AWSでいうところのCloudFormation+S3
UIを動的にレンダリングする
- なにかしらレンダリングするためのプログラムを起動、あるいは限定された生成コードをパートタイム的に実行して対応するもの
- AWSでは後ろでLambdaかFargateで動いていると思う、どういう形で動いているかはよくしらない
先述のフレームワークで実装されたAPIをホスティングする
- AWSではたぶんFargateで、常時起動しているかどうかはしらない

さて..SWAでコンピュートリソースの管理をAzureに預けた場合問題がおこるとしたら２および３。
サービスプラン(SKU)は Free および Standard。

コールドスタートが発生する。
これは観察したところレンダリングサーバが起動する時間と近似
うちだと１０秒以上かかりますし、アクセスがあるかないかは関係がない。

１０秒待たされるようなサイト、また行きたいと思いますか？

こちらもコールドスタートがひんぱんに発生する。

サービスプランに Dedicated というものがあり、Standardよりも固定費用が１万円近く跳ね上がるけど、常時起動のUIレンダリンとAPIのためのリソースを提供してくれる。

だがしかし それはプレビュー機能であり、１サブスクリプションに１個しか作成できなという結構どでかい制約がある。

複数このプランのフロントがほしいと思ったら詰む。
１サブスクにつきこれ１個でいいと言い切れるアーキテクチャであるのなら、最適解だろう。

APIは最初からそれ用のバックエンドを用意してくれと言われて用意していたので、Functon Appにレンダリング部分をぶちこんだ、常時起動のためプレミアムプラン以上が必要だけど。

具体的には nuxt3でnitroサーバをSWAかFunction Appに手軽にぶちこむ方法があるのでそうしたという話。
FunctionでかんたんにやれないならWeb Appsになるんじゃないかな・・

ただし・・・

インフラをCDKTF(Azurerm Provider)で作成しているけど SWAの Dedicated プラン、作れないじゃん？
また、SWAのレンダリング部分にApp Settingsの環境変数あたらないじゃん？

その他細かい地雷いくつかの地雷があり

正直SWAやめたいと思っていたのがスリーカウントを超えたので、一気にFunction Appやってしまった次第。

というのも、フロントエンドやAPIバックエンドよりもコンシューマ側にCDNとしてFrontdoor置いてるんだよねー
オリジンとか仕事すればなんでもいいというコンセプトが切り替えの、特に決断を容易にしたと思います。

（ラップ調）こんな濃い経験させてくれる御社に感謝

Azureエンジニアとしてなんか立って歩けるようになりつつあります（誰かいい開発経験させてくれるとこ雇ってくだしぁ・・）