Movatterモバイル変換

汎用 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 プロパティフィールド内に設定されていることを確認します。
注
このプロパティは、text/htmlなどの一般的に認識される拡張機能の.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 fileset-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 メンバーが見つからない場合は、期間を展開します。