Azure Storage で静的 Web サイトをホストする

[アーティクル]
2025-05-04

汎用 V2 または BlockBlobStorage アカウントのコンテナーから静的コンテンツ (HTML、CSS、JavaScript、およびイメージファイル) を直接提供できます。詳細については、 Azure Storage での静的 Web サイトホスティングに関するページを参照してください。

この記事では、Azure portal、Azure CLI、または PowerShell を使用して静的 Web サイトホスティングを有効にする方法について説明します。

静的なウェブサイトホスティングを有効にする

静的 Web サイトのホスティングは、ストレージアカウントで有効にする必要がある機能です。

Azure portal にサインインして作業を開始します。
ストレージアカウントを見つけて選択すると、アカウントの [概要 ] ウィンドウが表示されます。
[ 概要 ] ウィンドウで、[機能] タブを選択します。次に、[ 静的 Web サイト ] を選択して、静的 Web サイトの構成ページを表示します。
ストレージアカウントの静的 Web サイトホスティングを有効にするには、[ 有効] を 選択します。
[ インデックスドキュメント名 ] フィールドで、既定のインデックスページを指定します (例: index.html)。

ユーザーが静的 Web サイトのルートに移動すると、既定のインデックスページが表示されます。
[ エラードキュメントパス ] フィールドで、既定のエラーページを指定します (例: 404.html)。

ユーザーが静的 Web サイトに存在しないページに移動しようとすると、既定のエラーページが表示されます。
[ 保存] をクリックして、静的サイトの構成を完了します。
確認メッセージが表示されます。静的な Web サイトエンドポイントとその他の構成情報が [概要 ] ウィンドウに表示されます。

Azure CLI を使用して、静的 Web サイトのホスティングを有効にすることができます。

まず、Azure Cloud Shell を開きます。または、Azure CLI をローカルにインストールした場合は、Windows PowerShell などのコマンドコンソールアプリケーションを開きます。
自分の ID が複数のサブスクリプションに関連付けられている場合は、アクティブなサブスクリプションを、静的 Web サイトをホストするストレージアカウントのサブスクリプションに設定します。
```
az account set --subscription <subscription-id>
```
<subscription-id> プレースホルダーの値をサブスクリプションの ID に置き換えます。
静的な Web サイトホスティングを有効にします。
```
az storage blob service-properties update --account-name <storage-account-name> --static-website --404-document <error-document-name> --index-document <index-document-name>
```
- <storage-account-name> プレースホルダーの値は、実際のストレージアカウントの名前に置き換えます。
- <error-document-name> プレースホルダーは、ブラウザーがサイト上に存在しないページを要求したときにユーザーに表示されるエラードキュメントの名前に置き換えます。
- <index-document-name>プレースホルダーをインデックスドキュメントの名前に置き換えます。このドキュメントは一般的に "index.html" です。

Azure PowerShell モジュールを使用して、静的 Web サイトのホスティングを有効にすることができます。

Windows PowerShell コマンドウィンドウを開きます。
Azure PowerShell モジュール Az バージョン 0.7 以降があることを確認します。
```
Get-InstalledModule -Name Az -AllVersions | select Name,Version
```
インストールまたはアップグレードする必要がある場合は、Azure PowerShell モジュールのインストールに関するページを参照してください。
Connect-AzAccount コマンドを使用して Azure サブスクリプションにサインインし、画面上の指示に従います。
```
Connect-AzAccount
```
自分の ID が複数のサブスクリプションに関連付けられている場合は、アクティブなサブスクリプションを、静的 Web サイトをホストするストレージアカウントのサブスクリプションに設定します。
```
$context = Get-AzSubscription -SubscriptionId <subscription-id>
Set-AzContext $context
```
<subscription-id> プレースホルダーの値をサブスクリプションの ID に置き換えます。
使用するストレージアカウントを定義するストレージアカウントコンテキストを取得します。
```
$storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -AccountName "<storage-account-name>"
$ctx = $storageAccount.Context
```
- <resource-group-name> プレースホルダーの値を、リソースグループの名前に置き換えます。
- <storage-account-name> プレースホルダーの値は、実際のストレージアカウントの名前に置き換えます。
静的な Web サイトホスティングを有効にします。
```
Enable-AzStorageStaticWebsite -Context $ctx -IndexDocument <index-document-name> -ErrorDocument404Path <error-document-name>
```
- <error-document-name> プレースホルダーは、ブラウザーがサイト上に存在しないページを要求したときにユーザーに表示されるエラードキュメントの名前に置き換えます。
- <index-document-name>プレースホルダーをインデックスドキュメントの名前に置き換えます。このドキュメントは一般的に "index.html" です。

ファイルをアップロードする

次の手順では、Azure portal を使用してファイルをアップロードする方法を示します。 AzCopy、PowerShell、CLI、またはアカウントの$web コンテナーにファイルをアップロードできるカスタムアプリケーションを使用することもできます。 Visual Studio コードを使用してファイルをアップロードする詳細なチュートリアルについては、「チュートリアル: Blob Storage で静的な Web サイトをホストする」を参照してください。

