Azure Storage での静的 Web サイト ホスティングStatic website hosting in Azure Storage

Azure Storage GPv2 アカウントでは、$web という名前のストレージ コンテナーから直接、静的コンテンツ (HTML、CSS、JavaScript、画像ファイル) を提供できます。Azure Storage GPv2 accounts allow you to serve static content (HTML, CSS, JavaScript, and image files) directly from a storage container named $web. Azure Storage でのホスティングを活用すれば、Azure Functions やその他の PaaS サービスなど、サーバーレス アーキテクチャを使用できます。Taking advantage of hosting in Azure Storage allows you to use serverless architectures including Azure Functions and other PaaS services.

静的 Web サイト ホスティングとは対照的に、サーバー側のコードに依存する動的サイトは、Azure App Service を使用してホストするのが最適です。In contrast to static website hosting, dynamic sites that depend on server-side code are best hosted using Azure App Service.

それはどのように機能しますか?How does it work?

ストレージ アカウントで静的 Web サイト ホスティングを有効にする場合、既定のファイルの名前を選択します。必要に応じて、カスタム 404 ページへのパスも指定します。When you enable static website hosting on your storage account, you select the name of your default file and optionally provide a path to a custom 404 page. 機能が有効になると、$web という名前のコンテナーが作成されます (まだ存在しない場合)。As the feature is enabled, a container named $web is created if it doesn't already exist.

$web コンテナー内のファイルは、Files in the $web container are:

  • 匿名のアクセス要求を通じて提供されますserved through anonymous access requests
  • オブジェクト読み取り操作を通じてのみ利用可能ですonly available through object read operations
  • 大文字と小文字の区別case-sensitive
  • 次のパターンに従っているパブリック Web で利用可能ですavailable to the public web following this pattern:
    • https://<ACCOUNT_NAME>.<ZONE_NAME>.web.core.windows.net/<FILE_NAME>
  • 次のパターンに従っている BLOB ストレージ エンドポイントを通じて利用可能ですavailable through a Blob storage endpoint following this pattern:
    • https://<ACCOUNT_NAME>.blob.core.windows.net/$web/<FILE_NAME>

ファイルのアップロードには BLOB ストレージ エンドポイントを使用します。You use the Blob storage endpoint to upload files. たとえば、次の場所にアップロードされたファイルは、For instance, the file uploaded to this location:

https://contoso.blob.core.windows.net/$web/image.png

ブラウザーで次のような場所を指定して利用できます。is available in the browser at a location like this:

https://contoso.z4.web.core.windows.net/image.png

選択された既定のファイル名はルートで使用されるほか、ファイル名が指定されていない場合にサブディレクトリで使用されます。The selected default file name is used at the root and any subdirectories when a file name is not provided. エラー ドキュメントのパスを指定していないと、サーバーが 404 を返す際に既定の 404 ページがユーザーに返されます。If the server returns a 404 and you do not provide an error document path, then a default 404 page is returned to the user.

CDN および SSL のサポートCDN and SSL support

静的 Web サイトのファイルを HTTPS 経由で利用できるようにするには、「カスタム ドメインを用いた BLOB に Azure CDN から HTTPS 経由でアクセスする」を参照してください。To make your static website files available over HTTPS, see Using the Azure CDN to access blobs with custom domains over HTTPS. このプロセスの一環として、CDN が BLOB エンドポイントではなく "Web エンドポイントを指す" ようにする必要があります。As a part of this process, you need to point your CDN to the web endpoint as opposed to the blob endpoint. CDN 構成がすぐに実行されないため、コンテンツが表示されるまで数分待たなければならない場合があります。You may need to wait a few minutes before your content is visible as the CDN configuration is not immediately executed.

カスタム ドメイン名Custom domain names

静的 Web サイトをカスタム ドメイン経由で利用できるよう、Azure ストレージ アカウントのカスタム ドメイン名を構成できます。You can configure a custom domain name for your Azure Storage account to make your static website available via a custom domain. Azure でのドメインのホスティングについて詳しくは、Azure DNS でのドメインのホストに関するページを参照してください。For an in-depth look at hosting your domain on Azure, see Host your domain in Azure DNS.

価格Pricing

静的 Web サイト ホスティングは、追加コストなしで提供されます。Static website hosting is provided at no additional cost. Azure Blob Storage の価格について詳しくは、Azure Blob Storage の料金に関するページをご覧ください。For more details on prices for Azure Blob Storage, check out the Azure Blob Storage Pricing Page.

クイック スタートQuickstart

Azure ポータルAzure portal

最初に https://portal.azure.com で Azure portal を開いて、GPv2 ストレージ アカウントで以下の手順を実行します。Begin by opening the Azure portal at https://portal.azure.com and run through the following steps on your GPv2 storage account:

  1. [設定] をクリックします。Click on Settings
  2. [静的な Web サイト] をクリックします。Click on Static website
  3. "インデックス ドキュメント名" を入力します Enter an index document name. (一般的な値は index.html です)。(A common value is index.html)
  4. 必要に応じて、カスタム 404 ページへの "エラー ドキュメントのパス" を入力します Optionally enter an error document path to a custom 404 page. (一般的な値は 404.html です)。(A common value is 404.html)

