Docker Compose를 사용하여 다중 컨테이너 앱 만들기Create a Multi-Container App with Docker Compose

이 자습서에서는 Mac용 Visual Studio에서 둘 이상의 컨테이너를 관리하고, Docker Compose를 사용할 때 컨테이너 간에 통신하는 방법을 알아봅니다.In this tutorial, you'll learn how to manage more than one container and communicate between them when using Docker Compose in Visual Studio for Mac.

사전 요구 사항Prerequisites

ASP.NET Core 웹 애플리케이션을 만들고 Docker 지원 추가Create an ASP.NET Core Web Application and Add Docker Support

  1. 파일 > 새 솔루션 으로 이동하여 새 솔루션을 만듭니다.Create a new solution by going to File > New Solution.
  2. 웹 및 콘솔 > 앱 에서 웹 애플리케이션 템플릿을 선택합니다. 새 ASP.NET 애플리케이션 만들기Under Web and Console > App choose the Web Application template: Create a new ASP.NET application
  3. 대상 프레임워크를 선택합니다.Select the target framework. 이 예제에서는 .NET Core 3.1을 사용합니다. 대상 프레임워크 설정In this example we will use .NET Core 3.1: Set target framework
  4. 프로젝트 이름(이 예제에서는 DockerDemoFrontEnd), 솔루션 이름(DockerDemo) 등의 프로젝트 정보를 입력합니다.Enter the project details, such as Project Name (DockerDemoFrontEnd in this example) and Solution Name (DockerDemo). 생성된 프로젝트에는 ASP.NET Core 웹 사이트를 빌드 및 실행하는 데 필요한 모든 기본 사항이 포함되어 있습니다.The created project contains all the basics you need to build and run an ASP.NET Core web site.
  5. 솔루션 창에서 DockerDemoFrontEnd 프로젝트를 마우스 오른쪽 단추로 클릭하고 추가 > Docker 지원 추가 를 선택합니다. Docker 지원 추가In the Solution Window, right click the DockerDemoFrontEnd project and select Add > Add Docker Support: Add docker support

Mac용 Visual Studio에서 docker-compose 라는 새 프로젝트를 솔루션에 자동으로 추가하고, 기존 프로젝트에 Dockerfile 을 추가합니다.Visual Studio for Mac will automatically add a new project to your solution called docker-compose and add a Dockerfile to your existing project.

ASP.NET Core Web API를 만들고 Docker 지원 추가Create an ASP.NET Core Web API and Add Docker Support

다음으로, 백 엔드 API 역할을 할 두 번째 프로젝트를 만들겠습니다.Next we will create a second project which will act as our backend API. .NET Core API 템플릿에는 RESTful 요청을 처리할 수 있는 컨트롤러가 포함되어 있습니다.The .NET Core API template includes a controller that allows us to handle RESTful requests.

  1. 솔루션을 마우스 오른쪽 단추로 클릭하고 추가 > 새 프로젝트 추가 를 선택하여 기존 솔루션에 새 프로젝트를 추가합니다.Add a new project to the existing solution by right-clicking on the solution and choosing Add > Add New Project.
  2. 웹 및 콘솔 > 앱 에서 API 템플릿을 선택합니다.Under Web and Console > App choose the API template.
  3. 대상 프레임워크를 선택합니다.Select the target framework. 이 예제에서는 .NET Core 3.1을 사용합니다.In this example we will use .NET Core 3.1.
  4. 프로젝트 이름(이 예제에서는 MyWebAPI) 등의 프로젝트 정보를 입력합니다.Enter the project details, such as Project Name (MyWebAPI in this example).
  5. 프로젝트가 생성되면 솔루션 창으로 이동하여 MyWebAPI 프로젝트를 마우스 오른쪽 단추로 클릭하고 추가 > Docker 지원 추가 를 선택합니다.Once created, go to the Solution Window and right click the MyWebAPI project and select Add > Add Docker Support.

docker-compose 프로젝트의 docker-compose.yml 파일이 기존 웹앱 프로젝트와 함께 API 프로젝트를 포함하도록 자동으로 업데이트됩니다.The docker-compose.yml file in the docker-compose project will be automatically updated to include the API project alongside the existing Web App project. docker-compose 프로젝트를 빌드 및 실행하는 경우, 각 프로젝트가 개별 Docker 컨테이너에 배포됩니다.When we build and run the docker-compose project, each of these projects will be deployed to a separate Docker container.

version: '3.4'

services:
  dockerdemofrontend:
    image: ${DOCKER_REGISTRY-}dockerdemofrontend
    build:
      context: .
      dockerfile: DockerDemoFrontEnd/Dockerfile

  mywebapi:
    image: ${DOCKER_REGISTRY-}mywebapi
    build:
      context: .
      dockerfile: MyWebAPI/Dockerfile

두 개의 컨테이너 통합Integrate The Two Containers

이제 솔루션에 두 개의 ASP.NET 프로젝트가 있으며, 둘 다 Docker를 지원하도록 구성되었습니다.We now have two ASP.NET projects in our solution and both are configured with Docker support. 다음으로, 일부 코드를 추가해야 합니다.Next we need to add some code!

  1. DockerDemoFrontEnd 프로젝트에서 Pages/Index.cshtml.cs 파일을 열고 OnGet 메서드를 다음 코드로 바꿉니다.In the DockerDemoFrontEnd project, open the Pages/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");
           var response = await client.SendAsync(request);
           ViewData["Message"] += " and " + await response.Content.ReadAsStringAsync();
        }
     }
    

    참고

    프로덕션 코드의 경우 모든 요청 이후 HttpClient를 삭제하면 안 됩니다.In production code, you shouldn't dispose HttpClient after every request. 모범 사례는 HttpClientFactory를 사용하여 복원력 있는 HTTP 요청 구현을 참조하세요.For best practices, see Use HttpClientFactory to implement resilient HTTP requests.

  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="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
        <p>@ViewData["Message"]</p>
    </div>
    
  3. 프런트 엔드 및 웹 API 프로젝트 모두에서, 이 샘플 코드는 HTTPS가 아닌 HTTP를 사용하여 Web API를 호출하므로 Startup.csConfigure 메서드에서 Microsoft.AspNetCore.Builder.HttpsPolicyBuilderExtensions.UseHttpsRedirection에 대한 호출을 주석으로 처리합니다.In both the Front End and Web API projects, comment out the call to Microsoft.AspNetCore.Builder.HttpsPolicyBuilderExtensions.UseHttpsRedirection in the Configure method in Startup.cs, because this sample code uses HTTP, not HTTPS, to call the Web API.

                //app.UseHttpsRedirection();
    
  4. docker-compose 프로젝트를 시작 프로젝트로 설정하고 실행 > 디버깅 시작 으로 이동합니다.Set the docker-compose project as the startup project and go to Run > Start Debugging. 모두 제대로 구성된 경우 “Hello from webfrontend and webapi (with value 1).” 메시지가 표시됩니다.If everything is configured correctly, you see the message "Hello from webfrontend and webapi (with value 1).":

Docker 다중 컨테이너 솔루션 실행