Azure にオンプレミスのアプリケーションをリビルドするRebuild an on-premises application in Azure

この記事では、Contoso という架空の会社が、Azure への移行の一環として、VMware 仮想マシン (VM) 上で実行される 2 階層の Windows .NET アプリケーションをリビルドする方法を説明します。This article demonstrates how the fictional company Contoso rebuilds a two-tier Windows .NET application that's running on VMware virtual machines (VMs) as part of a migration to Azure. Contoso は、フロントエンド VM を、Azure App Service Web アプリに移行します。Contoso migrates the front-end VM to an Azure App Service web app. Contoso は、アプリケーションのバックエンドを、Azure Kubernetes Service (AKS) によって管理されるコンテナーにデプロイされたマイクロサービスを使用してビルドします。Contoso builds the application back end by using microservices that are deployed to containers managed by Azure Kubernetes Service (AKS). サイトは、ペットの写真の機能を提供する Azure Functions と対話します。The site interacts with Azure Functions to provide pet photo functionality.

この例で使用される SmartHotel360 アプリケーションは、オープン ソースとして提供されています。The SmartHotel360 application used in this example is provided as open source. 独自のテスト目的に沿って使用する場合は、GitHub からダウンロードできます。If you want to use it for your own testing purposes, you can download it from GitHub.

ビジネス ドライバーBusiness drivers

Contoso の IT リーダーシップ チームは、ビジネス パートナーと密接に連絡を取り合い、彼らがこの移行で何を達成しようとしているのかを理解しました。The Contoso IT leadership team has worked closely with business partners to understand what they want to achieve with this migration:

  • ビジネスの成長への対応。Address business growth. Contoso は成長を続けており、Contoso の Web サイトで、差別化されたエクスペリエンスを顧客に提供したいと考えています。Contoso is growing and wants to provide differentiated experiences for customers on Contoso websites.
  • 機敏である。Be agile. Contoso は、グローバル経済で成功を収めるために、より迅速に市場の変化に対応できる必要があります。Contoso must be able to react faster than the changes in the marketplace to enable their success in a global economy.
  • スケール。Scale. ビジネスが順調に成長していく中で、Contoso IT チームは、同じペースで拡張可能なシステムを提供する必要があります。As the business grows successfully, the Contoso IT team must provide systems that can grow at the same pace.
  • コストを削減する。Reduce costs. Contoso はライセンス コストを最小限に抑えたいと考えています。Contoso wants to minimize licensing costs.

移行の目標Migration goals

Contoso クラウド チームは、この移行のためのアプリケーションの要件を設定しました。The Contoso cloud team has pinned down application requirements for this migration. これらの要件を使用して、最良の移行方法を決定しました。These requirements were used to determine the best migration method:

  • このアプリケーションは、オンプレミスにおける現状と同様、Azure でもクリティカルなものとなります。The application in Azure must remain as critical as it is today on-premises. 優れたパフォーマンスを発揮し、容易にスケールできる必要があります。It should perform well and scale easily.
  • このアプリケーションでは、サービスとしてのインフラストラクチャ (IaaS) コンポーネントを使用しません。The application shouldn't use infrastructure as a service (IaaS) components. サービスとしてのプラットフォーム (PaaS) またはサーバーレス サービスを使用するようにすべてをビルドする必要があります。Everything should be built to use platform as a service (PaaS) or serverless services.
  • アプリケーションのビルドはクラウド サービスで実行する必要があり、コンテナーはクラウド内のプライベートなエンタープライズ規模のレジストリに存在する必要があります。Application builds should run in cloud services, and containers should reside in a private, enterprise-wide registry in the cloud.
  • アプリケーションで下された決定がホテルで受け入れられる必要があるため、ペットの写真に使用される API サービスは正確かつ実世界で信頼できるものである必要があります。The API service that's used for pet photos should be accurate and reliable in the real world, because decisions made by the application must be honored in their hotels. アクセス権を付与されたペットは、ホテルでの滞在を許可されます。Any pet granted access is allowed to stay at the hotels.
  • DevOps パイプラインの要件を満たすために、Contoso ではソース コード管理に Azure Repos の Git リポジトリを使用します。To meet requirements for a DevOps pipeline, Contoso will use a Git repository in Azure Repos for source code management. コードのビルドと Azure App Service、Azure Functions、および AKS へのデプロイには、自動ビルドとリリースが使用されます。Automated builds and releases will be used to build code and deploy to Azure App Service, Azure Functions, and AKS.
  • バックエンドのマイクロサービスと、フロントエンドの Web サイトに対して、別個の継続的インテグレーションと継続的デプロイ (CI/CD) パイプラインが必要です。Separate continuous integration/continuous development (CI/CD) pipelines are needed for microservices on the back end and for the website on the front end.
  • バックエンド サービスとフロントエンド Web アプリとでは、リリース サイクルが異なります。The back-end services and the front-end web app have different release cycles. この要件を満たすため、Contoso は 2 つの異なるパイプラインをデプロイすることになります。To meet this requirement, Contoso will deploy two different pipelines.
  • Contoso では、すべてのフロント エンド Web サイトのデプロイには上長の承認が必要であり、CI/CD パイプラインではこれを提供する必要があります。Contoso needs management approval for all front-end website deployment, and the CI/CD pipeline must provide this.

ソリューション設計Solution design

Contoso は目標と要件を決定した後、デプロイ ソリューションを設計およびレビューし、移行に使用する Azure サービスを含め、移行プロセスを決めます。After pinning down their goals and requirements, Contoso designs and reviews a deployment solution, and identifies the migration process, including the Azure services that will be used for the migration.

現在のアプリケーションCurrent application

  • SmartHotel360 オンプレミス アプリケーションは 2 つの VM (WEBVMSQLVM) に階層化されています。The SmartHotel360 on-premises application is tiered across two VMs (WEBVM and SQLVM).
  • これらの VM は、VMware ESXi ホスト contosohost1.contoso.com (バージョン 6.5) 上に配置されています。The VMs are located on VMware ESXi host contosohost1.contoso.com (version 6.5).
  • VMware 環境は、VM で実行中のvCenter Server 6.5 (vcenter.contoso.com) によって管理されています。The VMware environment is managed by vCenter Server 6.5 (vcenter.contoso.com), running on a VM.
  • Contoso には、オンプレミスのデータセンター (contoso-datacenter) があり、オンプレミスのドメイン コントローラー (contosodc1) が含まれています。Contoso has an on-premises datacenter (contoso-datacenter), with an on-premises domain controller (contosodc1).
  • Contoso データセンター内のオンプレミス VM は、移行が行われた後に使用停止にされます。The on-premises VMs in the Contoso datacenter will be decommissioned after the migration is done.

提案されたアーキテクチャProposed architecture

  • アプリケーションのフロントエンドは、プライマリ Azure リージョンに Azure App Service の Web アプリとしてデプロイされます。The front end of the application is deployed as an Azure App Service web app in the primary Azure region.

  • Azure 関数がペットの写真をアップロードし、サイトはこの機能と対話します。An Azure function provides uploads of pet photos, and the site interacts with this functionality.

  • ペットの写真の関数には、Azure Cosmos DB と共に Azure Cognitive Services の Computer Vision API が使用されています。The pet photo function uses the Computer Vision API of Azure Cognitive Services along with Azure Cosmos DB.

  • サイトのバックエンドは、マイクロ サービスを使用してビルドされます。The back end of the site is built by using microservices. これらのマイクロサービスは、AKS で管理されるコンテナーにデプロイされます。These microservices will be deployed to containers that are managed in AKS.

  • コンテナーは Azure DevOps を使用してビルドされ、Azure Container Registry にプッシュされます。Containers will be built using Azure DevOps and then pushed to Azure Container Registry.

  • Contoso は当面、Visual Studio を使用して Web アプリと関数コードを手動でデプロイする予定です。For now, Contoso will manually deploy the web app and function code by using Visual Studio.

  • マイクロサービスは、Kubernetes コマンドライン ツールを呼び出す PowerShell スクリプトを使用してデプロイします。Contoso will deploy microservices by using a PowerShell script that calls Kubernetes command-line tools.

    Azure への移行シナリオのアーキテクチャ図。Diagram of scenario architecture for migration to Azure.
    "図 1:シナリオのアーキテクチャFigure 1: Scenario architecture.

ソリューションのレビューSolution review

Contoso は、長所と短所の一覧をまとめて、提案されたデザインを評価します。Contoso evaluates the proposed design by putting together a pros and cons list.

