演習 - モジュールを作成して使用する

  • 9 分

玩具ウォンバットの発売のために使用する会社の Web サイトに、コンテンツ配信ネットワーク (CDN) を追加するよう依頼されています。 しかし、社内の他のチームは自分たちに CDN は必要ないと言っています。 この演習では、Web サイトおよび CDN のためのモジュールを作成し、それらのモジュールをテンプレートに追加します。

このプロセスでは、次のことを行います。

  • アプリケーション用のモジュールを追加します。
  • そのモジュールを使用する Bicep テンプレートを作成します。
  • CDN 用に別のモジュールを作成します。
  • その CDN モジュールをオプションとして、テンプレートに追加します。
  • テンプレートを Azure にデプロイします。
  • デプロイ履歴を確認します。

この演習では、Visual Studio Code 用の Bicep 拡張機能を使用します。 この拡張機能を Visual Studio Code にインストールしてください。

空の Bicep ファイルを作成する

  1. Visual Studio Code を開きます。

  2. main.bicep という名前の新しいファイルを作成します。

  3. Visual Studio Code によって Bicep ツールが読み込まれるように、空のファイルを保存します。

    [ファイル]>[名前を付けて保存] を選択するか、Windows で Ctrl+S (macOS では ⌘+S) を選択できます。 ファイルの保存場所を忘れないようにしてください。 たとえば、保存場所として、templates フォルダーを作成することをお勧めします。

アプリケーション用のモジュールを作成する

  1. main.bicep ファイルを作成したフォルダーに、modules という名前の新しいフォルダーを作成します。 modules フォルダーに、app.bicep という名前のファイルを作成します。 ファイルを保存します。

  2. 次のコンテンツを app.bicep ファイルに追加します。

    @description('The Azure region into which the resources should be deployed.')
param location string

@description('The name of the App Service app.')
param appServiceAppName string

@description('The name of the App Service plan.')
param appServicePlanName string

@description('The name of the App Service plan SKU.')
param appServicePlanSkuName string

resource appServicePlan 'Microsoft.Web/serverfarms@2022-03-01' = {
  name: appServicePlanName
  location: location
  sku: {
    name: appServicePlanSkuName
  }
}

resource appServiceApp 'Microsoft.Web/sites@2022-03-01' = {
  name: appServiceAppName
  location: location
  properties: {
    serverFarmId: appServicePlan.id
    httpsOnly: true
  }
}

@description('The default host name of the App Service app.')
output appServiceAppHostName string = appServiceApp.properties.defaultHostName

    このファイルによって、Azure App Service プランとアプリがデプロイされます。 モジュールがかなり汎用的であることに注目してください。 リソースの名前や、App Service プランの SKU が前提として特定されていません。 そのため、このモジュールはさまざまなデプロイで簡単に再利用できます。

  3. 変更をファイルに保存します。

モジュールを Bicep テンプレートに追加する

ここで、app モジュールを開始点として Bicep テンプレートに追加することができます。

  1. main.bicep ファイルを開きます。

  2. このファイルに次のパラメーターと変数を追加します。

    @description('The Azure region into which the resources should be deployed.')
param location string = 'westus3'

@description('The name of the App Service app.')
param appServiceAppName string = 'toy-${uniqueString(resourceGroup().id)}'

@description('The name of the App Service plan SKU.')
param appServicePlanSkuName string = 'F1'

