Azure Storage で静的 Web サイトをホストするHost a static website in Azure Storage

Azure Storage GPv2 アカウントのコンテナーから静的コンテンツ (HTML、CSS、JavaScript、および画像ファイル) を直接提供できます。You can serve static content (HTML, CSS, JavaScript, and image files) directly from a container in an Azure Storage GPv2 account. 詳細については、「Static website hosting in Azure Storage (Azure Storage での静的 Web サイト ホスティング)」を参照してください。To learn more, see Static website hosting in Azure Storage.

この記事では、Azure portal、Azure CLI、または PowerShell を使用して、静的 Web サイトのホスティングを有効にする方法を示します。This article shows you how to enable static website hosting by using the Azure portal, the Azure CLI, or PowerShell.

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

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

  1. Azure ポータルにサインインして、作業を開始します。Sign in to the Azure portal to get started.

  2. ストレージ アカウントを見つけて、アカウントの概要を表示します。Locate your storage account and display the account overview.

  3. [静的な Web サイト] を選択して、静的な Web サイトの構成ページを表示します。Select Static website to display the configuration page for static websites.

  4. [有効] を選択して、ストレージ アカウントに対して静的な Web サイト ホスティングを有効にします。Select Enabled to enable static website hosting for the storage account.

  5. [インデックス ドキュメント名] フィールドで、既定のインデックス ページを指定します。(index.html など)。In the Index document name field, specify a default index page (For example: index.html).

    既定のインデックス ページは、ユーザーが静的な Web サイトのルートに移動したときに表示されます。The default index page is displayed when a user navigates to the root of your static website.

  6. [エラー ドキュメントのパス] フィールドで、既定のエラー ページを指定します。(404 .htmlなど)。In the Error document path field, specify a default error page (For example: 404.html).

    既定のエラー ページは、ユーザーが静的な Web サイトに存在しないページに移動しようとしたときに表示されます。The default error page is displayed when a user attempts to navigate to a page that does not exist in your static website.

  7. [保存] をクリックします。Click Save. これで、Azure ポータルで静的な Web サイトのエンドポイントが表示されるようになります。The Azure portal now displays your static website endpoint.

    ストレージ アカウントに対して静的な Web サイト ホスティングを有効にする

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

次の手順では、Azure portal に表示される Storage Explorer のバージョンを使用してファイルをアップロードする方法について説明します。These instructions show you how to upload files by using the version of Storage Explorer that appears in the Azure portal. ただし、Azure portal の外部で実行される Storage Explorer のバージョンを使用することもできます。However, you can also use the version of Storage Explorer that runs outside of the Azure portal. AzCopy、PowerShell、CLI、またはお使いのアカウントの $web コンテナーにファイルをアップロードできる任意のカスタムアプリケーションを使用できます。You could use AzCopy, PowerShell, CLI, or any custom application that can upload files to the $web container of your account. Visual Studio コードを使用してファイルをアップロードする詳細なチュートリアルについては、 チュートリアルを参照してください。Host a static website on Blob Storage」 (チュートリアル: Blob Storage で静的な Web サイトをホストする) を完了します。For a step-by-step tutorial that uploads files by using Visual Studio code, see Tutorial: Host a static website on Blob Storage.

  1. ストレージ エクスプローラー (プレビュー) を選択します。Select Storage Explorer (preview).

  2. [BLOB コンテナー] ノードを展開し、 $web コンテナーを選択します。Expand the BLOB CONTAINERS node, and then select the $web container.

  3. ファイルをアップロードするには、 [アップロード] ボタンを選択します。Choose the Upload button to upload files.

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

  4. ブラウザーでファイルの内容を表示する場合は、そのファイルのコンテンツの種類が text/html に設定されていることを確認します。If you intend for the browser to display the contents of file, make sure that the content type of that file is set to text/html.

    その他のコンテンツ タイプ

    注意

    Storage Explorer は、.html などの一般的に認識される拡張機能に対して、このプロパティを自動的に text/html に設定します。Storage Explorer automatically sets this property to text/html for commonly recognized extensions such as .html. ただし、場合によっては、これを自分で設定する必要があります。However, in some cases, you'll have to set this yourself. このプロパティを text/html に設定しなかった場合、ブラウザーは、内容を表示する代わりに、ファイルのダウンロードをユーザーに要求します。If you don't set this property to text/html, the browser will prompt users to download the file instead of rendering the contents. このプロパティを設定するには、ファイルを右クリックして、 [プロパティ] をクリックします。To set this property, right-click the file, and then click Properties.

Web サイトの URL を検索するFind the website URL

Web サイトのパブリック URL を使用して、ブラウザーからお使いのサイトのページを表示できます。You can view the pages of your site from a browser by using the public URL of the website.

ストレージ アカウントの概要ページの横に表示されるウィンドウで、 [静的な Web サイト] を選択します。In the pane that appears beside the account overview page of your storage account, select Static Website. サイトの URL が、 [プライマリ エンドポイント] フィールドに表示されます。The URL of your site appears in the Primary endpoint field.

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

静的な Web サイトのページでメトリックを有効にする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.

  1. ストレージ アカウント メニューの [Monitor](監視) セクションの [Metrics](メトリック) をクリックします。Click Metrics under the Monitor section of the storage account menu.

    メトリック リンクMetrics link

    注意

    メトリック データは、さまざまなメトリック 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're able to select the necessary API member, the first step is to expand the time frame.

  2. 期間ボタンをクリックして期間を選択し、 [適用] をクリックします。Click on the time frame button, choose a time frame, and then click Apply.

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

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

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

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

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

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

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

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

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

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

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

    注意

    [GetWebContent] チェック ボックスが表示されるのは、その API メンバーが特定の期間内に使用された場合のみです。The GetWebContent checkbox appears only if that API member was used within a given time frame. データを返す API メンバーだけに注目するために、ポータルには一定期間内に使用されたメンバーのみが表示されます。The portal only displays API members used within a given time frame in order to only focus on members that return data. このリストに特定の API メンバーが見つからない場合は、期間を拡大してください。If you can't find a specific API member in this list, expand the time frame.

次のステップNext steps