【初心者向け】Azure 静的Webサイト / Static Web Apps をざっくり理解する

この記事の内容

  • Azure の Web 公開方法として「App Service」と「静的Webサイト」の違いを解説します
  • 静的Webサイトの特徴（コスト・速度・拡張性）をまとめます
  • Azure ポータルと GitHub を連携して静的Webアプリを作成・デプロイする手順を紹介します
  • ストレージアカウントを直接使った静的Webサイト公開方法も説明します
  • 静的Webサイトが向いているユースケースと App Service との使い分けを整理します

App Service と静的Webサイトの違い

Azureには Web サイトを公開する方法として、「App Service」と「静的Webサイト」の 2 つがあります。それぞれの特徴を理解しておくと、静的Webサイトのメリットが見えてきます。

App Service とは

App Service は、サーバー上で Python や Node.js などのプログラムを動かし、リクエストごとに動的にコンテンツを生成する仕組みです。サーバーには CPU やメモリなどのリソースが割り当てられており、サーバーサイドで処理を行った結果をクライアントへ返します。柔軟なアプリケーション構築が可能な反面、運用コストが高くなりがちです。

静的Webサイトとは

一方、静的Webサイトは、あらかじめ用意された HTML・CSS・JavaScript などの「静的コンテンツ」をそのまま返す方式です。サーバー側で動的な処理を行わず、ストレージに置かれたファイルを配信するだけなので、非常に安価でシンプル、スケーラビリティにも優れています。

静的Webサイトの特徴

静的Webサイトには、以下のような特徴があります。

  • コストが安い：サーバーでの計算やプログラム実行が不要なため、App Service と比べて運用コストが圧倒的に低くなります
  • 導入が簡単：ファイルをストレージに置くだけで Web サイトとして公開できます
  • 高速配信：CDN（コンテンツ配信ネットワーク）と連携することで、世界中に高速にコンテンツを配信できます
  • 拡張性：必要に応じて、クライアントサイドの JavaScript や、サーバーレスの Azure Functions と組み合わせて機能拡張も可能です

静的Webサイトの構成例

典型的な静的Webサイトの構成は次のとおりです。

  • ストレージアカウント：HTML・CSS・JS などのファイルを保存します
  • クライアントサイド JavaScript：ブラウザ上で動作し、動的な表示や API 連携が可能です
  • Azure Functions（必要に応じて）：一部のサーバーサイド処理をサーバーレスで提供します
  • GitHub Actions：コードの変更を自動でデプロイ（CI/CD）する仕組みです

Azure で静的Webアプリを作成する手順

ここからは、実際に Azure ポータルで静的Webアプリを作成し、GitHub と連携してコンテンツをデプロイする流れを紹介します。

1. Azure ポータルで静的Webアプリを作成

  1. Azure ポータルから「静的Webアプリ」を選択し、作成を開始します
  2. サブスクリプションやリソースグループを選択します
  3. ホスティングリージョンはグローバル分散されるため、特に指定は不要です
  4. 名前（例：stweb-test）を入力します
  5. ホスティングプランは「フリー」または「スタンダード」から選択します

2. GitHub リポジトリを用意

  1. サンプルの静的Webアプリ（例：vanilla-basic）を自身の GitHub リポジトリへフォークします
  2. フォークしたリポジトリには、index.html や style.css などシンプルな Web ページが含まれています

3. Azure と GitHub を連携

  1. Azure ポータルで GitHub アカウントと連携します
  2. 組織・リポジトリ・ブランチ（通常は main）を選択します
  3. ビルドプリセットは「カスタム検出済み」を選択します（今回はフレームワークなしのシンプルな構成です）
  4. デプロイ方法は「デプロイトークン」または「GitHub」から選択します

4. デプロイの自動化（GitHub Actions）

GitHub Actions を使うことで、リポジトリ内のコードが更新されるたびに自動で Azure 静的Webアプリへデプロイされます。デプロイ処理は、リポジトリ内の以下のパスに自動生成されるワークフローファイルによって管理されます。

.github/workflows/（YAMLファイル）

このファイルがビルドとデプロイの処理を自動化しています。

コンテンツの変更と CI/CD

実際に GitHub リポジトリ上の index.html などを編集してコミットすると、自動的に GitHub Actions が動作し、新しいコンテンツが Azure の静的Webアプリへデプロイされます。これがいわゆる CI/CD（Continuous Integration / Continuous Deployment） です。コードを push するだけで最新のサイトが公開される、という開発フローを簡単に実現できます。

ストレージアカウントを直接使った静的Webサイト公開

Azure の「ストレージアカウント」そのものにも、静的Webサイトを公開する機能があります。

  1. ストレージアカウントで「静的Webサイト」を有効化します
  2. インデックスドキュメント（例：index.html）を設定します
  3. ファイルを $web コンテナにアップロードします
  4. 指定されたエンドポイントから Web サイトとしてアクセスできます

この方法では GitHub 連携などの自動化はありませんが、ファイルを直接アップロードするだけで Web ページを公開できるシンプルな手段です。

静的Webアプリのカスタマイズ・拡張

基本的な公開のほかにも、以下のようなカスタマイズが可能です。

  • カスタムドメイン対応：独自ドメインを割り当てることができます
  • Azure Functions 連携：API バックエンドをサーバーレスで追加できます
  • 監視や自動化：各種設定・監視・オートメーションも利用できます

静的Webサイトはどんな用途に向いている？

静的Webサイトが特に向いているユースケースは次のとおりです。

  • コーポレートサイトやポートフォリオなど、動的処理がほぼ不要なサイト
  • SPA（シングルページアプリケーション）や Jamstack 構成のフロントエンド
  • API 連携やフォーム送信など、一部機能だけサーバーレス化したい場合

業界全体でも、静的Webサイト＋サーバーレス（Azure Functions など）の組み合わせがトレンドになりつつあります。

App Service と静的Webサイトの使い分け

App Service静的Webサイト
処理方式サーバーサイドで動的生成静的ファイルをそのまま配信
コスト高め低い（フリープランあり）
向いている用途動的なアプリ、API サーバーシンプルな Web 公開、SPA
スケーラビリティサーバーリソースに依存CDN による高スケール配信

用途や要件に合わせて、適切な方法を選択しましょう。

まとめ

Azure の静的Webサイト（Static Web Apps）は、HTML・CSS・JavaScript などのファイルをストレージに置くだけで、簡単かつ低コストに Web サイトを公開できるサービスです。

GitHub Actions との連携により、コードを push するだけで自動デプロイ（CI/CD）が実現できます。また、サーバーレスの Azure Functions と組み合わせることで、静的サイトでありながら動的な処理も部分的に取り込むことが可能です。

動的処理が少ないサイトであれば、コストとパフォーマンスの両面で App Service より静的Webサイトが有利です。用途に応じて使い分け、効率的な Azure 活用を目指しましょう。