次の方法で共有

チュートリアル: Blob Storage で静的 Web サイトをホストする

このチュートリアルでは、静的 Web サイトを構築して Azure Storage にデプロイする方法について説明します。 完了すると、ユーザーがパブリックにアクセスできる静的な Web サイトが作成されます。

このチュートリアルでは、以下の内容を学習します。

  • 静的な Web サイト ホスティングを構成する
  • Hello World Web サイトをデプロイする

静的 Web サイトにはいくつかの制限があります。 たとえば、ヘッダーを構成する場合は、Azure Content Delivery Network (Azure CDN) を使用する必要があります。 静的 Web サイト機能自体の一部としてヘッダーを構成する方法はありません。 また、AuthN と AuthZ はサポートされません。

これらの機能がお使いのシナリオで重要な場合は、Azure Static Web Apps の使用を検討してください。 これは静的 Web サイトに代わる優れた手段であり、コンテンツのレンダリングに Web サーバーが必要ない場合にも適しています。 ヘッダーを構成することができ、AuthN と AuthZ は完全にサポートされています。 Azure Static Web Apps は、GitHub ソースからグローバル デプロイまでのフル マネージドの継続的インテグレーションと継続的デリバリー (CI/CD) ワークフローも提供します。

このビデオでは、Blob Storage で静的 Web サイトをホストする方法について説明します。

ビデオの手順については、次のセクションでも説明します。

[前提条件]

Azure Storage にアクセスするには、Azure サブスクリプションが必要です。 まだサブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください。

Azure Storage へのすべてのアクセスは、ストレージ アカウントを介して行われます。 このクイックスタートでは、 Azure portal、Azure PowerShell、または Azure CLI を使用してストレージ アカウントを作成します。 ストレージ アカウントの作成については、「ストレージ アカウント の作成」を参照してください。

注

静的 Web サイトは、汎用 v2 Standard ストレージ アカウントと、階層型名前空間が有効なストレージ アカウントで使用できるようになりました。

このチュートリアルでは、プログラマ向けの無料ツールである Visual Studio Code を使用して静的 Web サイトを構築し、Azure Storage アカウントにデプロイします。

Visual Studio Code をインストールした後、Azure Storage プレビュー拡張機能をインストールします。 この拡張機能は、Azure Storage 管理機能を Visual Studio Code と統合します。 拡張機能を使用して、静的 Web サイトを Azure Storage にデプロイします。 拡張機能をインストールするには:

  1. Visual Studio Code を起動します。

  2. ツール バーの [ 拡張機能] をクリックします。 Azure Storage を検索し、一覧から Azure Storage 拡張機能を選択します。 次に、[ インストール ] ボタンをクリックして拡張機能をインストールします。

    VS Code に Azure Storage 拡張機能をインストールする

静的な Web サイト ホスティングを構成する

最初の手順では、Azure portal で静的な Web サイトをホストするようにストレージ アカウントを構成します。 静的な Web サイト ホスティング用にアカウントを構成すると、Azure Storage によって $web という名前のコンテナーが自動的に作成されます。 $web コンテナーには、静的 Web サイトのファイルが含まれます。

  1. Web ブラウザーで Azure portal にサインインします。

  2. ストレージ アカウントを見つけて、アカウントの概要を表示します。

  3. 静的 Web サイトの構成ページを表示するには、[静的 Web サイト] を選択します。

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

  5. [ インデックス ドキュメント名 ] フィールドで、 index.htmlの既定のインデックス ページを指定します。 ユーザーが静的 Web サイトのルートに移動すると、既定のインデックス ページが表示されます。

  6. [ エラー ドキュメント パス ] フィールドで、404.htmlの既定のエラー ページ を 指定します。 ユーザーが静的 Web サイトに存在しないページに移動しようとすると、既定のエラー ページが表示されます。

  7. [保存] をクリックします。 これで、Azure portal に静的 Web サイト エンドポイントが表示されます。

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

Hello World Web サイトをデプロイする

次に、Visual Studio Code を使用して Hello World Web ページを作成し、Azure Storage アカウントでホストされている静的 Web サイトにデプロイします。

  1. ローカル ファイル システムに mywebsite という名前の空のフォルダーを作成します。

  2. Visual Studio Code を起動し、[ エクスプローラー ] パネルから先ほど作成したフォルダーを開きます。

    Visual Studio Code でフォルダーを開く

  3. mywebsite フォルダーに既定のインデックス ファイルを作成し、index.html名前を付けます。

    Visual Studio Code で既定のインデックス ファイルを作成する

  4. エディターで index.html を開き、次のテキストをファイルに貼り付けて保存します。

    <!DOCTYPE html>
<html>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

  5. 既定のエラー ファイルを作成し、 404.html名前を付けます。

  6. エディターで 404.html を開き、次のテキストをファイルに貼り付けて保存します。

    <!DOCTYPE html>
<html>
  <body>
    <h1>404</h1>
  </body>
</html>

  7. エクスプローラー パネルで mywebsite フォルダーの下を右クリックし、[静的な Web サイトに展開]を選択します。.. を選択して、Web サイトを展開します。 Azure にログインしてサブスクリプションの一覧を取得するように求められます。

  8. 静的 Web サイトホスティングを有効にしたストレージ アカウントを含むサブスクリプションを選択します。 次に、メッセージが表示されたらストレージ アカウントを選択します。

これで、Visual Studio Code によってファイルが Web エンドポイントにアップロードされ、成功ステータス バーが表示されます。 Web サイトを起動して Azure で表示します。

これで、チュートリアルが正常に完了し、静的な Web サイトが Azure にデプロイされました。

機能のサポート

この機能のサポートは、Data Lake Storage Gen2、ネットワーク ファイルシステム (NFS) 3.0 プロトコル、または SSH ファイル転送プロトコル (SFTP) を有効にすることによって影響を受ける可能性があります。 これらの機能のいずれかを有効にしている場合は、「Azure Storage アカウントでの Blob Storage 機能のサポート」 を参照して、この機能のサポートを評価してください。

次のステップ

このチュートリアルでは、静的 Web サイト ホスティング用に Azure Storage アカウントを構成する方法と、静的 Web サイトを作成して Azure エンドポイントにデプロイする方法について説明しました。

次に、静的 Web サイトでカスタム ドメインを構成する方法について説明します。

カスタム ドメインを Azure Blob Storage エンドポイントにマップする

  • Last updated on