var appServicePlanName = 'toy-product-launch-plan'

    これは、玩具用の Web サイトのためにデプロイする予定のテンプレートなので、もう少し具体的な内容です。 App Service プラン名は変数として定義されます。 SKU パラメーターには、玩具発売用 Web サイトに合った既定値が設定されます。

    ヒント

    location パラメーターを westus3 に設定する必要があることを指定しています。 通常は、resourceGroup().location プロパティを使用して、リソース グループと同じ場所にリソースを作成します。 ただし、Microsoft Learn サンドボックスを使用する場合は、リソース グループの場所と一致しない特定の Azure リージョンを使用する必要があります。

  3. パラメーターの下に、空白行を作成します。 次に、アプリ モジュール定義の最初の行を入力します。

    module app 'modules/app.bicep' = {

    入力すると、Visual Studio Code の Bicep 拡張機能によって、モジュール宣言のスキャフォールディングがサポートされます。 モジュールへのパスを入力し、等号 (=) 文字を入力すると、ポップアップ メニューにいくつかのオプションが表示されます。

  4. ポップアップ メニューから Required properties を選択します。

    Screenshot of Visual Studio Code that shows the option to scaffold a module with its required properties.

  5. モジュール宣言を完成します。

    module app 'modules/app.bicep' = {
  name: 'toy-launch-app'
  params: {
    appServiceAppName: appServiceAppName
    appServicePlanName: appServicePlanName
    appServicePlanSkuName: appServicePlanSkuName
    location: location
  }
}

  6. ファイルの末尾で、出力を定義します。

    @description('The host name to use to access the website.')
output websiteHostName string = app.outputs.appServiceAppHostName

  7. 変更をファイルに保存します。

コンテンツ配信ネットワーク用のモジュールを作成する

  1. modules フォルダーに、cdn.bicep という名前のファイルを作成します。 ファイルを保存します。

  2. 次のコンテンツを cdn.bicep ファイルに追加します。

    @description('The host name (address) of the origin server.')
param originHostName string

@description('The name of the CDN profile.')
param profileName string = 'cdn-${uniqueString(resourceGroup().id)}'

@description('The name of the CDN endpoint')
param endpointName string = 'endpoint-${uniqueString(resourceGroup().id)}'

@description('Indicates whether the CDN endpoint requires HTTPS connections.')
param httpsOnly bool

var originName = 'my-origin'

resource cdnProfile 'Microsoft.Cdn/profiles@2022-11-01-preview' = {
  name: profileName
  location: 'global'
  sku: {
    name: 'Standard_Microsoft'
  }
}

resource endpoint 'Microsoft.Cdn/profiles/endpoints@2022-11-01-preview' = {
  parent: cdnProfile
  name: endpointName
  location: 'global'
  properties: {
    originHostHeader: originHostName
    isHttpAllowed: !httpsOnly
    isHttpsAllowed: true
    queryStringCachingBehavior: 'IgnoreQueryString'
    contentTypesToCompress: [
      'text/plain'
      'text/html'
      'text/css'
      'application/x-javascript'
      'text/javascript'
    ]
    isCompressionEnabled: true
    origins: [
      {
        name: originName
        properties: {
          hostName: originHostName
        }
      }
    ]
  }
}

@description('The host name of the CDN endpoint.')
output endpointHostName string = endpoint.properties.hostName

    このファイルによって 2 つのリソース、つまり、1 つの CDN プロファイルと 1 つの CDN エンドポイントがデプロイされます。

  3. 変更をファイルに保存します。

メイン Bicep テンプレートにモジュールを追加する

  1. main.bicep ファイルを開きます。

  2. appServicePlanSkuName パラメーターの下に、次のパラメーターを追加します。

    @description('Indicates whether a CDN should be deployed.')
param deployCdn bool = true

  3. app モジュール定義の下に、cdn モジュールを定義します。

    module cdn 'modules/cdn.bicep' = if (deployCdn) {
  name: 'toy-launch-cdn'
  params: {
    httpsOnly: true
    originHostName: app.outputs.appServiceAppHostName
  }
}

    このモジュールは、条件が使用されており、deployCdn パラメーターの値が true に設定されている場合にのみデプロイされます。 また、モジュールの originHostName パラメーターは、app モジュールからの appServiceAppHostName 出力の値に設定されます。

  4. 正しいホスト名が選択されるように、ホスト名出力を更新します。 CDN がデプロイされたら、ホスト名が CDN エンドポイントのものになる必要があります。

    output websiteHostName string = deployCdn ? cdn.outputs.endpointHostName : app.outputs.appServiceAppHostName

  5. 変更をファイルに保存します。

Bicep テンプレートを Azure にデプロイする

このテンプレートを Azure にデプロイするには、Visual Studio Code ターミナルから Azure アカウントにサインインする必要があります。 Azure CLI がインストールされていることを確認し、サンドボックスのアクティブ化に使用したのと同じアカウントでサインインします。

  1. [ターミナル] メニューで、[新しいターミナル] を選択します。 通常、ターミナル ウィンドウは画面の下半分に表示されます。

  2. ターミナル ウィンドウの右側に表示されるシェルが Bash の場合、正しいシェルが開いているので、次のセクションに進むことができます。

    Screenshot of the Visual Studio Code terminal window, with the bash option shown.

  3. Bash 以外のシェルが表示された場合は、シェルのドロップダウン矢印を選び、Git Bash を選びます。

    Screenshot of the Visual Studio Code terminal window, with the terminal shell dropdown shown and Git Bash Default selected.

  4. ターミナル シェルの一覧で、Bash を選択します。

    Screenshot of the Visual Studio Code terminal window, with the bash terminal selected.

  5. ターミナルで、テンプレートを保存したディレクトリに移動します。 たとえば、それをテンプレート フォルダーに保存した場合、次のコマンドを使用します。

    cd templates

Bicep をインストールする

次のコマンドを実行して、最新バージョンの Bicep がインストールされていることを確認します。

az bicep install && az bicep upgrade

Azure へのサインイン

  1. Visual Studio Code ターミナルで、次のコマンドを実行して Azure にサインインします。

    az login

  2. 開いたブラウザーで、Azure アカウントにサインインします。

    Visual Studio Code ターミナルには、このアカウントに関連付けられているサブスクリプションの一覧が表示されます。

  3. このセッションで実行するすべての Azure CLI コマンドに対して、既定のサブスクリプションを設定します。

    az account set --subscription "Concierge Subscription"

    注意

    最近、複数のサンドボックスを使用した場合、ターミナルに、"コンシェルジェ サブスクリプション" の複数のインスタンスが表示される場合があります。 その場合は、次の 2 つのステップを使用して、1 つを既定のサブスクリプションとして設定します。 上記のコマンドが正常に実行され、1 つの "コンシェルジェ サブスクリプション" のみがリストされたら、次の 2 つのステップをスキップします。

  4. コンシェルジェ サブスクリプションの ID を取得します。

     az account list \
   --refresh \
   --query "[?contains(name, 'Concierge Subscription')].id" \
   --output table

  5. サブスクリプション ID を使用して、既定のサブスクリプションを設定します。 {your subscription ID} を最新のコンシェルジェ サブスクリプション ID に置き換えます。

    az account set --subscription {your subscription ID}

既定のリソース グループを設定する

Azure CLI を使用する場合は、既定のリソース グループを設定し、この演習の残りの Azure CLI コマンドでパラメーターを省略できます。 サンドボックス環境で自分用に作成されたリソース グループに、既定値を設定します。

az configure --defaults group="<rgn>[sandbox resource group name]</rgn>"

テンプレートを Azure にデプロイする

Visual Studio Code のターミナルから次のコードを実行して、Bicep テンプレートを Azure にデプロイします。 このプロセスは、完了までに 1、2 分かかることがあります。その後、デプロイの成功が示されます。

az deployment group create --template-file main.bicep

ターミナルに状態 Running... が表示されます。

このテンプレートを Azure にデプロイするには、Visual Studio Code ターミナルから Azure アカウントにサインインします。 Azure PowerShell をインストールしたことを確認し、サンドボックスをアクティブ化したのと同じアカウントにサインインします。

  1. [ターミナル] メニューで、[新しいターミナル] を選択します。 通常、ターミナル ウィンドウは画面の下半分に表示されます。

  2. ターミナル ウィンドウの右側に表示されるシェルが powershell または pwsh の場合、正しいシェルが開いているので、次のセクションに進むことができます。

    Screenshot of the Visual Studio Code terminal window, with the pwsh option displayed in the shell dropdown list.

  3. Powershell または pwsh 以外のシェルが表示される場合は、シェルのドロップダウン矢印を選び、PowerShell を選びます。

    Screenshot of the Visual Studio Code terminal window, with the terminal shell dropdown list shown and PowerShell selected.

  4. ターミナル シェルの一覧で、Powershell または pwsh を選択します。

    Screenshot of the Visual Studio Code terminal window, with the PowerShell terminal selected.

  5. ターミナルで、テンプレートを保存したディレクトリに移動します。 たとえば、それをテンプレート フォルダーに保存した場合、次のコマンドを使用します。

    Set-Location -Path templates

Bicep CLI のインストール

Azure PowerShell で Bicep を使用するには、Bicep CLI をインストールします。

Azure PowerShell を使用して Azure にサインインする

  1. Visual Studio Code ターミナルで、次のコマンドを実行します。

    Connect-AzAccount

    ブラウザーが開き、Azure アカウントにサインインできるようになります。

  2. Azure にサインインすると、ターミナルに、このアカウントに関連付けられているサブスクリプションの一覧が表示されます。

    サンドボックスをアクティブにした場合は、"コンシェルジェ サブスクリプション" という名前のサブスクリプションが表示されます。 演習の残りの部分では、これを使用します。

  3. このセッションで実行するすべての Azure PowerShell コマンドについて既定のサブスクリプションを設定します。

    $context = Get-AzSubscription -SubscriptionName 'Concierge Subscription'
Set-AzContext $context

    注意

    最近、複数のサンドボックスを使用した場合、ターミナルに、"コンシェルジェ サブスクリプション" の複数のインスタンスが表示される場合があります。 その場合は、次の 2 つのステップを使用して、1 つを既定のサブスクリプションとして設定します。 上記のコマンドが正常に実行され、1 つの "コンシェルジェ サブスクリプション" のみがリストされたら、次の 2 つのステップをスキップします。

  4. サブスクリプション ID を取得します。 次のコマンドを実行すると、ご使用のサブスクリプションとその ID が一覧表示されます。 Concierge Subscription を探して、2 番目の列から ID をコピーします。 これは、cf49fbbc-217c-4eb6-9eb5-a6a6c68295a0 のように表示されます。

    Get-AzSubscription

  5. アクティブなサブスクリプションを "コンシェルジェ サブスクリプション" に変更します。 必ず、"{ご使用のサブスクリプションの ID}" を、コピーした ID に置き換えてください。

    $context = Get-AzSubscription -SubscriptionId {Your subscription ID}
Set-AzContext $context

既定のリソース グループを設定する

この演習では、既定のリソース グループを設定し、残りの Azure PowerShell コマンドからパラメーターを省略できます。 サンドボックス環境で自分用に作成されたリソース グループに、この既定値を設定します。

Set-AzDefault -ResourceGroupName <rgn>[sandbox resource group name]</rgn>

テンプレートを Azure にデプロイする

ターミナルで、以下の Azure PowerShell コマンドを使用して Azure にテンプレートをデプロイします。 完了までに 1、2 分かかることがあります。その後、デプロイの成功が示されます。

New-AzResourceGroupDeployment -TemplateFile main.bicep

デプロイ履歴を確認する

  1. Azure portal にアクセスして、サンドボックス サブスクリプション内にいることを確認します。

    1. それには、ページの右上隅にある自分のアバターを選択します。
    2. [ディレクトリの切り替え] を選択します。 リストで、[Microsoft Learn サンドボックス] ディレクトリを選択します。

  2. 左側のパネルで、[リソース グループ] を選択します。

  3. [サンドボックス リソース グループ名] を選択します。

  4. 左側のメニューで [デプロイ] を選択します。

    Screenshot of the Azure portal that shows the resource group, with the Deployments menu item highlighted.

    3 つのデプロイが一覧表示されます。

  5. main デプロイを選択し、[デプロイの詳細] を展開します。

    両方のモジュールが一覧表示されており、それらのタイプが Microsoft.Resources/deployments として表示されています。 モジュールが二度表示されているのは、それらの出力もテンプレート内で参照されるためです。

    Screenshot of the Azure portal that shows the deployment details for the main deployment.

  6. toy-launch-cdn および toy-launch-app デプロイを選択し、それぞれでデプロイされたリソースを確認します。 これらが、それぞれのモジュールで定義されているリソースに対応していることに注目してください。

Web サイトのテスト

  1. toy-launch-app デプロイを選択します。

  2. [出力] を選択します。

    Screenshot of the Azure portal that shows the deployment, with the Outputs menu item highlighted.

  3. appServiceAppHostName 出力のコピー ボタンを選択します。

  4. 新しいブラウザー タブで、前の手順でコピーしたアドレスに移動してみます。 https:// で始まるアドレスを指定する必要があります。

    Screenshot of the web app's welcome page, with the address bar showing the App Service host name.

    App Service ウェルカム ページが表示されて、アプリが正常にデプロイされたことが示されます。

  5. main デプロイに移動し、[出力] を選択します。

  6. websiteHostName 出力の値をコピーします。 このホスト名は、Azure Content Delivery Network ホスト名であるため、異なるものであることに留意してください。

  7. 新しいブラウザー タブで、前の手順でコピーしたホスト名に移動してみます。 アドレスの先頭に https:// を追加します。

    CDN エンドポイントがアクティブになるまで数分かかります。 "ページが見つかりません" というエラーが表示された場合は、数分待ってから、もう一度リンクを貼り付けてください。 また、HTTPS が使用されるように、URL の先頭に https:// を追加してあることを確認してください。

    CDN エンドポイントがアクティブな場合は、同じ App Service ウェルカム ページが表示されます。 今回は、Web サイトのパフォーマンスの向上に役立つ、Azure Content Delivery Network サービスを介して表示されています。

    Screenshot of the web app's welcome page, with the address bar showing the CDN endpoint.