次の方法で共有


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

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

この記事では、Azure portal、Azure CLI、または PowerShell を使用して静的 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 コードを使用してファイルをアップロードする詳細なチュートリアルについては、「 チュートリアル: 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. ストレージ アカウント メニューの [監視] セクションの下にある [メトリック] をクリックします。

    指標リンク

    メトリック データは、さまざまなメトリック 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

    GetWebContent チェック ボックスは、その API メンバーが特定の期間内に使用された場合にのみ表示されます。 ポータルには、データを返すメンバーのみに注目するために、特定の期間内に使用される API メンバーのみが表示されます。 この一覧に特定の API メンバーが見つからない場合は、期間を展開します。

次のステップ