Azure Managed Service Column ＜Azure運用コラム＞Static Web Appsとは？Azure上でさまざまなWebアプリの開発を効率化する方法を解説

静的Webアプリとは？特徴とどのような利用シーンが向いているかについて解説

近年、Web技術の進化により、企業は迅速に情報を提供し、高度なユーザー体験を実現することが求められています。一方、セキュリティ、パフォーマンス、コストといった難しい課題もあります。

このようなビジネスニーズに対応するための一つの解決策として、静的Webアプリという手法があります。静的 Web アプリの開発や運用を容易にするプラットフォームとして、マイクロソフトでは、 Microsoft Azure で Static Web Apps というサービスを提供しています。

本記事では、静的 Web アプリの概要とメリット、そして Static Web Apps の概要から利用シーンまでをわかりやすく解説します。

1. 静的Webアプリとは

ひと言で Web アプリと言っても、その作成方法には選択肢があります。ここではその選択肢のひとつである、静的 Web アプリの概要とメリットについて解説します。

静的Webアプリの概要

静的 Web アプリとは、 HTML 、 CSS 、 JavaScript といったフロントエンド技術を使用して作成され、サーバーサイドでの動的な処理を必要としない Web アプリケーション・ Web コンテンツ全般を指します。予め生成されたページを提供するため、データベースやサーバーサイドの言語を必要とせず、静的なファイルをホストするだけでよいため、運用が容易です。

静的 Web アプリの例としては、企業のランディングページ、簡素な個人ブログやニュースサイト、ドキュメントやマニュアルを表示するサイトなどが挙げられます。

動的Webアプリとの違い

図版出典：三井物産セキュアディレクション株式会社 公式サイトブログ

静的 Web アプリと対照的なものとして、動的Webアプリがあります。これらはページの生成と配信の方法に大きな違いがあります。

動的Webアプリは、ユーザーからのリクエストに応じてサーバー側で HTML を動的に生成し、それをクライアントに送信する形式の Web コンテンツです。ユーザーの情報に基づいて動的にページ生成するため、ユーザーごとに異なるコンテンツや情報を表示することが可能です。

動的 Web アプリの例として、 SNS やオンラインバンキングなどが挙げられます。

静的Webアプリのメリット

静的Webアプリのメリットは下記の通りです。

• セキュリティ
• 高速なパフォーマンス
• コスト効率化

セキュリティ

静的 Web アプリは、すべての HTML 、 CSS 、 JavaScript などが予め生成され、ユーザーのリクエストに応じてファイルを配信します。サーバー側で動的にページを生成する必要がないため、 SQL インジェクションやクロスサイトスクリプティングなど、サーバー側での動的処理に由来するセキュリティリスクを気にする必要がありません。

高速なパフォーマンス

静的 Web アプリはあらかじめ生成されたページをクライアントに配信するため、データベースへの問い合わせやサーバーでのページ生成といった時間を必要としません。そのため、 Web サイトのロード時間が大幅に短縮され、ユーザー体験の向上につなげることができます。

コスト効率化

静的 Web アプリは、基本的に静的なファイルをホストするだけなので、サーバーサイドのアプリケーションやデータベースを運用・管理するコストを削減することができます。

また、多くの場合、 CDN （ Content Delivery Network ）を利用して全世界に効率よくコンテンツを配信することが可能なため、大規模なトラフィックを捌くための追加のコストを抑えることができます。

2. Static Web Appsとは

Azure では Web アプリケーション構築をサポートするサービスがいくつかありますが、Static Web Apps とはどのようなサービスなのでしょうか。ここでは、 Static Web Apps の概要と、他のサービスとの違い、そして料金体系について解説します。

Static Web Appsの概要

図版出典：Microsoft公式サイト

Static Web Apps は、マイクロソフトのクラウド、 Microsoft Azure 上で提供される、静的Webアプリを構築、デプロイ、ホストするためのサービスです。Static Web Apps を利用することで、開発者は HTML 、 CSS 、 JavaScript などの静的なコンテンツを簡単にデプロイして配信することができます。

また、 GitHub や Azure DevOps とのシームレスな連携も特徴の一つです。開発者がStatic Web Apps リソースを作成すると、 Azure は GitHub または Azure DevOps と直接やり取りして、選択したブランチを監視し、自動的にビルドとデプロイが行われるように設定することができます。

Azure Web Appsとの違い

