Azure Static Web Apps(Free)を生やしまくったら怒られた件

## 先に結論
- Azure Static Web Apps（以下SWA）のFreeプランは、同一リージョンに10個までしか作成ができない
- この作成上限は、SWAおよび付帯のAzure Functionsの実行環境であるApp Serviceプランの制約に依るものだと推測される
  ※この推測は仮説に過ぎませんので、もし「いやそういうことじゃないと思う」「ここみたほうがいい」などありましたらコメント等いただけると大変うれしいです……


参照：[Azure サブスクリプションとサービスの制限、クォータ、制約 - Azure Resource Manager | Microsoft Learn](https://learn.microsoft.com/ja-jp/azure/azure-resource-manager/management/azure-subscription-service-limits#azure-app-service-limits)

## 本文
### ことのいきさつ
わたしは週5の8時間いつもReactとTypeScriptと付かず離れずきゃっきゃうふふしているフロントエンジニア（よわよわ）。
業務ではもっぱらAzure上にサービスを構築し提供している。

そんなわたしが一番よく使うAzureのサービスといえば**Azure Static Web Apps**（以下SWA）。


Azure Portalをぽちぽちするだけで超爆速でフロントアプリをデプロイできてしまう！
ちょっとしたAPIなら内包**Azure Functions**を使って同時に作れてしまう！
だいたいうまいことカスタマイズしてくれてるのでネットワークとかインフラ設計とか難しいこと考えなくていい！

しかも**Freeプランなら無料！**（Free言うてるもんね。そりゃあね。）

クラウドなにそれおいしいの？？？　からキャリアをスタートさせた未経験エンジニアでも気軽に触れる大変お手軽な神サービスである。

https://learn.microsoft.com/ja-jp/azure/static-web-apps/overview

https://learn.microsoft.com/ja-jp/training/paths/azure-static-web-apps/

もうぽちぽち操作にも慣れたぜ！
その日はいつものように、案件のお試し環境作成のためにAzure Portalにアクセスし、新しいSWAを作ろうとしていた……。


![swa作成エラー1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659383/b48af738-b6d7-4727-968d-bf702ef5bff0.png)

いつものように入力を終え、「作成」ボタンを押下する。
が…………。

![swa作成エラー2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659383/1f8ed0be-0689-4928-abfb-b54fce19f7ac.png)

ん？？？
なんか上の方に赤い帯出てるぞ？？？

![swa作成エラー4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659383/ad357b1d-d1e5-497e-acc3-26760bf603d8.png)

**「デプロイに失敗しました」**
んーーーーー？？？？？

「詳細については、ここをクリックしてください」とあるので押してみる。

![swa作成エラー5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659383/e2d55966-bbfb-4de5-8f49-8f00bc4c00f9.png)


> Sku is invalid. This subscription has too many static sites with SKU: Free.

ふーーーーーん？？？？？
なんだかどうやら、わたしはFreeプランのSWAを作りすぎたらしい。


試しに「すべてのリソース」からSWA一覧を確認してみる。

![swa作成エラー6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659383/7279fbfb-f1af-491d-8b97-f01210fc3ba8.png)

**East Asia多いな。**（ここ日本だしな）
East Asiaにすでに立てられているSWAは全部で13個。うちFreeプランは**10個**だった。

10個以上のSWA（Free）は作成できないのか……？


### SWA（Free）の作成上限数っていくつ？

色々調べてみたところ、こんな記事を発見。
Azureのサービスごとに、プラン別の作成最大個数やメモリ数などを比較説明してくれている。

https://learn.microsoft.com/ja-jp/azure/azure-resource-manager/management/azure-subscription-service-limits#azure-app-service-limits

SWAは Azure App Service関連サービスに分類されるはず。
なので、「Azure App Serviceの制限」セクションを見てみる……。

>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659383/a78667d0-f004-463d-ab99-92643f7f199a.png)

関係しそうな部分だけ下の表に抜粋する。

##### App Serviceの制限（作成個数関連）
|リソース	|Free |Standard |
|---|---|---|
|Azure App Service プランあたりの Web、モバイル、または API アプリ数  |10  |無制限  |
|App Service プラン  |リージョンあたり 10 件  |リソース グループあたり 100  |

なかなかわかりづらい。
先ほどの事象的には「10」も「リージョンあたり 10 件」もあり得る。

がしかし、そもそもSWAってどこに分類されるの？？？ App Serviceプラン配下に作った記憶はないんだが……？？
ということで改めてApp Serviceプランと配下のサービス、そしてSWA自体について調べることにした…………。

### App Serviceプランについて調べてみる

基本的に、Azure Web Appsは必ず一つのApp Serviceプランに属する。
このApp Serviceプランはユーザーが任意のものを作成できるし、Freeプラン/Standardプラン……などの種別を選ぶこともできる。

>**アプリ サービスは、常に "App Service プラン" で実行されます。** 
（引用元： https://learn.microsoft.com/ja-jp/azure/app-service/overview-hosting-plans ）

実際、こんな感じでAzure Portalから任意のWeb Appを選択すると、概要欄に所属する「App Serviceプラン」の情報が表示されている。
![WebAppOverviewAtAzurePortal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659383/75f69236-f4a4-4ed7-9b3f-40455ae45b56.png)

![WebAppOverviewAtAzurePortal2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659383/c255f31d-aee1-4309-8651-ebf714999e21.png)

またWeb Appを新規作成する際には、「価格プラン」の段で所属するApp Serviceプランを選択 OR 新規作成する。

![create-web-app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659383/7e28ab34-cedc-4633-8f0e-d587cb71e563.png)


