Azure Static Web Apps とは

Azure Static Web Apps は、コード リポジトリから Azure にフル スタックの Web アプリを自動的にビルドしてデプロイするサービスです。

Azure Static Web Apps overview diagram.

Azure Static Web Apps のワークフローは、開発者の日常のワークフローに合わせて調整されています。 アプリは、コードの変更に基づいてビルドおよびデプロイされます。

Azure Static Web Apps リソースを作成すると、Azure は GitHub または Azure DevOps と直接やり取りして、選択したブランチを監視します。 コミットをプッシュするたび、または監視対象のブランチへの pull request を受け入れるたびに、ビルドが自動的に実行されて、自分のアプリと API が Azure にデプロイされます。

通常、静的 Web アプリは、Angular、React、Svelte、Vue、Blazor など、サーバー側のレンダリングが不要なライブラリと Web フレームワークを使用して構築されます。 これらのアプリには、アプリケーションを構成する HTML、CSS、JavaScript、およびイメージ アセットが含まれます。 従来の Web サーバーでは、これらのアセットは、必要な API エンドポイントと共に 1 台のサーバーから提供されます。

Static Web Apps では、静的アセットは従来の Web サーバーから分離され、世界各地の地理的に分散したポイントから提供されます。 この分散により、ファイルがエンド ユーザーに物理的に近づくため、ファイルの提供が大幅に高速になります。 さらに、API エンドポイントはサーバーレス アーキテクチャを使用してホストされます。これにより、完全なバックエンド サーバーが不要になります。

主要な機能

  • HTML、CSS、JavaScript、画像などの静的コンテンツの Web ホスティング
  • マネージド Azure Functions によって提供される統合 API のサポート。既存の関数アプリ、Web アプリ、コンテナー アプリ、または API Management インスタンスを標準アカウントを使用してリンクするオプションがあります。 マネージド関数をサポートしていないリージョンで API を必要とする場合は、独自の関数をアプリに持ち込むことができます。
  • リポジトリの変更によってビルドとデプロイがトリガーされるファーストクラスの GitHub と Azure DevOps の統合
  • コンテンツをユーザーの近くに配置する、グローバルに分散された静的コンテンツ。
  • 自動的に更新される無料の SSL 証明書
  • ブランド化されたカスタマイズをアプリに提供するカスタム ドメイン
  • API の呼び出し時にリバースプロキシを使用するシームレスなセキュリティ モデル。CORS 構成は必要ありません。
  • Microsoft Entra ID および GitHub との認証プロバイダーの統合
  • カスタマイズ可能な認可ロールの定義と割り当て。
  • 提供するコンテンツとルートを完全に制御できるようにするバックエンド ルーティング規則
  • 発行前にサイトのプレビュー バージョンを有効にする pull request を使用した生成済みステージング バージョン
  • クラウド リソースを作成するための Azure CLI と、ローカル開発用の Azure Static Web Apps CLI を使用した CLI サポート

Static Web Apps でできること

  • Azure Functions バックエンドと共に AngularReactSvelteVue などの JavaScript フレームワークとライブラリを使用した最新の Web アプリケーションの構築、または Blazor を使用した WebAssembly アプリケーションの作成。
  • GatsbyHugoVuePress などのフレームワークを使用した静的サイトの発行
  • Next.jsNuxt.js などのフレームワークを使用した Web アプリケーションのデプロイ

次のステップ