Visual Studio for Mac で Docker Compose を使って複数コンテナー アプリを作成する

  • [アーティクル]

重要

Visual Studio for Mac は、Microsoft の モダン ライフサイクル ポリシーに従って、2024 年 8 月 31 日に廃止される予定です。 引き続き Visual Studio for Mac を使用できますが、VS Code 用の新しい C# 開発キット拡張機能のプレビュー バージョンなど、Mac 上の開発者向けの他のいくつかのオプションがあります。

サポートタイムラインと代替方法の詳細をご確認ください。

このチュートリアルでは、Visual Studio for Mac で Docker Compose を使用しているときに、複数のコンテナーを管理し、それらの間で通信を行う方法について学習します。

Windows バージョンの Visual Studio での手順については、Windows 用 Visual Studio を使った「チュートリアル - Docker Compose を使用して複数コンテナーのアプリを作成する」を参照してください。

必須コンポーネント

ASP.NET Core Web アプリケーションを作成し、Docker のサポートを追加する

  1. [ファイル] > [新しいソリューション] に移動して、新しいソリューションを作成します。
  2. [Web とコンソール] > [アプリ] で、[Web アプリケーション] テンプレートを選びます。Create a new ASP.NET application
  3. ターゲット フレームワークを選択します。 この例では、.NET Core 3.1 を使用します。Set target framework
  4. プロジェクト名 (この例では DockerDemoFrontEnd) やソリューション名 (DockerDemo) など、プロジェクトの詳細を入力します。 作成されるプロジェクトには、ASP.NET Core の Web サイトをビルドして実行するために必要なすべての基本が含まれています。
  5. [ソリューション] ウィンドウで DockerDemoFrontEnd プロジェクトを右クリックし、[追加] > [Docker サポートの追加] を選びます。Add docker support

Visual Studio for Mac で、docker-compose という名前の新しいプロジェクトがソリューションに自動的に追加され、既存のプロジェクトに Dockerfile が追加されます。

ASP.NET Core Web API を作成し、Docker のサポートを追加する

次に、バックエンド API として機能する 2 つ目のプロジェクトを作成します。 .NET Core API テンプレートには、RESTful 要求を処理できるコントローラーが含まれています。

  1. ソリューションを右クリックして [追加] > [新しいプロジェクトの追加] を選び、既存のソリューションに新しいプロジェクトを追加します。
  2. [Web とコンソール] >[アプリ] で、[API] テンプレートを選びます。
  3. ターゲット フレームワークを選択します。 この例では、.NET Core 3.1 を使用します。
  4. プロジェクト名 (この例では MyWebAPI) など、プロジェクトの詳細を入力します。
  5. 作成されたら、[ソリューション] ウィンドウに移動して MyWebAPI プロジェクトを右クリックし、[追加] > [Docker サポートの追加] を選びます。

docker-compose プロジェクトの docker-compose.yml ファイルが、既存の Web アプリ プロジェクトと共に API プロジェクトを含むように自動的に更新されます。 docker-compose プロジェクトをビルドして実行すると、これらの各プロジェクトが異なる Docker コンテナーに配置されます。

version: '3.4'

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

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

2 つのコンテナーを統合する

これで、ソリューションには 2 つの ASP.NET プロジェクトがあり、両方に Docker のサポートが構成されています。 次に、コードを追加する必要があります。

  1. DockerDemoFrontEnd プロジェクトで、Pages/Index.cshtml.cs ファイルを開き、OnGet メソッドを次のコードに置き換えます。

     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 を破棄しないでください。 ベスト プラクティスについては、「HttpClientFactory を使用して回復力の高い HTTP 要求を実装する」を参照してください。

  2. Index.cshtml ファイルで、ViewData["Message"] を表示する行を追加し、ファイルを次のコードのようにします。

    @page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    <p>@ViewData["Message"]</p>
</div>

  3. フロントエンドと Web API の両方のプロジェクトで、Startup.cs 内の Configure メソッドでの Microsoft.AspNetCore.Builder.HttpsPolicyBuilderExtensions.UseHttpsRedirection への呼び出しをコメントアウトしてください。このサンプル コードでは、Web API を呼び出すために HTTPS ではなく HTTP を使用するためです。

                //app.UseHttpsRedirection();

  4. docker-compose プロジェクトをスタートアップ プロジェクトとして設定し、[実行] > [デバッグの開始] に移動します。 すべてが正しく構成されている場合、"Hello from webfrontend and webapi (with value 1)" というメッセージが表示されます。

Docker multi container solution running