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

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

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

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

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

  1. Azure portal にサインインして、作業を開始します。

  2. ご自分のストレージ アカウントを見つけて選択すると、そのアカウントの [概要] ウィンドウが表示されます。

  3. [概要] ウィンドウで、[機能] タブを選択します。次に、[静的な Web サイト] を選択して、静的 Web サイトの構成ページを表示します。

    Azure portal 内の静的 Web サイト構成ページにアクセスする方法を示す画像

  4. [有効] を選択して、ストレージ アカウントに対して静的な Web サイト ホスティングを有効にします。

  5. [インデックス ドキュメント名] フィールドで、既定のインデックス ページを指定します。(index.html など)。

    既定のインデックス ページは、ユーザーが静的な Web サイトのルートに移動したときに表示されます。

  6. [エラー ドキュメントのパス] フィールドで、既定のエラー ページを指定します。(404 .htmlなど)。

    既定のエラー ページは、ユーザーが静的な Web サイトに存在しないページに移動しようとしたときに表示されます。

  7. [保存] をクリックし、静的サイトの構成を完了します。

    Azure portal 内で静的 Web サイトのプロパティを設定する方法を示す画像

  8. 確認メッセージが表示されます。 ご自分の静的 Web サイト エンドポイントとその他の構成情報が [概要] ウィンドウに表示されます。

    Azure portal 内の静的 Web サイトのプロパティを示す画像

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

次の手順は、Azure portal を使用してファイルをアップロードする方法を示しています。 また、AzCopy、PowerShell、CLI、またはお使いのアカウントの $web コンテナーにファイルをアップロードできる任意のカスタム アプリケーションも使用できます。 Visual Studio Code を使用してファイルをアップロードする詳細なチュートリアルについては、 チュートリアルを参照してください。Host a static website on Blob Storage」 (チュートリアル: Blob Storage で静的な Web サイトをホストする) を完了します。

  1. Azure portal で、静的 Web サイトを含むストレージ アカウントに移動します。 左側のナビゲーション ウィンドウで [コンテナー] を選択して、コンテナーの一覧を表示します。

  2. [コンテナー] ウィンドウで、[$web] コンテナーを選択してコンテナーの [概要] ウィンドウを開きます。

    Azure portal 内の Web サイト ストレージ コンテナーの場所を示す画像

  3. [概要] ウィンドウで、[アップロード] アイコンを選択して [BLOB のアップロード] ペインを開きます。 次に、[BLOB のアップロード] ペイン内の [ファイル] フィールドを選択してファイル ブラウザーを開きます。 アップロードするファイルに移動して選択し、[開く] を選択して [ファイル] フィールドを設定します。 必要に応じて、[ファイルが既に存在する場合は上書きする] チェックボックスをオンにします。

    静的 Web サイト ストレージ コンテナーにファイルをアップロードする方法を示す画像

  4. ブラウザーでファイルの内容を表示する場合は、そのファイルのコンテンツの種類が text/html に設定されていることを確認します。 これを確認するには、前の手順でアップロードした BLOB の名前を選択して、その [概要] ウィンドウを開きます。 その値が CONTENT-TYPE プロパティ フィールド内で設定されていることを確認します。

    BLOB コンテンツ タイプを確認する方法を示す画像

    注意

    このプロパティは、.html などの一般的に認識される拡張機能では自動的に text/html に設定されます。 ただし、場合によっては、これを自分で設定する必要があります。 このプロパティを text/html に設定しなかった場合、ブラウザーは、内容を表示する代わりに、ファイルのダウンロードをユーザーに要求します。 このプロパティは、前の手順で設定できます。

Web サイトの URL を検索する

Web サイトのパブリック URL を使用して、ブラウザーからお使いのサイトのページを表示できます。

ストレージ アカウントの概要ページの横に表示されるウィンドウで、 [静的な Web サイト] を選択します。 サイトの URL が、 [プライマリ エンドポイント] フィールドに表示されます。

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

静的な Web サイトのページでメトリックを有効にする

メトリックを有効にすると、 $web コンテナーのファイルに関するトラフィック統計情報が、メトリック ダッシュボードでレポートされます。

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

    メトリック リンク

    Note

    メトリック データは、さまざまなメトリック API に接続することで生成されます。 データを返す API メンバーだけに注目するために、ポータルには一定期間内に使用されたメンバーのみが表示されます。 必要な API メンバーを選択できるようにするための最初の手順は、期間を展開することです。

  2. 期間ボタンをクリックして期間を選択し、 [適用] をクリックします。

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

  3. "名前空間" のドロップ ダウンから [BLOB] を選択します。

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

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

    Azure Storage 静的 Web サイトのエグレス メトリックを示すスクリーンショット。

  5. [集計] セレクターから [合計] を選択します。

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

  6. [フィルターの追加] ボタンをクリックし、 [プロパティ] セレクターから [API 名] を選択します。

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

  7. [値] セレクターで [GetWebContent] の横にあるチェック ボックスをオンにして、メトリック レポートを設定します。

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

    Note

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

次のステップ