Azure では、 Static Web Apps と同様に Web アプリをホストするサービスとして、 Azure Web Apps があります。Azure Web Apps は、静的 Web アプリだけでなく動的 Web アプリ（ .NET 、 Java 、 Node.js 、 Python 、 PHP などのサーバーサイドの言語を使用したアプリ）をホストすることができます。そのため、データベースとの連携や、サーバーサイドでの動的な処理が必要な場合には Azure Web Apps が向いていると言えます。

Static Web Appsの料金体系

Static Web Apps の料金体系は、利用した分だけ課金される従量課金制となっています。Free （無料）プランと標準プランの 2つのプランが提供されており、標準プランでは、アプリケーションの数やストレージ容量、ネットワークの帯域幅などに応じて課金される体系になっています。

Static Web Apps の料金体系の詳細は公式サイト（※1）を参照してください。

3. Static Web Appsの主な機能と利用シーン

Static Web Apps は静的 Web アプリをデプロイ・ホストするためにさまざまな機能を提供します。ここでは、 Static Web Apps が提供する主な機能と代表的な利用シーンについて解説します。

Static Web Appsの主な機能

Static Web Apps が提供する主な機能は下記の通りです。

• 静的Webコンテンツのホスティング
• 自動化されたCI / CD
• 組み込みAPIサポート
• グローバルな配信

静的Webコンテンツのホスティング

Static Web Apps が担う主要な役割のひとつです。主に HTML 、 CSS 、 JavaScript 、画像などの静的なファイルをホスティングし、インターネット上で公開して世界中からアクセス可能とすることができます。

自動化されたCI/CD

Static Web Apps は、 GitHub や Azure DevOps と統合することで、コードの変更がリポジトリにプッシュされると自動的にビルドとデプロイが行われるよう設定できます。これにより、開発者はコードを修正するだけで最新のアプリケーションがユーザーに提供可能となります。

組み込みAPIサポート

Static Web Apps では、 Azure Functions を利用してサーバーレスの API を統合することができます。これにより、データベースとの接続や、ユーザー認証など、静的 Web サイトだけでは実現困難な動的な処理を行うことができるようになります。

グローバルな配信

Static Web Apps は Azure のグローバルな CDN と統合されています。ユーザーは世界中のどこからでも地理的に近い CDN へアクセスすることにより、高速にサイトにアクセスすることが可能になります。

Static Web Appsの代表的な利用シーン

Static Web Apps の代表的な利用シーンには下記のようなものがあります。

• 企業のランディングページやマーケティングサイト
• 個人のブログやポートフォリオサイト
• 動的Webアプリの構築と公開

企業のランディングページやマーケティングサイト

こうした Web サイトでは、一般的にあらかじめ決まった情報を表示するため、静的な Webサイトとして実装することが一般的です。 Static Web Apps のグローバルな配信機能により、ユーザーは世界中のどこからでも高速にサイトにアクセスすることが可能になります。

個人のブログやポートフォリオサイト

これらも同様に、コンテンツがあらかじめ決まっているため、静的 Web アプリケーションとして実装することが効率的です。また、 Static Web Apps の自動化された CI/CD （継続的インテグレーション・デプロイ）機能により、新たなブログ記事を書いたり、ポートフォリオを更新したりするたびに、新たなビルドとデプロイが自動的に行われるようにすることができます。

動的Webアプリの構築と公開

Static Web Apps は基本的に静的な Web コンテンツを取り扱うサービスですが、 Azure Functions との連携を通じて動的な Web アプリの構築も可能です。この組み合わせにより、静的コンテンツだけでなく、動的にデータを処理したり、データベースから情報を取得したりすることも可能になります。

4. まとめ

本記事では、静的 Web アプリの概要と、 Static Web Apps の概要、主な機能と利用シーンについて解説しました。 Static Web Apps を活用することで、ビジネスニーズに合わせた柔軟なWebアプリを構築することができるようになります。ぜひ専門家の支援を受けながら導入を検討してみてください。

Microsoft Azureを利用したシステムの設計・構築を代行します。お客様のご要件を実現する構成をご提案・実装いたします。

Tag： Static Web Apps

• 

  Azure Mapsとは？Azureにおける地理情報サービスの概要と利用シーンについて詳しく解説

• 

  Azure Communication Servicesとは？ビデオ通話やチャットなどを簡単にアプリに組み込む方法を解説