Azure Static Web Apps と Azureストレージの静的Webサイトホスティングを比べる

いわさです。

AzureではApp Serviceを使ってWebサイトをホストすることが出来ます。

しかし、静的コンテンツ限っていえば他にもホストオプションが用意されています。

• Azure Static Web Apps – App Service | Microsoft Azure
• Azure Storage での静的 Web サイト ホスティング | Microsoft Docs

Blobストレージでのホスティングが先に登場し、Static Web Appsは最近（2021年5月）にGAとなったサービスです。
現在静的コンテンツのホストには上記２つの方法が用意されていますがどういう違いがあるのか少し調べました。

触ってみる

まずは、両サービスでホスティング設定を行い、操作性や流れを把握してみたいと思います。

Azure Static Web Apps

通常のWeb Appsと同様にサービスを作成します。
ホスティングプランがFreeとStandardの2つあります。
Freeプランの場合はSLAが無くて、Standardの場合は99.95%になってます。
カスタム認証が利用出来るのもStandardのみです。

デプロイ方法は現時点でgit連携のみで、GitHubとAzure DevOpsが対応しているようです。
FTPなどで手動でデプロイすることは出来ないみたいですね。

予めリポジトリを用意しておきましょう。

GitHub認証すると自動でGitHub Actionsが設定されてデプロイが始まります。

すぐデプロイされました。

Azureストレージでの静的Webサイトホスティング

ストレージで静的Webサイト設定を有効化し、コンテンツを格納するだけです。

こちらもすぐ使えるようになります。

Static Web Appsの優位点

静的サイトのホスティングという観点で見ると、Static Web Appsのほうが優位性がありそうですね。

Git連携

Static Web AppsはネイティブにGit連携機能が備わっています。

ストレージのホスティングオプションの場合は、逆にGit連携がネイティブの機能として用意されているわけではないので、Git連携したい場合は自分でパイプラインを組んでやる必要がありそうですね。
ストレージにデプロイするだけなので、自前でパイプラインやワークフローを用意出来るのであれば実現自体は出来そうです。

逆に、Static Web AppsはGit連携を強制されます。ファイルアップロードで即時反映、みたいな使い方は想定されていません。

カスタムドメイン & SSL証明書

Static Web AppsはカスタムドメインとSSL証明書の機能が備わっています。
ストレージのホスティングオプションの場合はAzure CDNを統合させて、そちらでカスタムドメインやSSL証明書の構成が必要です。

ステージング機能

個人的にはこれが一番凄いなと思いました。
GitHub連携しているとして、プルリクエストが作成されると、その状態でステージング環境が自動で作成されます。

そして実行環境での確認やレビューを行って、プルリクエストがマージされるとプロダクト環境に反映されます。

すごい。
Webサイトってコードの確認だけじゃなくて、ビジュアル上のレビューも必要だと思っているので、この機能とても良くないですか。

ストレージのホスティングオプションにはステージング機能はありません。

CDN

Static Web Appsはドキュメント上は以下の記述があります。

Globally distributed static content, putting content closer to your users.

分散についてはTraffic Managerを使っていそうですが、CDNの有無についてはわかりませんでした。
ドキュメント上も言及されていなさそうです。

ストレージのホスティングの場合はAzure CDNとの統合を行う機能があります。
ありますというか、統合を前提にした使い方になると思います。

まとめ

全ての静的Webサイト、これでホストすれば良いのではってくらいStatic Web Appsは静的Webサイトに特化していますね。
Standardだとしても料金が安いのも良いなと思いました。