はじめに

  • 2 分

あなたの会社はショッピング リスト Web アプリに着手しています。 顧客は、このサイトを使用して、リストの項目の追加、編集、表示、および削除を行うことができます。

このアプリを作成するに当たっての最初の懸案事項は、アプリと API が安全にホストされ、グローバルに使用可能で、自動的に発行されることです。 あなたは、これらの懸念事項に対処するために Web サーバーを設定して構成するのではなく、多くの設定や構成を行わずに資産と API を簡単に提供するホスティング ソリューションを使用することにしました。

Azure Static Web Apps とは

Azure Static Web Apps を使用すると、ソース コードからグローバルな可用性に至るまですべての困難な問題を解決できます。

あなたがアプリの開発に集中している間、Azure Static Web Apps によって GitHub または Azure DevOps からアプリが自動的にビルドされ、ホストされます。

一般的に、静的 Web アプリは、Blazor などの WebAssembly フレームワーク、および JavaScript フレームワークとライブラリを使用してビルドされます。 これらのアプリには、アプリケーションを構成する HTML、CSS、JavaScript、および画像資産が含まれます。 従来の Web サーバー アーキテクチャでは、このようなファイルは、必要な API エンドポイントと共に 1 つのサーバーから提供されます。

Azure Static Web Apps を使用すると、静的資産は従来の Web サーバーから分離され、代わりに世界中に分散しているポイントから提供されます。 この分散により、ファイルは物理的にエンド ユーザーに近くなるので、ファイルの提供が速くなります。 API エンドポイントはサーバーレス アーキテクチャを使用してホストされるため、完全なバックエンド サーバーと共に使用する必要はありません。

Azure Static Web Apps のモデルは、余計なものも不足もなく、必要なものだけを利用することです。

Diagram showing the Static Apps overview.

Azure Static Web Apps リソースを作成すると、Azure によって、アプリのソース コード リポジトリに GitHub Actions または Azure DevOps ワークフローが設定されます。 そのワークフローによって選択したブランチが監視されます。 監視対象のブランチにコミットをプッシュしたり、pull request を作成したりするたびに、そのワークフローで自動的にアプリとその API がビルドされ、Azure にデプロイされます。

Azure によって Web アプリがホストされ、提供されます。一方、Azure Functions によってバックエンド API 機能が提供されます。ここで、API への需要に基づく自動スケールアウトおよびスケールインが実行されます。

主要な機能

  • グローバルに分散された Web ホスティングによって、HTML、CSS、JavaScript、画像などの静的コンテンツがユーザーの近くに配置されます。
  • Azure Functions によって提供される統合 API サポート。
  • ファーストクラス GitHub と Azure DevOps の統合 これによって、リポジトリの変更ごとにビルドとデプロイがトリガーされます。
  • 自動的に更新される無料の SSL 証明書。
  • pull request をプレビューするための一意のプレビュー URL

学習の目的

このモジュールでは、Web アプリと API を作成、変更し、Azure Static Web Apps にデプロイします。

このモジュールでは、サンプルの Blazor アプリケーションと、C# で記述された API を提供します。

作業内容

クライアント アプリケーションを選択した後は、次の手順を実行します。

  1. Blazor アプリケーションをビルドして実行します。
  2. Azure Functions を使用して API を作成します。
  3. API に対して HTTP 要求を行うように Web アプリを変更します。
  4. GitHub Actions を使用して、自動的に GitHub リポジトリから Web アプリをビルドし、Azure にデプロイします。
  5. 最後に、アプリケーションを調べて、起動します。

A set of four screenshots illustrating the four sample applications.

次のステップ

現時点では、まず Azure リソースを作成する必要があると考えているかもしれませんが、Azure Static Web Apps では日常的なワークフローが考慮されています。 より自然なアプローチは、Azure でリソースを作成する前に、まず GitHub のコードから始めることです。