考慮事項Consideration 詳細Details
長所Pros Contoso はエンドツーエンドのデプロイに PaaS とサーバーレス ソリューションを使用することで、管理に要する時間を大幅に削減できます。Using PaaS and serverless solutions for the end-to-end deployment significantly reduces the management time that Contoso must provide.

マイクロサービス ベースのアーキテクチャへの移行により、Contoso は時間の経過と共にソリューションを容易に拡張できるようになります。Moving to a microservices-based architecture allows Contoso to easily extend the solution over time.

新しい機能は、既存のソリューションのコード ベースを妨げることなくオンライン状態にすることができます。New functionality can be brought online without disrupting any of the existing solutions' code bases.

Web アプリは複数のインスタンスで構成されるため、単一障害点は生まれません。The web app will be configured with multiple instances, with no single point of failure.

アプリケーションがさまざまなトラフィック量を処理できるように、自動スケールが有効化されます。Autoscaling will be enabled so that the application can handle differing traffic volumes.

PaaS サービスへの移行に伴い、Contoso は Windows Server 2008 R2 オペレーティング システム上で実行されている古いソリューションを廃止できます。With the move to PaaS services, Contoso can retire out-of-date solutions that run on the Windows Server 2008 R2 operating system.

Azure Cosmos DB にはフォールト トレランスが組み込まれており、Contoso による構成は必要ありません。Azure Cosmos DB has built-in fault tolerance, which requires no configuration by Contoso. これは、データ層が単一のフェールオーバー ポイントでなくなることを意味します。This means that the data tier is no longer a single point of failover.
短所Cons コンテナーは他の移行オプションより複雑です。Containers are more complex than other migration options. Contoso にとって、学習曲線が問題になる可能性があります。The learning curve could be an issue for Contoso. この曲線にもかかわらず、Contoso は価値を提供する新しいレベルの複雑さを導入します。They introduce a new level of complexity that provides value in spite of the curve.

Azure、コンテナー、アプリケーションのマイクロサービスを理解し、サポートする Contoso の運用チームを立ち上げる必要があります。The operations team at Contoso needs to ramp up to understand and support Azure, containers, and microservices for the application.

Contoso は、ソリューション全体の DevOps を完全に実装していません。Contoso hasn't fully implemented DevOps for the entire solution. Contoso は、AKS、Azure Functions、および Azure App Service へのサービスのデプロイで、そのことを考慮する必要があります。Contoso needs to consider that for the deployment of services to AKS, Azure Functions, and Azure App Service.

移行プロセスMigration process

  1. Contoso では、Azure Container Registry、AKS、および Azure Cosmos DB をプロビジョニングします。Contoso provisions Azure Container Registry, AKS, and Azure Cosmos DB.

  2. デプロイ用のインフラストラクチャ (Azure App Service Web アプリ、ストレージ アカウント、関数、API を含む) をプロビジョニングします。Contoso provisions the infrastructure for the deployment, including the Azure App Service web app, storage account, function, and API.

  3. インフラストラクチャの準備が整ったら、Azure DevOps を使用してマイクロサービスのコンテナー イメージをビルドし、コンテナー レジストリにプッシュします。After the infrastructure is in place, Contoso builds their microservices container images by using Azure DevOps, which pushes the images to the container registry.

  4. Contoso は、PowerShell スクリプトを使用してこれらのマイクロサービスを AKS にデプロイします。Contoso deploys these microservices to AKS by using a PowerShell script.

  5. 最後に、関数と Web アプリをデプロイします。Finally, Contoso deploys the function and web app.

    移行プロセスの図 (準備からクラウドへのデプロイまで)。Diagram of the migration process from preparation to deployment in the cloud.
    "図 2:移行プロセスFigure 2: The migration process.

Azure サービスAzure services

サービスService 説明Description コストCost
AKSAKS Kubernetes の管理、デプロイ、操作を簡略化します。Simplifies Kubernetes management, deployment, and operations. 完全に管理された Kubernetes コンテナー オーケストレーション サービスを提供します。Provides a fully managed Kubernetes container orchestration service. AKS は無料サービスです。AKS is a free service. VM と、関連するストレージおよびネットワーク リソースの使用した分に対してのみ料金が発生します。Pay for only the VMs and the associated storage and networking resources that are consumed. 詳細については、こちらを参照してくださいLearn more.
Azure FunctionsAzure Functions イベント ドリブン型のサーバーレス コンピューティング エクスペリエンスにより、開発を高速化できます。Accelerates development with an event-driven, serverless compute experience. オンデマンドでスケールできます。Scale on demand. 使用したリソースに対してのみ料金が発生します。Pay only for consumed resources. プランでは、1 秒あたりのリソースの使用量と実行回数に基づいて課金されます。Plan is billed based on per-second resource consumption and executions. 詳細については、こちらを参照してくださいLearn more.
Azure Container RegistryAzure Container Registry あらゆる種類のコンテナー デプロイのイメージを保存します。Stores images for all types of container deployments. コストは機能、ストレージ、使用期間に基づいて発生します。Cost is based on features, storage, and usage duration. 詳細については、こちらを参照してくださいLearn more.
Azure App ServiceAzure App Service あらゆるプラットフォームで実行されるエンタープライズグレードの Web アプリ、モバイル アプリ、API アプリをすばやくビルド、デプロイ、スケーリングできます。Quickly build, deploy, and scale enterprise-grade web, mobile, and API apps that run on any platform. App Service プランは、1 秒単位で課金されます。App Service plans are billed on a per-second basis. 詳細については、こちらを参照してくださいLearn more.

前提条件Prerequisites

このシナリオで Contoso に必要なことを以下に示します。Here's what Contoso needs for this scenario:

