【初心者向け】Azure 静的Webサイト / Static Web Apps をざっくり理解する【Azureのサービス群をざっくり理解するシリーズ】
【初心者向け】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 と連携してコンテンツをデプロイする流れを紹介します。 ...