次に、Azure portal または Azure Storage Explorer を使用して $web コンテナーにアセットをアップロードします。これにより、ディレクトリ全体をアップロードします。Next, upload your assets to the $web container via the Azure portal or with the Azure Storage Explorer to upload entire directories. 必ず、機能を有効にするときに選択した "インデックス ドキュメント名" に一致するファイルを含めてください。Make sure to include a file that matches the index document name you selected when enabling the feature.

最後に、Web エンドポイントに移動して Web サイトをテストします。Finally, navigate to your web endpoint to test your website.

Azure CLIAzure CLI

ストレージ プレビュー拡張機能をインストールします。Install the storage preview extension:

az extension add --name storage-preview

サブスクリプションが複数ある場合は、有効にしたい GPv2 ストレージ アカウントのサブスクリプションに CLI を設定します。In the case of multiple subscriptions, set your CLI to the subscription of the GPv2 storage account you wish to enable:

az account set --subscription <SUBSCRIPTION_ID>

機能を有効にします。Enable the feature. 山かっこも含め、すべてのプレースホルダーの値は、実際の値に置き換えてください。Make sure to replace all placeholder values, including brackets, with your own values:

az storage blob service-properties update --account-name <ACCOUNT_NAME> --static-website --404-document <ERROR_DOCUMENT_NAME> --index-document <INDEX_DOCUMENT_NAME>

Web エンドポイント URL のクエリを実行します。Query for the web endpoint URL:

az storage account show -n <ACCOUNT_NAME> -g <RESOURCE_GROUP> --query "primaryEndpoints.web" --output tsv

ソース ディレクトリから $web コンテナーにオブジェクトをアップロードします。Upload objects to the $web container from a source directory. コマンド内での $web コンテナーに対する参照を正しくエスケープしてください。Be sure to properly escape the reference to the $web container in the command. たとえば、Azure portal の CloudShell から Azure CLI を使用する場合は、$web コンテナーを次のようにエスケープします。For example, if you are using Azure CLI from CloudShell in the Azure portal, escape the $web container as shown:

az storage blob upload-batch -s <SOURCE_PATH> -d \$web --account-name <ACCOUNT_NAME>

DeploymentDeployment

コンテンツをストレージ コンテナーにデプロイするために使用できる方法には、以下があります。Methods available for deploying content to a storage container include the following:

どの場合も、ファイルを $web コンテナーにコピーしてください。In all cases, make sure you copy files to the $web container.

メトリックMetrics

静的 Web サイトのページでメトリックを有効にするには、[設定] > [監視] > [メトリック] の順にクリックします。To enable metrics on your static website pages, click on Settings > Monitoring > Metrics.

メトリック データは、さまざまなメトリック API に接続することで生成されます。Metrics data are generated by hooking into different metrics APIs. データを返す API メンバーだけに注目するために、ポータルには一定期間内に使用されたメンバーのみが表示されます。The portal only displays API members used within a given time frame in order to only focus on members that return data. 必要な API メンバーを選択できるようにするために、最初の手順で期間を展開します。In order to ensure you are able to select the necessary API member, the first step is to expand the time frame.

期間のボタンをクリックして [過去 24 時間] を選択し、[適用] をクリックします。Click on the time frame button and select Last 24 hours and then click Apply

Azure Storage 静的 Web サイトのメトリック: 時間の範囲

次に、"名前空間" のドロップ ダウンから [BLOB] を選択します。Next, select Blob from the Namespace drop down.

Azure Storage 静的 Web サイトのメトリック: 名前空間

メトリックとして [エグレス] を選択します。Then select the Egress metric.

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

[集計] セレクターから [合計] を選択します。Select Sum from the Aggregation selector.

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

次に、[フィルターの追加] ボタンをクリックし、[プロパティ] セレクターから [API 名] を選択します。Next, click the Add filter button and choose API name from the Property selector.

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

最後に、[値] セレクターで [GetWebContent] の横にあるチェック ボックスをオンにして、メトリック レポートを設定します。Finally, check the box next to GetWebContent in the Values selector to populate the metrics report.

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

有効にすると、$web コンテナーのファイルに関するトラフィック統計情報が、メトリック ダッシュボードでレポートされます。Once enabled, traffic statistics on files in the $web container are reported in the metrics dashboard.

FAQFAQ

静的 Web サイト機能は、すべての種類のストレージ アカウントで使用できますか?Is the static websites feature available for all storage account types?
いいえ、静的 Web サイト ホスティングは、GPv2 標準ストレージ アカウントでのみ使用できます。No, static website hosting is only available in GPv2 standard storage accounts.

Storage VNET とファイアウォールのルールは、新しい Web エンドポイントでサポートされますか?Are Storage VNET and firewall rules supported on the new web endpoint?
はい、新しい Web エンドポイントは、ストレージ アカウント用に構成された VNET とファイアウォールのルールに従って機能します。Yes, the new web endpoint obeys the VNET and firewall rules configured for the storage account.

Web エンドポイントでは、大文字と小文字が区別されますか?Is the web endpoint case-sensitive?
はい、Web エンドポイントでは、BLOB エンドポイントと同じように、大文字と小文字が区別されます。Yes, the web endpoint is case-sensitive just like the blob endpoint.

次の手順Next steps