Azure portal で、静的 Web サイトを含むストレージアカウントに移動します。左側のナビゲーションウィンドウで [ コンテナー ] を選択して、コンテナーの一覧を表示します。
[ コンテナー ] ウィンドウで、 $web コンテナーを選択して、コンテナーの [概要 ] ウィンドウを開きます。
[ 概要 ] ウィンドウで、[ アップロード ] アイコンを選択して [ BLOB のアップロード ] ウィンドウを開きます。次に、[BLOB のアップロード] ウィンドウで [ファイル] フィールドを選択して、ファイルブラウザーを開きます。アップロードするファイルに移動して選択し、[ 開く ] を選択して [ ファイル ] フィールドを設定します。必要に応じて、[ ファイルが既に存在する場合に上書き する] チェックボックスをオンにします。
ブラウザーでファイルの内容を表示する場合は、そのファイルのコンテンツタイプが text/html に設定されていることを確認します。これを確認するには、前の手順でアップロードした BLOB の名前を選択して 、[概要 ] ウィンドウを開きます。 値が CONTENT-TYPE プロパティフィールド内に設定されていることを確認します。

注

このプロパティは、.htmlなどの一般的に認識される拡張機能のtext/htmlに自動的に設定されます。ただし、場合によっては、これを自分で設定する必要があります。このプロパティを text/html に設定しない場合、ブラウザーは、コンテンツをレンダリングするのではなく、ファイルをダウンロードするようにユーザーに求めるメッセージを表示します。このプロパティは、前の手順で設定できます。

ソースディレクトリから $web コンテナーにオブジェクトをアップロードします。

この例では、Azure Cloud Shell セッションからコマンドを実行していることを前提としています。

az storage blob upload-batch -s <source-path> -d '$web' --account-name <storage-account-name>

注

コンテンツをレンダリングするのではなく、ユーザーにファイルのダウンロードを求めるメッセージが表示された場合は、コマンドに --content-type 'text/html; charset=utf-8' を追加できます。

<storage-account-name> プレースホルダーの値は、実際のストレージアカウントの名前に置き換えます。
<source-path>プレースホルダーを、アップロードするファイルの場所へのパスに置き換えます。

注

Azure CLI の場所のインストールを使用している場合は、ローカルコンピューター上の任意の場所へのパスを使用できます (例: C:\myFolder。

Azure Cloud Shell を使用している場合は、Cloud Shell に表示されるファイル共有を参照する必要があります。この場所は、クラウド共有自体のファイル共有、または Cloud Shell からマウントした既存のファイル共有です。これを行う方法については、「 Azure Cloud Shell でファイルを保持する」を参照してください。

ソースディレクトリから $web コンテナーにオブジェクトをアップロードします。

# upload a file
set-AzStorageblobcontent -File "<path-to-file>" `
-Container `$web `
-Blob "<blob-name>" `
-Context $ctx

注

コンテンツをレンダリングするのではなく、ユーザーにファイルのダウンロードを求めるメッセージが表示された場合は、コマンドに -Properties @{ ContentType = "text/html; charset=utf-8";} を追加できます。

<path-to-file>プレースホルダーの値を、アップロードするファイルへの完全修飾パスに置き換えます (例: C:\temp\index.html)。
<blob-name>プレースホルダーの値を、結果の BLOB に付ける名前に置き換えます (例: index.html)。

Web サイトの URL を検索する

Web サイトのパブリック URL を使用して、ブラウザーからサイトのページを表示できます。

ストレージアカウントのアカウント概要ページの横に表示されるウィンドウで、[ 静的 Web サイト] を選択します。サイトの URL が [プライマリエンドポイント ] フィールドに表示されます。

Azure Storage の静的 Web サイトメトリックメトリック

次のコマンドを使用して、静的 Web サイトのパブリック URL を見つけます。

az storage account show -n <storage-account-name> -g <resource-group-name> --query "primaryEndpoints.web" --output tsv

<storage-account-name> プレースホルダーの値は、実際のストレージアカウントの名前に置き換えます。
<resource-group-name> プレースホルダーの値を、リソースグループの名前に置き換えます。

次のコマンドを使用して、静的 Web サイトのパブリック URL を検索します。

 $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -Name "<storage-account-name>"
Write-Output $storageAccount.PrimaryEndpoints.Web

<resource-group-name> プレースホルダーの値を、リソースグループの名前に置き換えます。
<storage-account-name> プレースホルダーの値は、実際のストレージアカウントの名前に置き換えます。

静的 Web サイトページでメトリックを有効にする

メトリックを有効にすると、$web コンテナーのファイルに関するトラフィック統計情報が、メトリックダッシュボードに報告されます。

ストレージアカウントメニューの [監視] セクションの下にある [メトリック] をクリックします。

注

メトリックデータは、さまざまなメトリック API にフックすることによって生成されます。ポータルには、データを返すメンバーのみに注目するために、特定の期間内に使用される API メンバーのみが表示されます。必要な API メンバーを確実に選択できるようにするには、最初に時間枠を拡張します。
[期間] ボタンをクリックし、期間を選択して、[ 適用] をクリックします。
[名前空間] ドロップダウンから [BLOB] を選択します。
次に、 エグレス メトリックを選択します。
[集計] セレクターから [合計] を選択します。
[フィルターの追加] ボタンをクリックし、プロパティ セレクターから API 名を選択します。
[値] セレクターの GetWebContent の横にあるチェックボックスをオンにして、メトリックレポートを設定します。

注

GetWebContent チェックボックスは、その API メンバーが特定の期間内に使用された場合にのみ表示されます。ポータルには、データを返すメンバーのみに注目するために、特定の期間内に使用される API メンバーのみが表示されます。この一覧に特定の API メンバーが見つからない場合は、期間を展開します。