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

$web という名前のストレージ コンテナーから直接に、静的コンテンツ (HTML、CSS、JavaScript、画像ファイル) を提供できます。You can serve static content (HTML, CSS, JavaScript, and image files) directly from a storage container named $web. Azure Storage でコンテンツをホスティングすることで、Azure Functions やその他のサービスとしてのプラットフォーム (PaaS) サービスなど、サーバーレス アーキテクチャを使用できます。Hosting your content in Azure Storage enables you to use serverless architectures that include Azure Functions and other Platform as a service (PaaS) services.

注意

サイトでサーバー側コードに依存している場合は、代わりに Azure App Service を使用します。If your site depends on server-side code, use Azure App Service instead.

静的 Web サイトの設定Setting up a static website

静的 Web サイトのホスティングは、ストレージ アカウントで有効にする必要がある機能です。Static website hosting is a feature that you have to enable on the storage account.

静的 Web サイトのホスティングを有効にするには、既定のファイルの名前を選択してから、必要に応じて、カスタム 404 ページへのパスを指定します。To enable static website hosting, select the name of your default file, and then optionally provide a path to a custom 404 page. アカウントに $web という名前の BLOB ストレージ コンテナーがまだ存在しない場合は、自動的に作成されます。If a blob storage container named $web doesn't already exist in the account, one is created for you. このコンテナーに、サイトのファイルを追加します。Add the files of your site to this container.

手順を追ったガイダンスについては、「Host a static website in Azure Storage」 (Azure Storage で静的 Web サイトをホストする) を参照してください。For step-by-step guidance, see Host a static website in Azure Storage.

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

$web コンテナー内のファイルは大文字と小文字が区別され、匿名アクセス要求によって処理され、読み取り操作によってのみ使用できます。Files in the $web container are case-sensitive, served through anonymous access requests and are available only through read operations.

コンテンツのアップロードUploading content

これらの任意のツールを使用して、コンテンツを $web コンテナーにアップロードできます。You can use any of these tools to upload content to the $web container:

コンテンツの表示Viewing content

ユーザーは、Web サイトのパブリック URL を使用して、ブラウザーからサイトのコンテンツを表示できます。Users can view site content from a browser by using the public URL of the website. URL を見つけるには、Azure portal、Azure CLI、または PowerShell を使用します。You can find the URL by using the Azure portal, Azure CLI, or PowerShell. 次の表を参考にしてください。Use this table as a guide.

ツールTool ガイダンスGuidance
Azure PortalAzure portal Azure portal を使用して Web サイトの URL を見つけるFind the website URL by using the Azure portal
Azure CLIAzure CLI Azure CLI を使用して Web サイトの URL を見つけるFind the website URL by using the Azure CLI
Azure PowerShell モジュールAzure PowerShell module PowerShell を使用して Web サイトの URL を見つけるFind the website URL by using PowerShell

サイトの URL には、リージョン コードが含まれます。The URL of your site contains a regional code. たとえば、URL https://contosoblobaccount.z22.web.core.windows.net/ にはリージョン コード z22 が含まれています。For example the URL https://contosoblobaccount.z22.web.core.windows.net/ contains regional code z22.

そのコードには URL が残りますが、それは内部使用専用であり、他にそのコードを使用する必要はありません。While that code must remain the URL, it is only for internal use, and you won't have to use that code in any other way.