通常のWeb Appの場合はこうであるのだが……。
いわばWeb Appの亜種とも言える「Static Web Apps（SWA）」の場合、作成ユーザー側で任意のApp Serviceプランを指定することはない。
新規作成時に指定することもないし、作成後のリソースを見に行ってもApp Serviceの表示はない。
（ほらね。↓）
![StaticWebAppOverviewAtAzurePortal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659383/415debd4-7db6-4c84-9de4-0d56f45bbb71.png)


### SWA付帯Azure Functionsは、App Serviceプランで実行されるAzure Functionsだった！？

うーむと思いながら、先ほど引用したMS公式Docsを再度読み、App Serviceプランについて確認する。

するとどうやら、関数アプリである「Azure Functions」も、App Serviceプラン内で実行され得るらしいことを発見。

>**アプリ サービスは、常に "App Service プラン" で実行されます。** また、**Azure Functions には、App Service プランで実行するオプションもあります。**
（引用元： https://learn.microsoft.com/ja-jp/azure/app-service/overview-hosting-plans ）

>App Service プランでは、アプリを実行するための、専用のコンピューティング リソースのセットを定義します。 これらの専用のコンピューティング リソースは、従来のホスティングでの サーバー ファーム に似ています。 **1 つ以上の関数アプリを、他の App Service アプリ (Web アプリなど) と同じコンピューティング リソース (App Service プラン) 上で実行されるように構成できます。**
（引用元： https://learn.microsoft.com/ja-jp/azure/azure-functions/dedicated-plan ）


わたし「そういえば、SWAにもAzure Functionsがデフォルトで内包されているなあ……🤔」
わたし「これってもしかして、**SWA付帯Azure Functionsも、App Serviceプラン内で実行されているということでは？**」

そしてふと思い出した。
**SWA作成時にリージョンを選択するが、あれはSWAの配置リージョンではなく、Azure Functionsのリージョンだったと。**

### SWAとリージョンのややこしい関係

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659383/ae4b7a63-aec3-4fdb-a777-a63c05c40e6f.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659383/b160aa70-4125-4698-b78a-26e0cef34961.png)

この通り、SWA自体はリージョンは「**グローバル**」。
SWA新規作成時にリージョン設定を実施するが、ここで指定するのは**デフォで内包しているマネージドAzure Functionsのデプロイリージョン**なのである。

Azure PortalでSWAを確認した際に表示されるリージョン情報も同様、内包Azure Functionsのデプロイリージョンということになる。

>#### アプリが特定の Azure リージョンに確実にデプロイされるようにするにはどうすればよいですか?
>Azure Static Web Apps はグローバル サービスです。 **アプリの静的アセットはグローバルに分散されます**。 **アプリを作成するときに、マネージド Azure Functions アプリがデプロイされているリージョンを選択します**。 マネージド関数をサポートしていないリージョンで Functions アプリが必要な場合は、個別にデプロイする Functions アプリで独自の Functions アプリの持ち込み機能を使用できます。
（引用元：https://learn.microsoft.com/ja-jp/azure/static-web-apps/faq#--------azure----------------------------------- ）

>Static Web Apps では、**静的アセットは従来の Web サーバーから分離され、世界各地の地理的に分散したポイントから提供**されます。
（引用元： https://learn.microsoft.com/ja-jp/azure/static-web-apps/overview ）

### Q.E.D.
これらを元に整理してみる。

① SWA内包のAzure Functionsは、App Serviceプラン内で実行されていると考えられる。

② SWAが提供する「アプリの静的アセット」自体はグローバルに分散されるため所属リージョンはない。が、SWAが内包するAzure Functionsは、いずれかのリージョンにデプロイされている（SWA作成時にユーザーが指定している）。

③ SWAを1つ作成すると、内包Azure Functionsを実行するための環境（App Servicepプラン）が1つ作成されていると考えられる。このApp Serviceは、ユーザーからは見えない（たぶん）。

④ SWAをFreeプランで作成した場合、App ServiceプランもFreeになるはず。

⑤ App Service プラン（Free）は、リージョンあたり 10 件まで作成可能。

##### 再掲：App Serviceの制限（作成個数関連）
|リソース	|Free |Standard |
|---|---|---|
|Azure App Service プランあたりの Web、モバイル、または API アプリ数  |10  |無制限  |
|App Service プラン  |リージョンあたり 10 件  |リソース グループあたり 100  |


ということは、**SWA（Free）の作成上限数は「リージョンあたり 10 件まで」になる！！！**

### それならリージョン変えてみよう
ためしにSWA（Free）のFunctions配備リージョンを**East Asia**から**West US2**に変更し、再度デプロイしてみる。

![swa作成完了1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659383/418d13d4-8e4e-4cc7-ae01-6f485dacc299.png)

すると…………。

![swa作成完了2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659383/56c88764-1ac1-43ea-9e72-4cf0a7b4a3d8.png)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659383/7cf510a8-2837-4970-979a-2b2a37d0fb58.png" width=15%>

無事デプロイ完了！！！！！

## 終わりに
ということで、SWAのFreeプランは、同一リージョンに10個までしか作成ができないとわかった。
リージョンを変えればデプロイできるが、レイテンシーなどを考慮すると……技術検証や開発環境用など、性能を考慮しない場合にのみFreeプランを用い、かつ定期的に不要リソースの削除などを行うのが良いのだろう。
長期継続が見込まれる案件の場合は、テスト環境だろうがなんだろうが大人しくStandardプランで作成するにこしたことはないかもしれない。

SWAは非常に便利なサービスだが、実は裏側ではApp Serviceプランを用いているらしかったり、Functionsによる制約（デプロイリージョンなど）が生じていたりする……と今回の調査を知って学べた。
簡単なようで奥が深いSWA。他にも構成関連やカスタムドメインなど色々調べがいがありそうな点があるので、どこかしらでまた記事にまとめてみたい。