必要条件Requirements 詳細Details
Azure サブスクリプションAzure subscription
  • 前の記事で、Contoso はサブスクリプションを作成しました。Contoso created subscriptions in an earlier article. Azure サブスクリプションをお持ちでない場合は、無料アカウントを作成してください。If you don't have an Azure subscription, create a free account.
  • 無料アカウントを作成する場合、サブスクリプションの管理者としてすべてのアクションを実行できます。If you create a free account, you're the admin of your subscription and can perform all actions.
  • 既存のサブスクリプションを使用するものの、管理者でない場合は、管理者に依頼して所有者アクセス許可または共同作成者アクセス許可を自分に割り当ててもらう必要があります。If you use an existing subscription and you're not the admin, you need to work with the admin to assign Owner or Contributor permissions to you.
  • Azure インフラストラクチャAzure infrastructure
  • Contoso で Azure インフラストラクチャを設定する方法を確認してください。Learn how Contoso set up an Azure infrastructure.
  • 開発者の前提条件Developer prerequisites Contoso は、開発者用ワークステーションに次のツールをインストールする必要があります。Contoso needs the following tools on a developer workstation:
  • Visual Studio Community 2017 バージョン 15.5Visual Studio Community 2017 version 15.5
  • .NET ワークロードが有効.NET workload, enabled
  • GitGit
  • Azure PowerShellAzure PowerShell
  • Azure CLIThe Azure CLI
  • Docker Community Edition (Windows 10) または Docker Enterprise Edition (Windows Server) が Windows コンテナーを使用するように設定済みDocker Community Edition (Windows 10) or Docker Enterprise Edition (Windows Server), set to use Windows containers
  • シナリオのステップScenario steps

    Contoso が移行を実行する方法を次に示します。Here's how Contoso will run the migration:

    • ステップ 1:AKS と Azure Container Registry をプロビジョニングする。Step 1: Provision AKS and Azure Container Registry. Contoso は PowerShell を使用して、マネージド AKS クラスターとコンテナー レジストリをプロビジョニングします。Contoso provisions the managed AKS cluster and the container registry by using PowerShell.
    • 手順 2:Docker コンテナーをビルドする。Step 2: Build Docker containers. Contoso は、Azure DevOps を使用して Docker コンテナーの継続的インテグレーション (CI) を設定し、それらのコンテナーをコンテナー レジストリにプッシュします。Contoso sets up continuous integration (CI) for Docker containers by using Azure DevOps and pushes the containers to the container registry.
    • ステップ 3:バックエンドのマイクロサービスをデプロイする。Step 3: Deploy back-end microservices. Contoso は、バックエンドのマイクロサービスによって使用される、残りのインフラストラクチャをデプロイします。Contoso deploys the rest of the infrastructure that will be used by back-end microservices.
    • 手順 4:フロントエンドのインフラストラクチャをデプロイする。Step 4: Deploy front-end infrastructure. Contoso は、フロントエンドのインフラストラクチャ (ペットの写真用の Blob Storage、Azure Cosmos DB、Computer Vision API を含む) をデプロイします。Contoso deploys the front-end infrastructure, including Blob storage for the pet phones, Azure Cosmos DB, and the Computer Vision API.
    • 手順 5:バックエンドを移行する。Step 5: Migrate the back end. Contoso は、マイクロサービスをデプロイして AKS 上で実行し、バックエンドを移行します。Contoso deploys microservices and runs them on AKS to migrate the back end.
    • 手順 6:フロントエンドを公開する。Step 6: Publish the front end. Contoso は、SmartHotel360 アプリケーションを、Azure App Service と、ペット サービスによって呼び出される関数アプリに公開します。Contoso publishes the SmartHotel360 application to Azure App Service along with the function app to be called by the pet service.

    バックエンド リソースをプロビジョニングするProvision back-end resources

    Contoso の管理者は、AKS と Azure Container Registry を使用して、マネージド Kubernetes クラスターを作成するデプロイ スクリプトを実行します。Contoso admins run a deployment script to create the managed Kubernetes cluster by using AKS and Azure Container Registry. このセクションの手順では、SmartHotel360-Backend GitHub リポジトリを使用します。The instructions for this section use the SmartHotel360-Backend GitHub repository. このリポジトリには、デプロイのこの部分のためのソフトウェアがすべて含まれています。The repository contains all the software for this part of the deployment.

    前提条件が満たされていることを確認するEnsure that prerequisites are met

    Contoso の管理者は、開始する前に、デプロイに使用する開発用マシンにすべての前提条件ソフトウェアがインストールされていることを確認します。Before they start, Contoso admins ensure that all prerequisite software is installed on the dev machine they're using for the deployment. Git を使用して、ローカルの開発用マシンにリポジトリをクローンします。They clone the repository locally to the dev machine by using Git:

    git clone https://github.com/Microsoft/SmartHotel360-Backend.git

    AKS と Azure Container Registry をプロビジョニングするProvision AKS and Azure Container Registry

    Contoso の管理者は、AKS と Azure Container Registry を次のようにプロビジョニングします。The Contoso admins provision AKS and Azure Container Registry as follows:

    1. Visual Studio Code でフォルダーを開き、スクリプト gen-aks-env.ps1 が格納されている /deploy/k8s ディレクトリに移動します。In Visual Studio Code, they open the folder and go to the /deploy/k8s directory, which contains the script gen-aks-env.ps1.

    2. AKS と Azure Container Registry を使用して、マネージド Kubernetes クラスターを作成するスクリプトを実行します。They run the script to create the managed Kubernetes cluster, using AKS and Azure Container Registry.

      Visual Studio Code での AKS スクリプトを示すスクリーンショット。Screenshot showing the AKS script in Visual Studio Code.
      "図 3:マネージド Kubernetes クラスターの作成。Figure 3: Creating the managed Kubernetes cluster.

    3. ファイルを開いた状態で $location パラメーターを eastus2 に更新し、ファイルを保存します。With the file open, they update the $location parameter to eastus2, and save the file.

      eastus2 に更新された AKS $location パラメーターを示すスクリーンショット。Screenshot showing AKS $location parameter updated to eastus2.
      "図 4:ファイルの保存。Figure 4: Saving the file.

    4. [表示] > [統合ターミナル] を選択して、Visual Studio Code で統合ターミナルを開きます。They select View > Integrated Terminal to open the integrated terminal in Visual Studio Code.

      "統合ターミナル" リンクを示すスクリーンショット。Screenshot showing the "Integrated Terminal" link.
      図 5:Visual Studio Code のターミナル。Figure 5: The terminal in Visual Studio Code.

    5. PowerShell 統合ターミナルで、Connect-AzureRmAccount コマンドを使用して Azure にサインインします。In the PowerShell integrated terminal, they sign into Azure using the Connect-AzureRmAccount command. 詳細については、PowerShell の使用開始に関するページを参照してください。For more information, see Get started with PowerShell.

      PowerShell 統合ターミナルのサインイン ウィンドウのスクリーンショット。Screenshot of the sign-in window for the PowerShell integrated terminal.
      図 6:PowerShell 統合ターミナル。Figure 6: The PowerShell integrated terminal.

    6. az login コマンドを実行し、Web ブラウザーを使用した認証の手順に従って、Azure CLI の認証を行います。They authenticate the Azure CLI by running the az login command and following the instructions to authenticate using their web browser. Azure CLI でのログインの詳細を参照してください。Learn more about logging in with the Azure CLI.

      Azure CLI の認証ウィンドウを示すスクリーンショット。Screenshot showing the authentication window for the Azure CLI.
      図 7:Azure CLI の認証。Figure 7: Authenticating the Azure CLI.

    7. 次のコマンドを、リソース グループ名 ContosoRG、AKS クラスター名 smarthotel-aks-eus2、および新しいレジストリ名を渡して実行します。They run the following command while passing the resource group name of ContosoRG, the name of the AKS cluster smarthotel-aks-eus2, and the new registry name.

      .\gen-aks-env.ps1 -resourceGroupName ContosoRg -orchestratorName smarthotelakseus2 -registryName smarthotelacreus2

      リソース グループ ペインでの smarthotel コマンドを示すスクリーンショット。Screenshot showing the smarthotel commands on the resource group pane.
      図 8:コマンドの実行。Figure 8: Running the command.

    8. Azure によって、AKS クラスターのリソースを含む別のリソース グループが作成されます。Azure creates another resource group that contains the resources for the AKS cluster.

      リソース グループ作成のスクリーンショット。Screenshot of resource group creation.
      図 9:Azure でのリソース グループの作成。Figure 9: Azure creating a resource group.

    9. デプロイが完了したら、kubectl コマンドライン ツールをインストールします。After the deployment is finished, they install the kubectl command-line tool. このツールは、Azure Cloud Shell では既にインストールされています。The tool is already installed on the Azure Cloud Shell.

      az aks install-cli

    10. kubectl get nodes コマンドを実行して、クラスターへの接続を確認します。They verify the connection to the cluster by running the kubectl get nodes command. ノードは、自動的に作成されたリソース グループ内の VM と同じ名前です。The node has the same name as the VM in the automatically created resource group.

      クラスターへの接続の確認を示すスクリーンショット。Screenshot showing verification of the connection to the cluster.
      図 10:クラスターへの接続の確認。Figure 10: Verifying the connection to the cluster.

    11. 次のコマンドを実行して、Kubernetes ダッシュボードを起動します。They run the following command to start the Kubernetes dashboard:

      az aks browse --resource-group ContosoRG --name smarthotelakseus2

    12. ブラウザー タブが開き、ダッシュボードが表示されます。A browser tab opens to the dashboard. これは Azure CLI を使用したトンネル接続です。This is a tunneled connection that uses the Azure CLI.

      トンネル接続を示すスクリーンショット。Screenshot showing a tunneled connection.
      図 11:トンネル接続。Figure 11: A tunneled connection.

    手順 2:バックエンド パイプラインを構成するStep 2: Configure the back-end pipeline

    Azure DevOps プロジェクトとビルドを作成するCreate an Azure DevOps project and build

    Contoso は Azure DevOps プロジェクトを作成し、CI ビルドを構成してコンテナーを作成し、それをコンテナー レジストリにプッシュします。Contoso creates an Azure DevOps project, configures a CI build to create the container, and then pushes it to the container registry. このセクションの手順では、SmartHotel360-Backend リポジトリを使用します。The instructions in this section use the SmartHotel360-Backend repository.

    1. visualstudio.com から新しい組織 (contosodevops360.visualstudio.com) を作成し、Git を使用するようにそれを構成します。From visualstudio.com, they create a new organization (contosodevops360.visualstudio.com) and configure it to use Git.

    2. バージョン コントロールに Git、ワークフローにアジャイルを選択して、新しいプロジェクト (SmartHotelBackend) を作成します。They create a new project (SmartHotelBackend), selecting Git for version control and Agile for the workflow.

      Azure DevOps の [新しいプロジェクトの作成] ペインのスクリーンショット。Screenshot of the Azure DevOps "Create new project" pane.
      図 12:新しいプロジェクトの作成。Figure 12: Creating a new project.

    3. GitHub リポジトリをインポートします。They import the GitHub repo.

      Azure DevOps の [Git リポジトリをインポートする] ペインのスクリーンショット。Screenshot of the Azure DevOps "Import a Git repository" pane.
      図 13:GitHub リポジトリのインポート。Figure 13: Importing the GitHub repo.

    4. [パイプライン] で、 [ビルド] を選択し、リポジトリから、Azure Repos Git をソースとして使用する新しいパイプラインを作成します。In Pipelines, they select Build and create a new pipeline by using Azure Repos Git as a source from the repository.

      新しいパイプラインを作成するための DevOps ペインのスクリーンショット。Screenshot of DevOps pane for creating a new pipeline.
      図 14:新しいパイプラインの作成。Figure 14: Creating a new pipeline.

    5. [空のジョブ] を選択します。They select Empty job.

      Azure DevOps の [空のジョブ] リンクのスクリーンショット。Screenshot of the "Empty job" link in Azure DevOps.
      図 15:空のジョブの開始。Figure 15: Starting with an empty job.

    6. ビルド パイプラインで [Hosted Linux Preview](ホストされている Linux プレビュー) を選択します。They select Hosted Linux Preview for the build pipeline.

      Azure DevOps のビルド パイプライン設定画面のスクリーンショット。Screenshot of setting up the build pipeline in Azure DevOps.
      図 16:ビルド パイプラインの設定。Figure 16: Setting up the build pipeline.

    7. [Phase 1](フェーズ 1) で、 [Docker Compose] タスクを追加します。In Phase 1, they add a Docker Compose task. このタスクでは、Docker Compose をビルドします。This task builds the Docker Compose.

      Azure DevOps で Docker Compose タスクをビルドする画面のスクリーンショット。Screenshot of building a Docker Compose task in Azure DevOps.
      図 17:Docker Compose のビルド。Figure 17: Building the Docker Compose.

    8. 手順を繰り返し、Docker Compose タスクをもう 1 つ追加します。They repeat and add another Docker Compose task. これにより、コンテナーがコンテナー レジストリにプッシュされます。This one pushes the containers to the container registry.

      Azure DevOps でもう 1 つ Docker Compose タスクを追加する画面のスクリーンショット。Screenshot of adding another Docker Compose task in Azure DevOps.
      図 18:別の Docker Compose タスクの追加。Figure 18: Adding another Docker Compose task.

    9. 1 番目のタスク (ビルドの実行) を選択し、Azure サブスクリプション、承認、コンテナー レジストリを指定してビルドを作成、構成します。They select the first task to build and configure the build with the Azure subscription, authorization, and container registry.

      Azure DevOps でビルドの作成と構成を行う画面のスクリーンショット。Screenshot of building and configuring the build in Azure DevOps.
      図 19:ビルドの作成と構成。Figure 19: Building and configuring the build.

    10. リポジトリの src フォルダーにある docker-compose.yaml ファイルのパスを指定します。They specify the path of the docker-compose.yaml file in the src folder of the repo. サービス イメージのビルドを選択し、最新のタグを含めます。They choose to build service images and include the latest tag. アクションが [Build service images](サービス イメージのビルド) に変わると、Azure DevOps タスクの名前が [Build services automatically](サービスを自動的にビルド) に変わります。When the action changes to Build service images, the name of the Azure DevOps task changes to Build services automatically.

      Azure DevOps における各種タスクビルド指定のスクリーンショット。Screenshot of various task-building specifics in Azure DevOps.
      図 20:タスクの詳細。Figure 20: The specifics of the task.

    11. Contoso は次に、2 番目の Docker タスク (プッシュの実行) を構成します。Now, they configure the second Docker task (to push). サブスクリプションとコンテナー レジストリ (smarthotelacreus2) を選択します。They select the subscription and the container registry (smarthotelacreus2).

      Azure DevOps で 2 つ目の Docker タスクを構成する画面のスクリーンショット。Screenshot of configuring the second Docker task in Azure DevOps.
      図 21:2 番目の Docker タスクの構成。Figure 21: Configuring the second Docker task.

    12. docker-compose.yaml ファイル名を入力し、 [Push service images](サービス イメージのプッシュ) を選択し、最新のタグを含めます。They enter the docker-compose.yaml file name and select Push service images, including the latest tag. アクションが [Push service images](サービス イメージのプッシュ) に変わると、Azure DevOps タスクの名前が [Push services automatically](サービスを自動的にプッシュ) に変わります。When the action changes to Push service images, the name of the Azure DevOps task changes to Push services automatically.

      Azure DevOps タスクの名前を変更する画面のスクリーンショット。Screenshot of changing the Azure DevOps task name.
      図 22:Azure DevOps タスクの名前の変更。Figure 22: Changing the Azure DevOps task name.

    13. Azure DevOps タスクが構成されたので、Contoso はビルド パイプラインを保存し、ビルド プロセスを開始します。With the Azure DevOps tasks configured, Contoso saves the build pipeline and starts the build process.

      Azure DevOps でビルド プロセスを開始する画面のスクリーンショット。Screenshot of starting the build process in Azure DevOps.
      図 23:ビルド プロセスの開始。Figure 23: Starting the build process.

    14. ビルド ジョブを選択して、進行状況を確認します。They select the build job to check progress.

      Azure DevOps でビルドの進行状況を確認する画面のスクリーンショット。Screenshot of checking build progress in Azure DevOps.
      図 24:進行状況の確認。Figure 24: Checking the progress.

    15. ビルドが完了すると、コンテナー レジストリに、マイクロサービスによって使用されるコンテナーが設定された新しいリポジトリが表示されます。After the build finishes, the container registry shows the new repos, which are populated with the containers used by the microservices.

      Azure DevOps でビルドの完了後に新しいリポジトリを表示する画面のスクリーンショット。Screenshot of viewing new repos after the build finishes in Azure DevOps.
      図 25:ビルドの終了後に新しいリポジトリを表示。Figure 25: Viewing new repos after the build finishes.

    バックエンド インフラストラクチャをデプロイするDeploy the back-end infrastructure

    AKS クラスターを作成し、Docker イメージをビルドしたので、次に Contoso の管理者は、バックエンドのマイクロサービスによって使用される残りのインフラストラクチャをデプロイします。With the AKS cluster created and the Docker images built, Contoso admins now deploy the rest of the infrastructure that will be used by back-end microservices.

    • このセクションの手順では、SmartHotel360-Backend リポジトリを使用します。Instructions in this section use the SmartHotel360-Backend repo.
    • /deploy/k8s/arm フォルダーに、すべての項目を作成する 1 つのスクリプトが含まれています。In the /deploy/k8s/arm folder, there's a single script to create all items.

    管理者は、次のようにしてインフラストラクチャをデプロイします。The admins deploy the infrastructure as follows:

    1. 開発者コマンド プロンプトを開き、Azure サブスクリプションのコマンド az login を使用します。They open a developer command prompt and then use the command az login for the Azure subscription.

    2. deploy.cmd ファイルを使用し、次のコマンドを入力して ContosoRG リソース グループと米国東部 2 リージョンに Azure リソースをデプロイします。They use the deploy.cmd file to deploy the Azure resources in the ContosoRG resource group and East US 2 region by typing the following command:

      .\deploy.cmd azuredeploy ContosoRG -c eastus2

      バックエンドをデプロイする画面のスクリーンショット。Screenshot of deploying the back end.
      図 26: バックエンドのデプロイ。Figure 26: Deploying the back end.

    3. Azure portal で、後で使用するために、各データベースの接続文字列をキャプチャします。In the Azure portal, they capture the connection string for each database for later use.

      各データベースの接続文字列を示すスクリーンショット。Screenshot showing the connection string for each database.
      図 27: 各データベースの接続文字列のキャプチャ。Figure 27: Capturing the connection string for each database.

    バックエンド リリース パイプラインを作成するCreate the back-end release pipeline

    ここで、Contoso の管理者は以下のことを行います。Now, Contoso admins do the following:

    • サービスへの受信トラフィックを許可する NGINX イングレス コントローラーをデプロイします。Deploy the NGINX ingress controller to allow inbound traffic to the services.
    • AKS クラスターにマイクロサービスを送ります。Deploy the microservices to the AKS cluster.
    • 最初のステップとして管理者は、マイクロサービスへの接続文字列を Azure DevOps を使用して更新します。As a first step, admins update the connection strings to the microservices by using Azure DevOps. 次に、新しい Azure DevOps リリース パイプラインを構成して、マイクロサービスをデプロイします。They then configure a new Azure DevOps release pipeline to deploy the microservices.
    • このセクションの手順では、SmartHotel360-Backend リポジトリを使用します。The instructions in this section use the SmartHotel360-Backend repo.
    • 一部の構成設定 (Active Directory B2C など) については、この記事では説明しません。Some of the configuration settings (for example, Active Directory B2C) aren't covered in this article. これらの設定の詳細については、先ほど触れた SmartHotel360-Backend リポジトリを参照してください。For more information about these settings, review the previously mentioned SmartHotel360-Backend repo.

    管理者は次のようにしてパイプラインを作成します。The admins create the pipeline:

    1. Visual Studio で、前に説明したデータベース接続情報で /deploy/k8s/config_local.yml ファイルを更新します。In Visual Studio, they update the /deploy/k8s/config_local.yml file with the database connection information that they noted earlier.

      Visual Studio の [新しいパイプライン] ボタンを示すスクリーンショット。Screenshot showing the "New pipeline" button in Visual Studio.
      図 28: データベース接続。Figure 28: Database connections.

    2. Azure DevOps を開き、SmartHotel360 プロジェクトの [リリース] ペインで [+ 新しいパイプライン] を選択します。They open Azure DevOps and, in the SmartHotel360 project, they select + New pipeline on the Releases pane.

      Azure DevOps の [新しいパイプライン] ボタンを示すスクリーンショット。Screenshot showing the "New pipeline" button in Azure DevOps.
      図 29: 新しいパイプラインの作成。Figure 29: Creating a new pipeline.

    3. [空のジョブ] を選択し、テンプレートを使用せずにパイプラインを開始します。They select Empty Job to start the pipeline without a template.

    4. ステージとパイプラインの名前を付けます。They provide the stage and pipeline names.

      Azure DevOps のステージ名の作成画面を示すスクリーンショット。Screenshot showing creation of a stage name in Azure DevOps.
      図 30: ステージ名。Figure 30: The stage name.

      Azure DevOps のパイプライン名の作成画面を示すスクリーンショット。Screenshot showing creation of a pipeline name in Azure DevOps.
      図 31: パイプライン名。Figure 31: The pipeline name.

    5. 成果物を追加します。They add an artifact.

      Azure DevOps でアーティファクトを追加する画面のスクリーンショット。Screenshot showing adding an artifact in Azure DevOps.
      図 32: 成果物の追加。Figure 32: Adding an artifact.

    6. ソース タイプとして [Git] を選択し、SmartHotel360 アプリケーションのプロジェクト、ソース、およびマスター ブランチを指定します。They select Git as the source type and specify the project, source, and master branch for the SmartHotel360 application.

      [成果物の追加] ペインのスクリーンショット (ソースの種類として Git を選択したところ)。Screenshot of the "Add an artifact" pane, with Git as the source type.
      図 33: [成果物の設定] ペイン。Figure 33: The artifact settings pane.

    7. タスクのリンクを選択します。They select the task link.

      Azure DevOps でタスク リンクが強調表示された画面のスクリーンショット。Screenshot showing the task link highlighted in Azure DevOps.
      図 34: タスクのリンク。Figure 34: The task link.

    8. PowerShell スクリプトを Azure 環境で実行できるように、新しい Azure PowerShell タスクを追加します。They add a new Azure PowerShell task so that they can run a PowerShell script in an Azure environment.

      Azure に新しい PowerShell タスクを追加する画面のスクリーンショット。Screenshot of adding a new PowerShell task in Azure.
      図 35: 新しい PowerShell タスクの追加。Figure 35: Adding a new PowerShell task.

    9. タスクの Azure サブスクリプションを選択し、Git レポジトリから deploy.ps1 スクリプトを選択します。They select the Azure subscription for the task and select the deploy.ps1 script from the Git repo.

      実行するスクリプトを Git リポジトリから選択する画面のスクリーンショット。Screenshot of selecting a script to run from the Git repo.
      図 36: スクリプトの実行。Figure 36: Running the script.

    10. スクリプトに引数を追加します。They add arguments to the script. このスクリプトでは、すべてのクラスター コンテンツ (イングレスおよびイングレス コントローラーを除く) が削除され、マイクロサービスがデプロイされます。The script will delete all cluster content (except ingress and ingress controller), and deploy the microservices.

      スクリプトに追加される引数を示すスクリーンショット。Screenshot showing arguments to be added to the script.
      図 37: スクリプトへの引数の追加。Figure 37: Adding arguments to the script.

    11. 指定の Azure PowerShell バージョンを最新バージョンに設定し、パイプラインを保存します。They set the preferred Azure PowerShell version to the latest version, and save the pipeline.

    12. [新しいリリースを作成する] ペインに戻って、新しいリリースを手動で作成します。They go back to the Create a new release pane and manually create a new release.

      [新しいリリースを作成する] ペインのスクリーンショット。Screenshot of the "Create a new release" pane.
      図 38: 新しいリリースの手動作成。Figure 38: Manually creating a new release.

    13. リリースの作成後、それを選択し、 [アクション][デプロイ] を選択します。After they create the release, they select it and, under Actions, they select Deploy.

      リリースをデプロイするための [デプロイ] ボタンが強調表示されている画面のスクリーンショット。Screenshot highlighting the Deploy button for deploying a release.
      図 39: リリースのデプロイ。Figure 39: Deploying a release.

    14. デプロイが完了したら、Azure Cloud Shell: kubectl get services を使用して、以下のコマンドを実行することでサービスの状態を確認します。When the deployment is complete, they run the following command to check the status of services, using the Azure Cloud Shell: kubectl get services.

    手順 3:フロントエンド サービスをプロビジョニングするStep 3: Provision front-end services

    Contoso の管理者は、フロントエンド アプリケーションによって使用されるインフラストラクチャをデプロイする必要があります。Contoso admins need to deploy the infrastructure that will be used by the front-end applications. 次のものを作成します。They create:

    • ペットの画像を格納する Blob Storage コンテナー。A Blob storage container to store the pet images.
    • ペット情報を含むドキュメントを格納する Azure Cosmos DB データベース。An Azure Cosmos DB database to store documents containing pet information.
    • Web サイト用の Computer Vision API。The Computer Vision API for the website.

    このセクションの手順では、SmartHotel360-Website リポジトリを使用します。Instructions for this section use the SmartHotel360-website repo.

    BLOB ストレージ コンテナーを作成するCreate Blob storage containers

    1. Azure portal で管理者は、作成済みのストレージ アカウントを開き、 [BLOB] をクリックします。In the Azure portal, the admins open the storage account that was created, and then select Blobs.

    2. パブリック アクセス レベルをコンテナーに設定した新しいコンテナー (Pets) を作成します。They create a new container named Pets with the public-access level set for the container. ユーザーは、ペットの写真をこのコンテナーにアップロードします。Users will upload their pet photos to this container.

      Azure portal で新しいコンテナーを作成する画面のスクリーンショット。Screenshot of creating a new container in the Azure portal.
      図 40: 新しいコンテナーの作成。Figure 40: Creating a new container.

    3. settings という名前の 2 つ目のコンテナーを作成します。They create a second new container named settings. このコンテナーに、フロントエンド アプリのすべての設定が含まれるファイルが配置されます。A file with all the front-end app settings will be placed in this container.

      Azure portal で 2 つ目の新しいコンテナーを作成する画面のスクリーンショット。Screenshot of creating a second new container in the Azure portal.
      図 41: 2 つ目のコンテナーの作成。Figure 41: Creating a second container.

    4. 後で参照できるように、ストレージ アカウントのアクセスの詳細をテキスト ファイルにキャプチャします。They capture the access details for the storage account in a text file for future reference.

      アクセスの詳細をキャプチャするテキスト ファイルのスクリーンショット。Screenshot of a text file capturing access details.
      図 42: アクセスの詳細をキャプチャするテキスト ファイル。Figure 42: A text file capturing access details.

    Azure Cosmos DB のデータベースをプロビジョニングするProvision an Azure Cosmos DB database

    Contoso の管理者は、ペットの情報に使用する Azure Cosmos DB データベースをプロビジョニングします。Contoso admins provision an Azure Cosmos DB database to be used for pet information.

    1. Azure Marketplace で、Azure Cosmos DB データベースを作成します。They create an Azure Cosmos DB database in Azure Marketplace.

      Azure Marketplace で Azure Cosmos DB データベースを作成する画面のスクリーンショット。Screenshot showing the creation of an Azure Cosmos DB database in Azure Marketplace.
      図 43: Azure Cosmos DB データベースの作成。Figure 43: Creating an Azure Cosmos DB database.

    2. 名前 (contososmarthotel) を指定し、SQL API を選択し、メイン リージョン (East US 2) の運用リソース グループ ContosoRG に配置します。They specify a name contososmarthotel, select the SQL API, and place it in the production resource group ContosoRG in the main region East US 2.

      Azure Cosmos DB データベースの名前とその他の設定のスクリーンショット。Screenshot of the Azure Cosmos DB database name and other settings.
      図 44: Azure Cosmos DB データベースの名前指定。Figure 44: Naming an Azure Cosmos DB database.

    3. 既定の容量およびスループットを指定した新しいコレクションをデータベースに追加します。They add a new collection to the database, with default capacity and throughput.

      Azure Cosmos DB の [コレクションの追加] ペインのスクリーンショット。Screenshot of the "Add Collection" pane for Azure Cosmos DB.
      図 45: データベースへのコレクションの追加。Figure 45: Adding a new collection to the database.

    4. 後で参照できるように、このデータベースの接続情報をメモします。They note the connection information for the database for future reference.

      Azure Cosmos DB データベースの接続情報のスクリーンショット。Screenshot of the connection information for the Azure Cosmos DB database.
      図 46: データベースの接続情報。Figure 46: The connection information for the database.

    Computer Vision API をプロビジョニングするProvision the Computer Vision API

    Contoso の管理者は、Computer Vision API をプロビジョニングします。Contoso admins provision the Computer Vision API. この API は、ユーザーによってアップロードされた写真を評価するために関数によって呼び出されます。The API will be called by the function, to evaluate pictures that are uploaded by users.

    1. 管理者が Azure Marketplace で、Computer Vision インスタンスを作成します。The admins create a Computer Vision instance in Azure Marketplace.

      Azure Marketplace で新しい Computer Vision インスタンスを作成する画面のスクリーンショット。Screenshot of creating a new computer vision instance in Azure Marketplace.
      図 47: Azure Marketplace での新しいインスタンス。Figure 47: A new instance in Azure Marketplace.

    2. API (smarthotelpets) を運用リソース グループ ContosoRG のメイン リージョン (East US 2) にプロビジョニングします。They provision the API (smarthotelpets) in the production resource group ContosoRG, in the main region (East US 2).

      運用リソース グループに API を設定する画面のスクリーンショット。Screenshot of setting up an API in a production resource group.
      図 48: 運用リソースグループでの API のプロビジョニング。Figure 48: Provisioning an API in a production resource group.

    3. 後で参照できるように、この API の接続文字列をテキスト ファイルに保存します。They save the connection settings for the API to a text file for later reference.

      API の接続設定をテキスト ファイルに保存する画面のスクリーンショット。Screenshot of saving the API's connection settings to a text file.
      図 49: API の接続の設定の保存。Figure 49: Saving an API's connection settings.

    Azure Web アプリをプロビジョニングするProvision the Azure web app

    Contoso の管理者は、Azure portal を使用して Web アプリをプロビジョニングします。Contoso admins provision the web app by using the Azure portal.

    1. ポータルで [Web アプリ] を選択します。They select Web App in the portal.

      Azure portal で Web アプリを選択する画面のスクリーンショット。Screenshot of selecting a web app in the Azure portal.
      図 50: Web アプリの選択。Figure 50: Selecting the web app.

    2. Web アプリの名前 (smarthotelcontoso) を指定し、Windows 上で実行して、運用リソース グループ ContosoRG に配置します。They provide a web app name (smarthotelcontoso), run it on Windows, and place it in the production resource group ContosoRG. アプリケーションのモニタリング用に新しい Application Insights リソースを作成します。They create a new Application Insights instance for application monitoring.

      Web アプリの名前やその他の詳細を指定する画面のスクリーンショット。Screenshot of providing a web app name and other details.
      図 51: Web アプリケーションの名前。Figure 51: The web app name.

    3. 完了したら、管理者はブラウザーでアプリケーションのアドレスにアクセスし、アプリが正常に作成されたかどうかを確認します。After they're done, the admins browse to the address of the application to check on whether it has been created successfully.

    4. Azure portal で、コードのステージング スロットを作成します。In the Azure portal, they create a staging slot for the code. パイプラインはこのスロットにデプロイされます。The pipeline will be deployed to this slot. このアプローチにより、管理者がリリースを実行するまで、コードは運用環境に移行されません。This approach ensures that code isn't put into production until the admins perform a release.

      Web アプリのステージング スロットを追加する画面のスクリーンショット。Screenshot of adding a web app staging slot.
      図 52: Web アプリのステージング スロットを追加する。Figure 52: Adding a web app staging slot.

    関数アプリをプロビジョニングするProvision the function app

    Contoso の管理者は、Azure portal で関数アプリをプロビジョニングします。In the Azure portal, Contoso admins provision the function app.

    1. [Function App] を選択します。They select Function App.

      関数アプリを作成する画面のスクリーンショット。Screenshot showing the creation of a function app.
      図 53: 関数アプリの選択。Figure 53: Selecting the function app.

    2. 関数アプリ (smarthotelpetchecker) の名前を指定します。They provide a name for the function app (smarthotelpetchecker). 運用リソース グループ (ContosoRG) に関数アプリを配置します。They place the function app in the production resource group (ContosoRG). ホスティングの場所を従量課金プランに設定し、関数アプリを East US 2 リージョンに配置します。They set the hosting place to Consumption Plan, and place the function app in the East US 2 region. 監視用の Application Insights インスタンスと共に新しいストレージ アカウントが作成されます。A new storage account is created along with an Application Insights instance for monitoring.

      関数アプリの設定を示すスクリーンショット。Screenshot showing the function app's settings.
      図 54: 関数アプリの設定。Figure 54: Function app settings.

    3. 関数アプリをデプロイしたら、そのアドレスに管理者がブラウザーでアクセスして、アプリが正常に作成されたことを確認します。After they've deployed the function app, the admins browse to its address to verify that it has been created successfully.

    手順 4:フロントエンド パイプラインを設定するStep 4: Set up the front-end pipeline

    Contoso 管理者は、フロントエンド サイトに 2 つの異なるプロジェクトを作成します。Contoso admins create two different projects for the front-end site.

    1. Azure DevOps で、プロジェクト SmartHotelFrontend を作成します。In Azure DevOps, they create a project SmartHotelFrontend.

      フロントエンド プロジェクトの作成画面のスクリーンショット。Screenshot of the creation of a front-end project.
      図 55: フロントエンド プロジェクトの作成。Figure 55: Creating a front-end project.

    2. SmartHotel360 フロントエンド Git リポジトリを新しいプロジェクトにインポートします。They import the SmartHotel360 front end Git repository into the new project.

    3. 関数アプリ用の別の Azure DevOps プロジェクト (SmartHotelPetChecker) を作成し、PetChecker Git リポジトリをこのプロジェクトにインポートします。For the function app, they create another Azure DevOps project (SmartHotelPetChecker) and import the PetChecker Git repository into this project.

    Web アプリを構成するConfigure the web app

    次に、Contoso の管理者は Contoso リソースを使用するように Web アプリを構成します。Now Contoso admins configure the web app to use Contoso resources.

    1. 管理者が Azure DevOps プロジェクトに接続し、開発用マシンのローカルにリポジトリをクローンします。The admins connect to the Azure DevOps project and clone the repository locally to the development machine.

    2. Visual Studio でフォルダーを開いて、リポジトリ内のすべてのファイルを表示します。In Visual Studio, they open the folder to show all the files in the repo.

      リポジトリ内のすべてのファイルを含んだフォルダーを表示する Visual Studio のスクリーンショット。Screenshot of Visual Studio showing a folder with all the files in the repo.
      図 56: リポジトリ内のすべてのファイルを表示。Figure 56: Viewing all files in the repo.

    3. 必要に応じて構成の変更を更新します。They update the configuration changes as required.

      • Web アプリの起動時に、SettingsUrl アプリ設定が検索されます。When the web app starts up, it looks for the SettingsUrl app setting.
      • この変数には、構成ファイルをポイントする URL が含まれている必要があります。This variable must contain a URL that points to a configuration file.
      • 既定では、使用される設定はパブリック エンドポイントです。By default, the setting that's used is a public endpoint.
    4. /config-sample.json/sample.json ファイルを更新します。They update the /config-sample.json/sample.json file.

      • これは、パブリック エンドポイントを使用する場合の Web 用の構成ファイルです。This is the configuration file for the web when it uses the public endpoint.
      • urls セクションと pets_config セクションを、AKS API エンドポイント、ストレージ アカウント、Azure Cosmos DB データベースの値を使用して編集します。They edit the urls and pets_config sections with the values for the AKS API endpoints, storage accounts, and Azure Cosmos DB database.
      • URL は、Contoso が作成する新しい Web アプリの DNS 名と一致している必要があります。The URLs should match the DNS name of the new web app that Contoso will create.
      • Contoso の場合、これは smarthotelcontoso.eastus2.cloudapp.azure.com です。For Contoso, this is smarthotelcontoso.eastus2.cloudapp.azure.com.

      Visual Studio の .json 設定のスクリーンショット。Screenshot of the .json settings in Visual Studio.
      図 57: .json 設定。Figure 57: The .json settings.

    5. ファイルの更新後、管理者は、その名前を smarthotelsettingsurl に変更して、あらかじめ作成しておいた Blob Storage にアップロードします。After they update the file, the admins rename it smarthotelsettingsurl and upload it to the Blob storage they created earlier.

      .json ファイルの名前変更とアップロードを行う画面のスクリーンショット。Screenshot of renaming and uploading the .json file.
      図 58: ファイルの名前変更とアップロード。Figure 58: Renaming and uploading the file.

    6. ファイルを選択肢て URL を取得します。They select the file to get the URL. この URL は、アプリケーションが構成ファイルプル ダウンするときに使用されます。The URL is used by the application when it pulls down the configuration files.

      アプリケーションによって使用されるファイルの URL のスクリーンショット。Screenshot of the URL of the file that's used by the application.
      図 59: アプリケーションの URL。Figure 59: The application URL.

    7. appsettings.Production.json ファイルで、SettingsURL を、新しいファイルの URL に更新します。In the appsettings.Production.json file, they update the SettingsURL to the URL of the new file.

      新しいファイルに URL を更新する画面のスクリーンショット。Screenshot of updating the URL to the new file.
      図 60: 新しいファイルへの URL の更新。Figure 60: Updating the URL to the new file.

    Azure App Service に Web サイトをデプロイするDeploy the website to Azure App Service

    これで Contoso の管理者は Web サイトを公開できます。Contoso admins can now publish the website.

    1. Azure DevOps を開き、SmartHotelFrontend プロジェクトの [ビルドとリリース][+ 新しいパイプライン] を選択します。They open Azure DevOps and, in the SmartHotelFrontend project in Builds and Releases, they select + New pipeline.

    2. [Azure DevOps Git] をソースとして選択します。They select Azure DevOps Git as a source.

    3. [ASP.NET Core] テンプレートを選択します。They select the ASP.NET Core template.

    4. パイプラインを確認し、 [Web プロジェクトの発行][発行されたプロジェクトの zip 圧縮] が選択されていることを確認します。They review the pipeline and check to ensure that Publish Web Projects and Zip Published Projects are selected.

      Web プロジェクトのパイプライン設定のスクリーンショット。Screenshot of the web project's pipeline settings.
      図 61: パイプラインの設定。Figure 61: Pipeline settings.

    5. [トリガー] で継続的インテグレーションを有効にして、マスター ブランチを追加します。In Triggers, they enable continuous integration and add the master branch. これにより、マスター ブランチにコミットされた新しいコードをソリューションが持つたびに、ビルド パイプラインが起動します。This ensures that the build pipeline starts each time the solution has new code committed to the master branch.

      継続的インテグレーションを有効にして、マスター ブランチを追加する画面のスクリーンショット。Screenshot of enabling continuous integration and adding the master branch.
      図 62: 継続的インテグレーションを有効にする。Figure 62: Enabling continuous integration.

    6. [保存してキューに登録] を選択してビルドを開始します。They select Save & Queue to start a build.

    7. ビルドが完了したら、Azure App Service のデプロイを使用してリリース パイプラインを構成します。After the build finishes, they configure a release pipeline by using Azure App Service Deployment.

    8. ステージ名 Staging を指定します。They provide a stage name, Staging.

      環境のステージ名を指定する画面のスクリーンショット。Screenshot of providing a stage name for the environment.
      図 63: 環境の名前指定。Figure 63: Naming the environment.

    9. 成果物を追加し、構成したビルドを選択します。They add an artifact and select the build that they've configured.

      成果物の追加画面のスクリーンショット (ソースの種類として [ビルド] を選択したところ)。Screenshot of adding an artifact, with Build as the source type.
      図 64: 成果物の追加。Figure 64: Adding an artifact.

    10. 成果物の稲妻アイコンを選択し、継続的デプロイを [有効] に設定します。They select the lightning bolt icon on the artifact and then set continuous deployment to Enabled.

      継続的デプロイを有効にする画面のスクリーンショット。Screenshot of enabling continuous deployment.
      図 65: 継続的なデプロイの有効化。Figure 65: Enabling continuous deployment.

    11. [環境][ステージング] の下で [1 job, 1 task](1 ジョブ、1 タスク) を選択します。In Environment, they select 1 job, 1 task under Staging.

    12. サブスクリプションおよび Web アプリ名を選択した後、管理者は [Azure App Service のデプロイ] タスクを開きます。After selecting the subscription and web app name, the admins open the Deploy Azure App Service task. ステージング デプロイ スロットを使用するようにデプロイが構成されます。The deployment is configured to use the staging deployment slot. これによって、このスロットでレビューと承認のコードが自動的にビルドされます。This automatically builds code for review and approval in this slot.

      Web アプリをスロットにデプロイする画面のスクリーンショット。Screenshot of deploying the web app to a slot.
      図 66: スロットへのデプロイ。Figure 66: Deploying to a slot.

    13. [パイプライン] で、新しいステージを追加します。In the Pipeline, they add a new stage.

      [パイプライン] タブと新しいステージの追加のスクリーンショット。Screenshot of the Pipeline tab and adding a new stage.
      図 67: 新しいステージの追加。Figure 67: Adding a new stage.

    14. [スロットを使用した Azure App Service の配置] を選択し、環境名を Prod とします。They select Azure App Service deployment with slot and then name the environment Prod.

    15. [1 job, 2 tasks](1 ジョブ、2 タスク) を選択し、次にサブスクリプション、アプリ サービス名、およびステージング スロットを選択します。They select 1 job, 2 tasks and then select the subscription, the app service name, and the staging slot.

      環境の名前を指定する画面のスクリーンショット。Screenshot showing naming the environment.
      図 68: 環境の名前指定。Figure 68: Naming the environment.

    16. 次に、パイプラインから [Deploy Azure App Service to Slot](Azure App Service をスロットにデプロイ) をクリックします。They remove the Deploy Azure App Service to Slot from the pipeline. これは直前のステップからここに配置されています。It was placed there by the previous steps.

      パイプラインからスロットを削除する画面のスクリーンショット。Screenshot showing removing a slot from the pipeline.
      図 69: パイプラインからのスロットの削除。Figure 69: Removing a slot from the pipeline.

    17. パイプラインを保存します。They save the pipeline. パイプラインで、 [配置後の条件] を選択します。On the pipeline, they select Post-deployment conditions.

      [配置後の条件] ボタンのスクリーンショット。Screenshot of the "Post-deployment conditions" button.
      図 70: 配置後の条件。Figure 70: Post-deployment conditions.

    18. [配置後の承認] を有効にし、承認者として開発リーダーを追加します。They enable Post-deployment approvals and then add a dev lead as the approver.

      有効になった [配置後の承認] の承認者一覧のスクリーンショット。Screenshot of the enabled post-deployment approvers list.
      図 71: 承認者の追加。Figure 71: Adding an approver.

    19. ビルド パイプラインで、管理者がビルドを手動で開始します。In the build pipeline, the admins manually kick off a build. これによって、サイトをステージング スロットにデプロイする新しいリリース パイプラインがトリガーされます。This triggers the new release pipeline, which deploys the site to the staging slot. Contoso については、このスロットの URL は https://smarthotelcontoso-staging.azurewebsites.net/ です。For Contoso, the URL for the slot is https://smarthotelcontoso-staging.azurewebsites.net/.

    20. ビルドが完了すると、リリースがスロットにデプロイされ、Azure DevOps から承認のために開発リーダーにメールが送られます。After the build finishes and the release is deployed to the slot, Azure DevOps emails the dev lead for approval.

    21. 開発リーダーは [承認の表示] を選択し、Azure DevOps ポータルで要求を承認または拒否できます。The dev lead selects View approval and can approve or reject the request in the Azure DevOps portal.

      配置後の承認の [承認または拒否] リンクのスクリーンショット。Screenshot of the post-deployment approval "Approve or reject" link.
      図 72: 保留中のリリース承認要求。Figure 72: A pending release approval request.

    22. 開発リーダーがコメントを入力して承認します。The dev lead makes a comment and approves. ステージングprod スロットの交換が開始され、ビルドが運用環境に移行します。This starts swapping the staging and prod slots and moves the build into production.

      配置後の承認とコメントのスクリーンショット。Screenshot of post-deployment approval and comment.
      図 73: 運用環境へのビルドの移行。Figure 73: Moving the build into production.

    23. パイプラインがスワップを完了します。The pipeline completes the swap.

      ビルドのデプロイの状態を示すスクリーンショット。Screenshot showing the statuses of the build deployment.
      図 74: スワップの完了。Figure 74: Completing the swap.

    24. チームは prod スロットをチェックして、https://smarthotelcontoso.azurewebsites.net/ で Web アプリが運用環境にあることを確認します。The team checks the prod slot to verify that the web app is in production at https://smarthotelcontoso.azurewebsites.net/.

    PetChecker 関数アプリをデプロイするDeploy the PetChecker function app

    Contoso の管理者は次のようにしてアプリケーションをデプロイします。Contoso admins deploy the application by doing the following:

    1. Azure DevOps プロジェクトに接続することで、リポジトリを開発用マシンにローカルに複製します。They clone the repository locally to the development machine by connecting to the Azure DevOps project.

    2. Visual Studio でフォルダーを開いて、リポジトリ内のすべてのファイルを表示します。In Visual Studio, they open the folder to show all the files in the repo.

    3. src/PetCheckerFunction/local.settings.json ファイルを開き、ストレージ、Azure Cosmos DB データベース、および Computer Vision API 用のアプリ設定を追加します。They open the src/PetCheckerFunction/local.settings.json file and add the app settings for storage, the Azure Cosmos DB database, and the Computer Vision API.

      .json ファイルに含まれるアプリ設定を Visual Studio で表示した画面のスクリーンショット。Screenshot of the app settings in the .json file in Visual Studio.
      図 75: 関数のデプロイ。Figure 75: Deploying the function.

    4. コードをコミットし、Azure DevOps に同期して戻し、変更をプッシュします。They commit the code and sync it back to Azure DevOps, pushing their changes.

    5. 新しいビルド パイプラインを追加し、ソースに [Azure DevOps Git] を選択します。They add a new build pipeline and then select Azure DevOps Git for the source.

    6. [ASP.NET Core (.NET Framework)] テンプレートを選択します。They select the ASP.NET Core (.NET Framework) template.

    7. テンプレートの既定値をそのまま使用します。They accept the defaults for the template.

    8. [トリガー] で、 [継続的インテグレーションを有効にする] を選択し、 [保存してキューに登録] を選択してビルドを開始します。Under Triggers, they select Enable continuous integration and then select Save & Queue to start a build.

    9. ビルドが完了したら、 [スロットを使用した Azure App Service の配置] を追加してリリース パイプラインをビルドします。After the build succeeds, they build a release pipeline, adding Azure App Service deployment with slot.

    10. 環境に Prod という名前を付けて、サブスクリプションを選択します。They name the environment Prod and then select the subscription. [アプリの種類][関数アプリ] に設定し、アプリサービス名を smarthotelpetchecker とします。They set the App type to Function App and the app service name as smarthotelpetchecker.

      アプリの種類とアプリ サービス名のスクリーンショット。Screenshot of the app type and app service name.
      図 76: 関数アプリ。Figure 76: The function app.

    11. 成果物 (ビルド) を追加します。They add an artifact, Build.

      成果物の追加画面のスクリーンショット (ソースの種類として [ビルド] を選択したところ)。Screenshot of adding an artifact, with the Build source type.
      図 77: 成果物の追加。Figure 77: Adding an artifact.

    12. [継続的配置トリガー] を有効にし、 [保存] を選択します。They enable Continuous deployment trigger and then select Save.

    13. [Queue new build](新しいビルドをキューに登録) を選択し、CI/CD パイプライン全体を実行します。They select Queue new build to run the full CI/CD pipeline.

    14. 関数はデプロイされた後、Azure portal に [実行中] 状態で表示されます。After the function is deployed, it appears in the Azure portal with the status Running.

      "実行中" 状態で表示された関数アプリのスクリーンショット。Screenshot of the function app, showing a "Running" status.
      図 78: 関数の状態の更新。Figure 78: Updating the function's status.

    15. ブラウザーで http://smarthotel360public.azurewebsites.net/pets の Pet Checker アプリケーションにアクセスし、正常に動作していることを確認します。They browse to the Pet Checker application, at http://smarthotel360public.azurewebsites.net/pets, to verify that it's working properly.

    16. アバターをクリックして、写真をアップロードします。They select the avatar to upload a picture.

      アバターに画像を割り当てるペインのスクリーンショット。Screenshot of the pane for assigning a picture to an avatar.
      図 79: アバターへの写真の割り当て。Figure 79: Assigning a picture to an avatar.

    17. 最初に確認したい写真は、小さい犬の写真です。The first photo they want to check is of a small dog.

      犬の写真のスクリーンショット。Screenshot showing a photo of a dog.
      図 80: 写真の確認。Figure 80: Checking the photo.

    18. アプリケーションによって受領のメッセージが返されます。The application returns an acceptance message.

      受領のメッセージのスクリーンショット。Screenshot of an acceptance message.
      図 81: 受領のメッセージ。Figure 81: An acceptance message.

    デプロイを再調査するReview the deployment

    リソースを Azure に移行したら、新しいインフラストラクチャを完全に操作可能にして、セキュリティ保護する必要があります。With the migrated resources in Azure, Contoso now needs to fully operationalize and secure the new infrastructure.

    SecuritySecurity

    バックアップとディザスター リカバリーBackups and disaster recovery

    ライセンスとコストの最適化Licensing and cost optimization

    • すべてのリソースをデプロイした後、Contoso はインフラストラクチャ計画に基づいて Azure タグを割り当てる必要があります。After all resources are deployed, Contoso should assign Azure tags based on their infrastructure planning.
    • すべてのライセンスは、Contoso が使用している PaaS サービスのコストに組み込まれています。All licensing is built into the cost of the PaaS services that Contoso is consuming. これはマイクロソフト エンタープライズ契約から差し引かれます。This will be deducted from the Enterprise Agreement.
    • Contoso では、Azure Cost Management と Billing を有効にして、Azure リソースの監視と管理を支援します。Contoso will enable Azure Cost Management and Billing to help monitor and manage the Azure resources.

    まとめConclusion

    この記事で、Contoso は SmartHotel360 アプリケーションを Azure にリビルドしました。In this article, Contoso rebuilds the SmartHotel360 application in Azure. オンプレミス アプリケーションのフロントエンド VM は、Azure App Service Web アプリにリビルドされます。The on-premises application front-end VM is rebuilt for Azure App Service web apps. アプリケーションのバックエンドは、AKS によって管理されるコンテナーにデプロイされたマイクロサービスを使用してビルドされます。The application back end is built by using microservices that are deployed to containers managed by AKS. Contoso は機能をペットの写真アプリケーションで強化しました。Contoso enhanced functionality with a pet photo application.

    推奨されるスキルSuggested skills

    Microsoft Learn は学習に対する新しいアプローチです。Microsoft Learn is a new approach to learning. クラウド導入に伴う新たな責任に対する準備は容易にできるものではありません。Readiness for the new skills and responsibilities that come with cloud adoption doesn't come easily. Microsoft Learn では、目標を早く達成するのに役立つ、実践的な学習に対するより価値あるアプローチを提供します。Microsoft Learn provides a more rewarding approach to hands-on learning that helps you achieve your goals faster. Microsoft Learn では、ポイントを獲得し、レベルを積み重ねて、さらなる達成を目指すことができます。With Microsoft Learn, you can earn points, rise through levels, and achieve more.

    ここでは、Azure の Contoso SmartHotel360 アプリケーションに合わせてカスタマイズされた Microsoft Learn のラーニング パスの例を 2 つ紹介します。Here are two examples of tailored learning paths on Microsoft Learn that align with the Contoso SmartHotel360 application in Azure.

    • Azure App Service を使用して Azure に Web サイトをデプロイする : Azure に Web アプリを作成すれば、基盤となるサーバー、ストレージ、ネットワーク アセットを操作しなくても簡単に Web サイトを公開して管理することができます。Deploy a website to Azure with Azure App Service: By creating web apps in Azure, you can publish and manage your website easily without having to work with the underlying servers, storage, or network assets. 代わりに、Web サイトの機能に焦点を当て、堅牢な Azure プラットフォームを使用して、サイトへの安全なアクセスを提供することができます。Instead, you can focus on your website features and rely on the robust Azure platform to help provide secure access to your site.

    • Azure Cognitive Vision サービスを使用してイメージを処理して分類する : Microsoft Cognitive Services では、ご利用のアプリケーションで Computer Vision 機能を有効にできる事前に作成した機能を提供します。Process and classify images with the Azure Cognitive Vision Services: Azure Cognitive Services offers prebuilt functionality to enable computer vision functionality in your applications. Cognitive Vision サービスを使用して、顔を検出し、イメージをタグ付けして分類し、オブジェクトを特定する方法について説明します。Learn how to use the cognitive vision services to detect faces, tag and classify images, and identify objects.