ユーザーがサイトを開き、特定のファイル (例: https://contosoblobaccount.z22.web.core.windows.net) を指定しない場合、静的 Web サイトのホスティングを有効にしたときに指定したインデックス ドキュメントが表示されます。The index document that you specify when you enable static website hosting, appears when users open the site and don't specify a specific file (For example: https://contosoblobaccount.z22.web.core.windows.net).

サーバーが 404 エラーを返し、Web サイトを有効にしたときに、エラー ドキュメントを指定していない場合、既定の 404 ページがユーザーに返されます。If the server returns a 404 error, and you have not specified an error document when you enabled the website, then a default 404 page is returned to the user.

Web コンテナーのパブリック アクセス レベルの設定の影響Impact of the setting the public access level of the web container

$web コンテナーのパブリック アクセス レベルを変更できますが、プライマリ静的 Web サイト エンドポイントに対しては、これらのファイルが匿名アクセス要求によって処理されるため、この変更が無効になります。You can modify the public access level of the $web container, but this has no impact on the primary static website endpoint because these files are served through anonymous access requests. つまり、すべてのファイルへのパブリック (読み取り専用) アクセスです。That means public (read-only) access to all files.

次のスクリーンショットは、Azure Portal のパブリック アクセス レベル設定を示しています。The following screenshot shows the public access level setting in the Azure portal:

ポータルでパブリック アクセス レベルを設定する方法を示すスクリーンショット

プライマリ静的 Web サイト エンドポイントは影響を受けませんが、パブリック アクセス レベルの変更は、プライマリ BLOB サービス エンドポイントには有効です。While the primary static website endpoint is not affected, a change to the public access level does impact the primary blob service endpoint.

$web コンテナーのパブリック アクセス レベルをプライベート (匿名アクセスなし) から BLOB (BLOB 専用の匿名読み取りアクセス) に変更した場合、プライマリ静的 Web サイト エンドポイント https://contosoblobaccount.z22.web.core.windows.net/index.html へのパブリック アクセスのレベルは変更されません。For example, if you change the public access level of the $web container from Private (no anonymous access) to Blob (anonymous read access for blobs only), then the level of public access to the primary static website endpoint https://contosoblobaccount.z22.web.core.windows.net/index.html doesn't change.

しかし、プライマリ BLOB サービス エンドポイント https://contosoblobaccount.blob.core.windows.net/$web/index.html へのパブリック アクセスは、プライベートからパブリックに変更されます。However, the public access to the primary blob service endpoint https://contosoblobaccount.blob.core.windows.net/$web/index.html does change from private to public. ユーザーはこれらの 2 つのエンドポイントのいずれかを使用して、このファイルを開けるようになりました。Now users can open that file by using either of these two endpoints.

コンテンツ配信ネットワーク (CDN) と Secure Sockets Layer (SSL) のサポートContent Delivery Network (CDN) and Secure Socket Layer (SSL) support

静的な Web サイトのファイルをカスタム ドメインおよび HTTPS 経由で使用できるようにするには、「Azure CDN を使用して HTTPS 経由でカスタム ドメイン付きの BLOB にアクセスする」を参照してください。To make your static website files available over your custom domain and 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 primary static website endpoint as opposed to the primary blob service endpoint. CDN 構成がすぐに実行されないため、コンテンツが表示されるまで数分待たなければならない場合があります。You might need to wait a few minutes before your content is visible as the CDN configuration is not immediately executed.

静的 Web サイトを更新するときは、CDN エンドポイントを消去して、CDN エッジ サーバー上のキャッシュされたコンテンツを必ず消去してください。When you update your static website, be sure to clear cached content on the CDN edge servers by purging the CDN endpoint. 詳細については、「Azure CDN エンドポイントの消去」を参照してください。For more information, see Purge an Azure CDN endpoint.

注意

HTTPS は、アカウントの Web エンドポイント経由でネイティブにサポートされるため、Web エンドポイントには HTTP 経由と HTTPS 経由の両方でアクセスできます。HTTPS is supported natively through the account web endpoint, so the web endpoint is accessible via both HTTP and HTTPS. ただし、ストレージ アカウントが HTTPS 経由での安全な転送を必要とするように構成されている場合、ユーザーは HTTPS エンドポイントを使用する必要があります。However, if the storage account is configured to require secure transfer over HTTPS, then users must use the HTTPS endpoint. 詳細については、「Azure Storage で安全な転送が必要」を参照してください。For more information, see Require secure transfer in Azure Storage.

現時点では、カスタム ドメインを HTTPS 経由で使用するには Azure CDN の使用が必要です。The use of custom domains over HTTPS requires the use of Azure CDN at this time.

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

静的 Web サイトをカスタム ドメイン経由で利用できるようにすることができます。You can make your static website available via a custom domain. 詳細については、「Azure Storage アカウントのカスタム ドメイン名の構成」をご覧ください。To learn more, see configure a custom domain name for your Azure Storage account.

Azure でのドメインのホスティングについて詳しくは、「Azure DNS でドメインをホストする」を参照してください。For an in-depth look at hosting your domain on Azure, see Host your domain in Azure DNS.

価格Pricing

静的 Web サイトのホスティングは無料で有効にできます。You can enable static website hosting free of charge. サイトで利用した BLOB ストレージと、運用コストに対してのみ課金されます。You're billed only for the blob storage that your site utilizes and operations costs. Azure Blob Storage の価格について詳しくは、Azure Blob Storage の料金に関するページをご覧ください。For more details on prices for Azure Blob Storage, check out the Azure Blob Storage Pricing Page.

メトリックMetrics

静的 Web サイトのページでメトリックを有効にできます。You can enable metrics on static website pages. メトリックを有効にすると、 $web コンテナーのファイルに関するトラフィック統計情報が、メトリック ダッシュボードでレポートされます。Once you've enabled metrics, traffic statistics on files in the $web container are reported in the metrics dashboard.

静的 Web サイトのページでメトリックを有効にするには、「Enable metrics on static website pages」 (静的 Web サイト ページでメトリックを有効にする) を参照してください。To enable metrics on your static website pages, see Enable metrics on static website pages.

次の手順Next steps