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

[アーティクル]
06/01/2023

このチュートリアルでは、静的な 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 を使用して、ストレージアカウントを作成します。ストレージアカウントの作成については、「ストレージアカウントの作成」を参照してください。

Note

汎用 v2 Standard ストレージアカウントだけでなく、階層型名前空間が有効になっているストレージアカウントでも、静的 Web サイトを使用できます。

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

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

Visual Studio Code を起動します。
ツールバーの [拡張機能] をクリックします。 Azure Storage を検索し、リストで [Azure Storage] の拡張機能を選択します。次に、[インストール] ボタンをクリックして拡張機能をインストールします。

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

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

Web ブラウザーで、Azure portal にサインインします。
ストレージアカウントを見つけて、アカウントの概要を表示します。
[静的な Web サイト] を選択して、静的な Web サイトの構成ページを表示します。
[有効] を選択して、ストレージアカウントに対して静的な Web サイトホスティングを有効にします。
[インデックスドキュメント名] フィールドで、index.html の既定のインデックスページを指定します。既定のインデックスページは、ユーザーが静的な Web サイトのルートに移動したときに表示されます。
[エラードキュメントのパス] フィールドで、404.html の既定のエラーページを指定します。既定のエラーページは、ユーザーが静的な Web サイトに存在しないページに移動しようとしたときに表示されます。
[保存] をクリックします。これで、Azure ポータルで静的な Web サイトのエンドポイントが表示されるようになります。

Hello World Web アプリをデプロイする

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

ローカルファイルシステムで mywebsite という名前の空のフォルダーを作成します。
Visual Studio Code を起動して、[エクスプローラー] パネルから先ほど作成したフォルダーを開きます。
mywebsite フォルダーに既定のインデックスファイルを作成し、index.html という名前を付けます。
エディターで index.html を開き、以下のテキストをファイルに貼り付けて保存します。
```
<!DOCTYPE html>
<html>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>
```
既定のエラーファイルを作成し、404.html という名前を付けます。
エディターで 404.html を開き、以下のテキストをファイルに貼り付けて保存します。
```
<!DOCTYPE html>
<html>
  <body>
    <h1>404</h1>
  </body>
</html>
```
[エクスプローラー] パネルの mywebsite フォルダーの下を右クリックし、[Deploy to Static Website...](静的な Web サイトにデプロイ...) を選択して Web サイトをデプロイします。 Azure にログインしてサブスクリプションのリストを取得することを求めるプロンプトが表示されます。
静的な Web サイトホスティングを有効にしたストレージアカウントを含むサブスクリプションを選択します。次に、プロンプトが表示されたらストレージアカウントを選択します。

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

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

機能サポート

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

次の手順

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

次は、静的な Web サイトでカスタムドメインを構成する方法を学習しましょう。

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