演習 - BLOB ストレージに静的な Web サイトをデプロイする

コンテンツ配信ネットワークを確認する前に、モジュール全体で使用する Azure Storage に静的な Web サイトをデプロイしましょう。

Azure Cloud Shell でストレージ アカウントを作成する

まず、静的なサイトをホストする新しいストレージ アカウントを作成します。 完了したら、コンテンツ配信ネットワークを介して、このサイトにアクセスします。

無料のサンドボックスを使用すると、Azure グローバル リージョンのサブセットにリソースを作成できます。 リソースを作成するときは、次のリストからリージョンを選択します。

  • westus2
  • southcentralus
  • centralus
  • eastus
  • westeurope
  • southeastasia
  • japaneast
  • brazilsouth
  • australiasoutheast
  • centralindia
  1. Azure Cloud Shell で以下のコマンドを実行し、storage-preview 拡張機能をインストールします。 CLI から静的な Web サイトを管理するには、この Azure CLI 拡張機能が必要です。 右側の Cloud Shell ターミナル ウィンドウで、次のコマンドを実行します。

          az extension add --name storage-preview
    
  2. Cloud Shell で次のコマンドを実行し、シェル変数をいくつか設定します。 このモジュール全体でこれらの変数を使用して、ストレージ アカウント名などの項目を作成します。 <location> は、上記のリストにある場所のいずれかに置き換えます。

        STORAGE_ACCOUNT_NAME="cdnsitestorage$RANDOM" \
        RESOURCE_GROUP=<rgn>[sandbox resource group name]</rgn> \
        LOCATION=<location>
    
  3. Cloud Shell で次のコマンドを実行して、ストレージ アカウントを作成します。

          az storage account create \
            --name $STORAGE_ACCOUNT_NAME \
            --resource-group $RESOURCE_GROUP \
            --location $LOCATION \
            --sku Standard_LRS \
            --kind StorageV2
    
  4. 出力で、"primaryEndpoints" Web URL を見つけ、それをコピーし、Web ブラウザーでリンクを開きます。 開かれるページには、"要求されたコンテンツが存在しない" ことが示されます。 このタブを開いたまま、静的コンテンツをデプロイしてから、ページを更新します。

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

  1. Cloud Shell で、次のコマンドを実行し、ストレージ アカウントで静的な Web サイト ホスティングを有効にします。

          az storage blob service-properties update \
            --account-name $STORAGE_ACCOUNT_NAME \
            --static-website \
            --404-document 404.html \
            --index-document index.html
    

    出力の最後に、次のエントリが表示されるはずです。

     "staticWebsite": {
        "enabled": true,
        "errorDocument_404Path": "404.html",
        "indexDocument": "index.html"
      }
    
  2. 静的な Web サイトが表示されているブラウザー タブに切り替え、それを更新します。 要求されたコンテンツが存在しないことを示すメッセージが表示されます。

静的な Web サイトにファイルをアップロードする

  1. Web サイトのファイルをアップロードするには、次のコマンドを実行します。
      git clone https://github.com/MicrosoftDocs/mslearn-create-cdn-static-resources-blob-storage source
  1. source/website-files フォルダーに移動します
    cd source/website-files
  1. その後、それらのファイルを $web BLOB ストレージ コンテナーにアップロードします。
    az storage blob upload-batch -s . -d \$web --account-name $STORAGE_ACCOUNT_NAME

Web サイトのパブリケーションを確認する

  1. 先ほど開いた Web サイトに切り替え、ページを更新します (通常は F5 キーを押します)。 ランディング ページと画像が表示されます。