2020 年 5 月からプレビューされていた Microsoft の Azure Static Web Apps サービスが、ローカル開発と GitHub 経由の自動デプロイメントをサポートする Visual Studio Code の拡張機能とともに一般提供されました。
静的ウェブサイトの根底にある考え方は、PHP、Python、Java、ASP.NET、Node.jsなどの技術を用いてサーバー上で動的にコンテンツを生成するよりも、固定コンテンツを提供する方が本質的に高速でシンプル、そして安全であるということです。その利点の一つは、静的ページはコンテンツ配信ネットワーク（CDN）によって簡単にキャッシュできることです。Microsoftは、この新しいサービスは「本番環境アプリ向けにコンテンツをグローバルに配信する」と述べていますが、詳細は不明です。
このモデルのアプリケーションは、JAMstack (JavaScript、API、マークアップ) と呼ばれることもあり、Web ブラウザーで実行されている JavaScript から呼び出されるサービスを介して動的コンテンツを取得するため、サーバー側のコードを削除するのではなく、API に移行します。
静的コンテンツとは異なり、これらはCDNの恩恵を自動的に受けるわけではありませんが、このアプローチは、同じAPIをウェブサイトだけでなくモバイルアプリケーションやデスクトップアプリケーションでも利用できることを意味し、マイクロサービス化のトレンドにも合致しています。Microsoftは、開発者に対し、このサーバーサイドコードのためにAzure Functionsの利用を推奨しています。
マイクロソフトの主席プロジェクトマネージャーであるダリア・グリゴリウ氏は、このサービスは「マイクロサービスのベストプラクティス」に適合し、企業が「世界規模で最小限の労力で」ウェブプレゼンスを獲得できるように設計されていると述べた。
VS Code で GitHub リポジトリにリンクされた Azure 静的 Web サイトを編集する
開発者はAzure Static Web Appsでホストされているサイトから任意のAPIを呼び出すことができますが、Microsoftのフレームワークを使用して安全な接続を可能にする組み込みフレームワークが用意されています。これにより、サービス向けのサイトを簡単に構築できます。ただし、これを行うには、APIがNode.js 12、.NET Core 3.1、またはPython 3.8のいずれかで、Azure Functionsで実行されている必要があります。また、Functionsの設定方法にはいくつかの制限があり、こちらで説明されています。
組み込みのセキュリティはロールベースで、すべてのユーザーにはデフォルトで匿名ロールが付与されます。ログイン時には認証済みロールが付与されます。必要に応じて追加のロールを定義できます。ログインは、Azure Active Directory（Office 365）またはAAD、GitHub、Facebook、Twitter、Googleのいずれかのプロバイダーを介して行われます。開発者はAzureポータルで招待リンクを作成し、アクセスを許可できます。
OpenID Connect をサポートしていれば、カスタムプロバイダーを作成することも可能です。AAD には、開発者が Microsoft 365 テナントを指定して招待手続きを省略できるという特別な利点があります。ただし、これには有料プランが必要です。
組み込みオプションにより、さまざまなプロバイダーによる認証が可能になりますが、Azure Active Directoryは特別なサポートを提供します。
開発者ワークフローは製品の重要な部分であり、Visual StudioではなくVS Codeをベースとしています。Static Web Apps拡張機能を利用すると、GitHubリポジトリをAzure Static Web Appに自動的にリンクし、コードをデプロイするGitHub Actionも作成できます。また、Azure Functionsを作成し、コードをプロジェクトに追加することもできます。
すべてが順調に進めば、コードを編集し、GitHub にプッシュして、サイトに自動的にデプロイするだけです。ステージングサイトも用意されているので、公開前に更新内容を確認できます。
別のプロジェクトでは、Static Web Apps CLIと呼ばれるローカルサーバーを提供しています。これは現在プレビュー版で、GitHubで公開されています。このサーバーは認証と認可をエミュレートし、APIリクエストを直接、またはAzure Functions Core Toolsと呼ばれる別のローカル開発ユーティリティを介して処理します。
Azure Static Web Appsの初期価格には、比較的寛大な無料プランも含まれる
Azure Static Web Apps の料金は現在、無料と標準の 2 つのレベルから選択できます。無料レベルは比較的寛大で、100GB の帯域幅、SSL 証明書付きのカスタムドメイン 2 つ、アプリサイズ 250MB、ステージング環境 3 つが提供されます。
制限事項としては、カスタム認証がないため（企業アプリケーションでの管理は現実的ではありません）、帯域幅を増やすオプションがありません。また、無料版にはSLAもありません。有料版はアプリ1つにつき月額9ドルで、最初の100GBを使い切った後は1GBあたり0.20ドルの帯域幅が追加されます。
有料版ではプライベートリンクもサポートされており、これによりアプリケーションエンドポイントへのパブリックアクセスが削除されます。無料版・有料版を問わず、Azure Functions や Azure SQL などの追加サービスは別途必要となり、Azure Static Web App 自体よりもコストが高くなる可能性があります。
エル・レグが試乗
Azure Static Web Apps を試し、最初の試みとして Gatsby ベースのサイトを作成しました。しかし、index.html がなかったため、GitHub デプロイアクションの生成に失敗してしまいました。そこで、問題を解決する代わりに、シンプルな HTML サイトを作成してみたら、問題なく動作しました。Azure Static Web Apps で動作するフロントエンドフレームワークの一覧はこちらです（網羅的ではありません）。ブラウザーとサーバーで C# と .NET を扱いたい開発者にとって理想的な Blazor や、Google の Flutter フレームワーク、そしてもちろん人気の React JavaScript フレームワークも含まれています。
一見すると、これはWebサーバー管理の煩わしさなしにシンプルなウェブサイトを公開できる、すっきりとしたサービスです。無料版でも十分使えるように見えますが、既存のAzure App Serviceの無料プランは動的なWebアプリケーション向けであり、デモ用途以外では実用的ではなく、カスタムドメインもサポートされていません。
Microsoftは競合他社に追いつこうとしているのかもしれません。例えば、Gatsbyクラウドは無料プランでも100GBの帯域幅、SSL証明書、カスタムドメインを提供しています。Azure Static Web Appsの組み込み機能、Azure FunctionsやAzure Active Directoryへの接続、VS Codeの拡張機能などを活用する開発者にとって、Microsoftらしさが強く感じられます。®
