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

1. Azure portal にサインインする

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

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

   

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

5. インデックス文書名フィールドでデフォルトのインデックスページ(例: index.html)を入力します。

   デフォルトのインデックスページは、静的ウェブサイトのルートにアクセスすると表示されます。

6. エラー文書パスフィールドにデフォルトのエラーページ(例: 404.html)を入力します。

   デフォルトのエラーページは、静的ウェブサイトに存在しないページに移動したときに表示されます。

7. 静的サイト設定を完了するために 「保存 」を選択してください。

   

8. 設定を保存すると、確認メッセージが表示されます。 概要パネルには、静的なウェブサイトエンドポイントやその他の設定情報が表示されます。

   

Azure CLI を使用して、静的 Web サイトのホスティングを有効にすることができます。

1. まず、Azure Cloud Shell を開きます。または、Azure CLI をローカルにインストールした場合は、Windows PowerShell などのコマンド コンソール アプリケーションを開きます。

2. もしあなたの身元が複数のサブスクリプションに紐づいている場合は、アクティブなサブスクリプションを静的ウェブサイトをホストするストレージアカウントのサブスクリプションに設定してください。 <subscription-id> プレースホルダーの値をサブスクリプションの ID に置き換えます。

   az account set --subscription <subscription-id>
   

   <subscription-id> プレースホルダーの値をサブスクリプションの ID に置き換えます。

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

   az storage blob service-properties update --account-name <storage-account-name> --static-website --404-document <error-document-name> --index-document <index-document-name>
   

   • <storage-account-name> プレースホルダーの値は、実際のストレージ アカウントの名前に置き換えます。

   • <error-document-name>のプレースホルダーを、存在しないページをブラウザがリクエストした際に表示されるエラードキュメントの名前に置き換えてください。

   • <index-document-name>プレースホルダーをインデックス ドキュメントの名前に置き換えます。 この文書は一般的に index.htmlされています。

Azure PowerShell モジュールを使用して、静的 Web サイトのホスティングを有効にすることができます。

1. Windows PowerShell コマンド ウィンドウを開きます。

2. Azure PowerShell モジュール Az バージョン 0.7 以降があることを確認します。

   Get-InstalledModule -Name Az -AllVersions | Select-Object Name, Version
   

   インストールまたはアップグレードする必要がある場合は、Azure PowerShell モジュールのインストールに関するページを参照してください。

3. Connect-AzAccount コマンドを使用して Azure サブスクリプションにサインインし、画面上の指示に従います。

   Connect-AzAccount
   

4. もしあなたの身元が複数のサブスクリプションに紐づいている場合は、アクティブなサブスクリプションを静的ウェブサイトをホストするストレージアカウントのサブスクリプションに設定してください。

   $context = Get-AzSubscription -SubscriptionId <subscription-id>
   Set-AzContext $context
   

   <subscription-id> プレースホルダーの値をサブスクリプションの ID に置き換えます。

5. 使用するストレージ アカウントを定義するストレージ アカウント コンテキストを取得します。

   $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -AccountName "<storage-account-name>"
   $ctx = $storageAccount.Context
   

   • <resource-group-name> プレースホルダーの値を、リソース グループの名前に置き換えます。

   • <storage-account-name> プレースホルダーの値は、実際のストレージ アカウントの名前に置き換えます。

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

   Enable-AzStorageStaticWebsite -Context $ctx -IndexDocument <index-document-name> -ErrorDocument404Path <error-document-name>
   

   • <error-document-name>のプレースホルダーを、存在しないページをブラウザがリクエストした際に表示されるエラードキュメントの名前に置き換えてください。

   • <index-document-name>プレースホルダーをインデックス ドキュメントの名前に置き換えます。 この文書は一般的に index.htmlされています。

次の手順では、Azure portal を使用してファイルをアップロードする方法を示します。 また、AzCopy、Azure PowerShell、Azure CLI、またはカスタムアプリケーションを使ってアカウントの$webコンテナにファイルをアップロードすることも可能です。 Visual Studio Codeを使ってファイルをアップロードするステップバイステップのチュートリアルについては、「Tutorial: Hosting a static website on Blob Storage」をご覧ください。

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

2. コンテナペインで$webコンテナを選択して、そのコンテナの概要ペインを開きます。

   

3. 概要パネルで「アップロード」を選択します。 アップロードブロブペインでファイル欄を選択し、ファイルブラウザを開きます。 ファイルに移動し、選択してから 「開く」を選びます。 ファイル が既に存在する場合は、オプションで「上書き」を選択することもできます。

   

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

   

   注

   このプロパティは、text/htmlなどの一般的に認識される拡張機能の.htmlに自動的に設定されます。 ただし、場合によっては自分で設定する必要があるかもしれません。 このプロパティを text/htmlに設定しなければ、ブラウザはユーザーにファイルのダウンロードを促し、内容をレンダリングしません。 このプロパティは前のステップで設定できます。

ソースディレクトリから $web コンテナにオブジェクトをアップロードします。

この例では、Azure Cloud Shellセッションからコマンドを実行していることを前提としています。

az storage blob upload-batch -s <source-path> -d '$web' --account-name <storage-account-name>

• <storage-account-name> プレースホルダーの値は、実際のストレージ アカウントの名前に置き換えます。

• <source-path>プレースホルダーを、アップロードするファイルの場所へのパスに置き換えます。

ソースディレクトリから $web コンテナにオブジェクトをアップロードします。

# Upload a file
Set-AzStorageBlobContent -File "<path-to-file>" `
   -Container '$web' `
   -Blob "<blob-name>" `
   -Context $ctx

• <path-to-file>のプレースホルダー値をアップロードしたいファイルの完全修飾パス(例:C:\temp\index.html)に置き換えます。

• <blob-name>のプレースホルダー値を、結果として生成されたブロブに付けたい名前(例:index.html)に置き換えます。

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

次のコマンドを使用して、静的 Web サイトのパブリック URL を見つけます。

az storage account show -n <storage-account-name> -g <resource-group-name> --query "primaryEndpoints.web" --output tsv

• <storage-account-name> プレースホルダーの値は、実際のストレージ アカウントの名前に置き換えます。

• <resource-group-name> プレースホルダーの値を、リソース グループの名前に置き換えます。

次のコマンドを使用して、静的 Web サイトのパブリック URL を見つけます。

 $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -Name "<storage-account-name>"
Write-Output $storageAccount.PrimaryEndpoints.Web

• <resource-group-name> プレースホルダーの値を、リソース グループの名前に置き換えます。

• <storage-account-name> プレースホルダーの値は、実際のストレージ アカウントの名前に置き換えます。