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

[アーティクル]
05/11/2023

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

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

静的な Web サイトのホスティングを有効にします

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

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

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

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

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

まず、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 Code を使用してファイルをアップロードする詳細なチュートリアルについては、チュートリアルを参照してください。Host a static website on Blob Storage」 (チュートリアル: 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>

Note

ブラウザーが内容を表示せずに、ファイルのダウンロードをユーザーに要求する場合は、コマンドに --content-type 'text/html; charset=utf-8' を追加します。

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

Note

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

Azure Cloud Shell を使用している場合は、Cloud Shell が認識できるファイル共有を参照する必要があります。この場所は、クラウド共有自体のファイル共有、または Cloud Shell からマウントする既存のファイル共有にすることができます。そうする方法については、「Persist files in Azure Cloud Shell (Azure Cloud Shell でファイルを永続化する)」を参照してください。

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

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

Note

ブラウザーが内容を表示せずに、ファイルのダウンロードをユーザーに要求する場合は、コマンドに -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 コンテナーのファイルに関するトラフィック統計情報が、メトリックダッシュボードでレポートされます。

ストレージアカウントメニューの [Monitor](監視) セクションの [Metrics](メトリック) をクリックします。

Note

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

Note

[GetWebContent] チェックボックスが表示されるのは、その API メンバーが特定の期間内に使用された場合のみです。データを返す API メンバーだけに注目するために、ポータルには一定期間内に使用されたメンバーのみが表示されます。このリストに特定の API メンバーが見つからない場合は、期間を拡大してください。