Azure Static Web Appsのまとめ

Azure Static Web Appsとは？

Netlifyや、Firebase HostingのAzure版
端折って、Nuxt.jsサイトに最適なホスティングサービス
静的サイトやSPAサイトのホスティング　＋　APIサービス（←これがすごい！）
無料でスタートできる→スタートアップに最適

Nuxt.JSについて

Vueフロントエンドフレームワークによるサイト構築フレームワーク
同じソースを使って、3タイプ（SPA/SSG/SSR）のサイトを作成できる
Azure Static Web Appsは、このうち、SPAとSSGサイトをホストできる

従来型WebアプリとSPAアプリ

従来型Webアプリ

主にサーバーサイドでレンダリングする
サーバーはhtmlサーバーとjsonサーバー
クライアント側レンダリングが混在していて役割分担があいまいで複雑

Nuxt.jsで作成するSPAアプリ

レンダリングはブラウザサイドのみ
サーバーはjsonサーバーのみ
クライアントとサーバーの役割分担がより明確に分かれていて潔い
ヘッドレスCMSなど外部サービスとの親和性が高い
（下記図のServer-Side.jsはSSRの場合のみ）

Azure Static Web Appsは、このjsonサーバーも一緒にホストできる
ヘッドレスCMSを自作して自前でJAMStackできる
Nuxt.jsで作成するSPAをこのホスティングひとつで賄える

SSGサイトの利用例

wordpressなどCMSを使って構築していた会社ホームページや、個人ブログなど
会社ホームページ作成にあたり、セキュリティー的要件でwordpressがNGになる場合がある
wordpressサイトをわざわざ静的化するツールもある、と同様に
コンテンツ編集後にサーバーサイドでレンダリングを実行して全てのページを事前に静的化ファイルにする

SPAサイトの利用例

ユーザー入力を伴う（SlackやLINEのような）アプリ型サイト
スタートアップで何かしようとする場合

コスト

Freeプランでスタートできる
個人、ホビー用途ならずっとFreeでいける
アクセスが成長してマネタイズ可能になって初めて有償プランに移行すれば良い
商用サイトで1008円/月～

Netlifyとの比較

SSGサイトであれば、むしろNetlifyの方がデプロイが簡単かも
SPAサイトであれば、StorageやDBも必要になる
Azureはひとつのアカウントで、サイト、API、DB、ストレージの全てのサービスがそろう
また、API開発自体もAzureの方が少し簡単そう