チュートリアル: Docker Compose を使用して複数コンテナーのアプリを作成するTutorial: Create a multi-container app with Docker Compose

このチュートリアルでは、Visual Studio でコンテナー ツールを使用しているときに、複数のコンテナーを管理し、それらの間で通信を行う方法について学習します。In this tutorial, you'll learn how to manage more than one container and communicate between them when using Container Tools in Visual Studio. 複数のコンテナーを管理するには、"コンテナー オーケストレーション" が必要であり、Docker Compose、Kubernetes、Service Fabric などのオーケストレーターが必要です。Managing multiple containers requires container orchestration and requires an orchestrator such as Docker Compose, Kubernetes, or Service Fabric. ここでは、Docker Compose を使用します。Here, we'll use Docker Compose. Docker Compose は、開発サイクル中での、ローカルのデバッグとテストに適しています。Docker Compose is great for local debugging and testing in the course of the development cycle.

必須コンポーネントPrerequisites

  • Docker DesktopDocker Desktop
  • Web 開発Azure ツール ワークロード、または .NET Core クロスプラットフォーム開発 ワークロードがインストールされた Visual Studio 2017Visual Studio 2017 with the Web Development, Azure Tools workload, or .NET Core cross-platform development workload installed

Web アプリケーション プロジェクトを作成するCreate a Web Application project

Visual Studio で、ASP.NET Core Web アプリケーション プロジェクトを WebFrontEnd という名前で作成します。In Visual Studio, create an ASP.NET Core Web Application project, named WebFrontEnd. [Web アプリケーション] を選択し、Razor Pages を使用して Web アプリケーションを作成します。Select Web Application to create a web application with Razor pages.

[Docker サポートを有効にする] を選択しないでください。Do not select Enable Docker Support. Docker サポートは、後で追加します。You'll add Docker support later.

Web プロジェクト作成のスクリーンショット

ASP.NET Core Web アプリケーションの [新しいプロジェクトの構成] 画面のスクリーンショット。[プロジェクト名] と [ソリューション名] のフィールドが "WebFrontEnd" に設定されています。

[Docker サポートを有効にする] を選択しないでください。Do not select Enable Docker Support. Docker サポートは、後で追加します。You'll add Docker support later.

[新しい ASP.NET Core Web アプリケーションを作成する] 画面のスクリーンショット。Web アプリケーションが選択されています。

Web API プロジェクトを作成するCreate a Web API project

同じソリューションにプロジェクトを追加し、MyWebAPI という名前を付けます。Add a project to the same solution and call it MyWebAPI. プロジェクト タイプとして API を選択し、 [HTTPS 用の構成] チェックボックスをオフにします。Select API as the project type, and clear the checkbox for Configure for HTTPS. この設計では、同じ Web アプリケーション内のコンテナー間の通信ではなく、クライアントとの通信にのみ SSL を使用します。In this design, we're only using SSL for communication with the client, not for communication from between containers in the same web application. WebFrontEnd のみが HTTPS を必要とし、例のコードでは、そのチェックボックスをオフにしていることを前提としています。Only WebFrontEnd needs HTTPS and the code in the examples assumes that you have cleared that checkbox. 一般に、Visual Studio によって使用される .NET 開発者証明書は外部からコンテナーへの要求に対してのみサポートされ、コンテナーからコンテナーへの要求に対してはサポートされません。In general, the .NET developer certificates used by Visual Studio are only supported for external-to-container requests, not for container-to-container requests.

Web API プロジェクト作成のスクリーンショット

Web API プロジェクト作成のスクリーンショット

コードを追加して Web API を呼び出すAdd code to call the Web API

  1. WebFrontEnd プロジェクトで、Index.cshtml.cs ファイルを開き、OnGet メソッドを次のコードに置き換えます。In the WebFrontEnd project, open the Index.cshtml.cs file, and replace the OnGet method with the following code.

     public async Task OnGet()
     {
        ViewData["Message"] = "Hello from webfrontend";
    
        using (var client = new System.Net.Http.HttpClient())
        {
           // Call *mywebapi*, and display its response in the page
           var request = new System.Net.Http.HttpRequestMessage();
           // request.RequestUri = new Uri("http://mywebapi/WeatherForecast"); // ASP.NET 3 (VS 2019 only)
           request.RequestUri = new Uri("http://mywebapi/api/values/1"); // ASP.NET 2.x
           var response = await client.SendAsync(request);
           ViewData["Message"] += " and " + await response.Content.ReadAsStringAsync();
        }
     }
    

    注意

    実際のコードでは、各要求の後で HttpClient を破棄しないでください。In real-world code, you shouldn't dispose HttpClient after every request. ベスト プラクティスについては、「HttpClientFactory を使用して回復力の高い HTTP 要求を実装する」を参照してください。For best practices, see Use HttpClientFactory to implement resilient HTTP requests.

    Visual Studio 2019 以降の .NET Core 3.1 では、Web API テンプレートで WeatherForecast API が使用されるため、この行のコメントを解除し、ASP.NET 2.x 用の行をコメント アウトします。For .NET Core 3.1 in Visual Studio 2019 or later, the Web API template uses a WeatherForecast API, so uncomment that line and comment out the line for ASP.NET 2.x.

  2. Index.cshtml ファイルで、ViewData["Message"] を表示する行を追加し、ファイルを次のコードのようにします。In the Index.cshtml file, add a line to display ViewData["Message"] so that the file looks like the following code:

    @page
    @model IndexModel
    @{
        ViewData["Title"] = "Home page";
    }
    
    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
        <p>@ViewData["Message"]</p>
    </div>
    
  3. (ASP.NET 2.x のみ) 次に、Web API プロジェクトで、Values コントローラーにコードを追加し、webfrontend から追加した呼び出しに対して API によって返されるメッセージをカスタマイズします。(ASP.NET 2.x only) Now in the Web API project, add code to the Values controller to customize the message returned by the API for the call you added from webfrontend.

      // GET api/values/5
      [HttpGet("{id}")]
      public ActionResult<string> Get(int id)
      {
          return "webapi (with value " + id + ")";
      }
    

    .NET Core 3.1 では、既に存在する WeatherForecast API を使用できるため、これは必要ありません。With .NET Core 3.1, you don't need this, because you can use the WeatherForecast API that is already there. ただし、Startup.csConfigure メソッドの UseHttpsRedirection の呼び出しをコメント アウトする必要があります。このコードでは、Web API を呼び出すために、HTTPS ではなく HTTP が使用されているためです。However, you need to comment out the call to UseHttpsRedirection in the Configure method in Startup.cs, because this code uses HTTP, not HTTPS, to call the Web API.

                //app.UseHttpsRedirection();
    
  4. WebFrontEnd プロジェクトで、[追加] > [コンテナー オーケストレーター サポート] の順に選択します。In the WebFrontEnd project, choose Add > Container Orchestrator Support. [Docker サポート オプション] ダイアログが表示されます。The Docker Support Options dialog appears.

  5. [Docker Compose] を選択します。Choose Docker Compose.

  6. Linux などのターゲット OS を選択します。Choose your Target OS, for example, Linux.

    ターゲット OS 選択のスクリーンショット

    Visual Studio では、docker-compose.yml ファイルと .dockerignore ファイルが、ソリューション内の docker-compose ノードで作成されます。そのプロジェクトは、スタートアップ プロジェクトであることを示す太字のフォントで表示されます。Visual Studio creates a docker-compose.yml file and a .dockerignore file in the docker-compose node in the solution, and that project shows in boldface font, which shows that it's the startup project.

    ソリューション エクスプローラーと、追加された docker-compose プロジェクトのスクリーンショット

    docker-compose.yml は、次のように表示されます。The docker-compose.yml appears as follows:

    version: '3.4'
    
     services:
       webfrontend:
         image: ${DOCKER_REGISTRY-}webfrontend
         build:
           context: .
           dockerfile: WebFrontEnd/Dockerfile
    

    .dockerignore ファイルには、Docker によってコンテナーに含める必要のないファイルの種類と拡張機能が含まれます。The .dockerignore file contains file types and extensions that you don't want Docker to include in the container. これらのファイルは、開発中のアプリまたはサービスの一部ではなく、一般的に、開発環境やソース管理に関連付けられるものです。These files are generally associated with the development environment and source control, not part of the app or service you're developing.

    実行中のコマンドの詳細については、[出力] ウィンドウの [コンテナー ツール] セクションを参照してください。Look at the Container Tools section of the output pane for details of the commands being run. コマンドライン ツールの docker-compose が、ランタイム コンテナーの構成や作成に使用されているのが確認できます。You can see the command-line tool docker-compose is used to configure and create the runtime containers.

  7. Web API プロジェクトで、プロジェクト ノードを再度右クリックして、 [追加] > [コンテナー オーケストレーター サポート] の順に選択します。In the Web API project, again right-click on the project node, and choose Add > Container Orchestrator Support. [Docker Compose] を選択し、同じターゲット OS を選択します。Choose Docker Compose, and then select the same target OS.

    注意

    この手順では、Visual Studio によって Dockerfile が作成されます。In this step, Visual Studio will offer to create a Dockerfile. 既に Docker サポートがあるプロジェクトでこれを行う場合は、既存の Dockerfile を上書きするかどうかを確認するメッセージが表示されます。If you do this on a project that already has Docker support, you are prompted whether you want to overwrite the existing Dockerfile. 保持する Dockerfile に変更を加えた場合は、[いいえ] を選択します。If you've made changes in your Dockerfile that you want to keep, choose no.

    Visual Studio によって、docker compose YML ファイルにいくつかの変更が加えられます。Visual Studio makes some changes to your docker compose YML file. これで、両方のサービスが含まれることになります。Now both services are included.

    version: '3.4'
    
    services:
      webfrontend:
        image: ${DOCKER_REGISTRY-}webfrontend
        build:
          context: .
          dockerfile: WebFrontEnd/Dockerfile
    
      mywebapi:
        image: ${DOCKER_REGISTRY-}mywebapi
        build:
          context: .
          dockerfile: MyWebAPI/Dockerfile
    
  8. サイトをローカルで実行して (F5 キーまたは Ctrl + F5 キー)、想定どおりに動作することを確認します。Run the site locally now (F5 or Ctrl+F5) to verify that it works as expected. .NET Core 2.x バージョンですべてが正しく構成されている場合、"Hello from webfrontend and webapi (with value 1)" というメッセージが表示されます。If everything is configured correctly with the .NET Core 2.x version, you see the message "Hello from webfrontend and webapi (with value 1)." .NET Core 3 では、天気予報データが表示されます。With .NET Core 3, you see weather forecast data.

    コンテナー オーケストレーションを追加するときに使用する最初のプロジェクトは、実行またはデバッグの際に起動されるように設定されます。The first project that you use when you add container orchestration is set up to be launched when you run or debug. docker-compose プロジェクトの [プロジェクトのプロパティ] で、起動アクションを構成できます。You can configure the launch action in the Project Properties for the docker-compose project. docker-compose プロジェクト ノードで、右クリックしてコンテキスト メニューを開き、[プロパティ] を選択するか、Alt + Enter キーを押します。On the docker-compose project node, right-click to open the context menu, and then choose Properties, or use Alt+Enter. 次のスクリーンショットは、ここで使用するソリューションに必要なプロパティを示しています。The following screenshot shows the properties you would want for the solution used here. たとえば、[サービス URL] プロパティをカスタマイズすることで読み込まれるページを変更できます。For example, you can change the page that is loaded by customizing the Service URL property.

    docker-compose プロジェクト プロパティのスクリーンショット

    起動時に表示されるものを次に示します (.NET Core 2.x バージョン)。Here's what you see when launched (the .NET Core 2.x version):

    実行中の Web アプリのスクリーンショット

    .NET 3.1 の Web アプリでは、JSON 形式で気象データが表示されます。The web app for .NET 3.1 shows the weather data in JSON format.

次のステップNext steps

Azure にコンテナーをデプロイするためのオプションを確認します。Look at the options for deploying your containers to Azure.

関連項目See also

Docker ComposeDocker Compose
コンテナー ツールContainer Tools