ASP.NET Core Blazor + Docker環境をVSCodeでデバッグする方法

Dockerを利用したASP.NET Core BlazorアプリケーションをVisual Studio Code（以下「VSCode」と表記）でデバッグを行う際に設定した内容をまとめます．

尚，Visual Studio 2022でデバッグを行う方法については，以下のMicrosoftのドキュメントに記載があります．

1. 環境

• MacBook Air M2 (macOS Sequoia)
• .NET 8
• ASP.NET Core Blazor

2. ディレクトリ構成(デバッグ設定前)

当記事では以下の構成に基づく設定手順をご紹介します．

Dockerfile
docker-compose.yml
BlazorProject
├ nginx
| └ default.conf
├ ...
├ appsettings.json
└ BlazorProject.csproj
BlazorProject.sln

• BlazorProjectはASP.NET Core Blazorで利用するファイルを格納するディレクトリです．
• nginx/default.confはASP.NET CoreのリバースプロキシをNginxで構成するためのファイルです．
  docker-compose.ymlにて/etc/nginx/conf.d/default.confとして配置することで機能させます．

2.1. 各ファイルの内容

Dockerfile

FROM mcr.microsoft.com/dotnet/sdk:8.0 AS base

WORKDIR /app/src
COPY ./BlazorProject ./

RUN dotnet restore

ENTRYPOINT [ "dotnet", "watch", "run", "--no-restore" ]

docker-compose.yml

services:
    # ASP.NET Coreが動作するコンテナ
    app:
        build:
            context: .
            dockerfile: Dockerfile
        expose:
            - 5000:5000
        networks:
            - project-network
        volumes:
            - ./BlazorProject:/app/src

    # appコンテナのリバースプロキシ
    web:
        image: nginx:alpine
        ports:
            - 8080:80
        networks:
            - project-network
        volumes:
            - ./BlazorProject/nginx/default.conf:/etc/nginx/conf.d/default.conf

networks:
    project-network:
        driver: bridge

BlazorProject/nginx/default.conf

map $http_connection $connection_upgrade {
    "~*Upgrade" $http_connection;
    default keep-alive;
}

server {
    listen      80;
    server_name blazor-project.dev;
    location / {
        proxy_pass         http://app:5000/;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection $connection_upgrade;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_redirect     off;
    }
}

BlazorProject/appsettings.json

{
    "Logging": {
        "LogLevel": {
            "Default": "Information",
            "Microsoft.AspNetCore": "Warning"
        }
    },
    "Kestrel": {
        "Endpoints": {
            "Http": {
                "Url": "http://*:5000" // リバースプロキシに5000番ポートを公開するための設定
            }
        }
    },
    "AllowedHosts": "*"
}

3. デバッグ設定手順

1. 拡張機能「Docker」がインストールされていない場合はインストールします．
   

2. Workspaceの一番上のディレクトリに.vscodeディレクトリを追加します．さらにその中にlaunch.jsonファイルを追加します．
   追加後のディレクトリ構成は以下の通りです．

   .vscode
   └ launch.json　# 追加
   Dockerfile
   docker-compose.yml
   BlazorProject
   ├ nginx
   | └ default.conf
   ├ ...
   ├ appsettings.json
   └ BlazorProject.csproj
   BlazorProject.sln
   

3. launch.jsonに以下を記載します．

   launch.json

   {
       "version": "0.2.0",
       "configurations": [
           {
               "name": "Attach Blazor Project", // 任意の名前を指定可能
               "type": "docker",
               "request": "attach",
               "platform": "netCore",
               "processId": "${command:pickRemoteProcess}",
               "sourceFileMap": {
                   "/app/src": "${workspaceFolder}/BlazorProject" // "<コンテナ側のパス>": "<ホスト側のパス>"
               }
           }
       ]
   }
   

   このうちsourceFileMapにはホスト側とコンテナ側のASP.NET Coreのファイルを格納するパスを記載します．
   ここではdocker-compose.ymlに以下の記載をしていますので，

   docker-compose.yml

   app:
       volumes:
           - ./BlazorProject:/app/src
   

   sourceFileMapは以下の記載となります．

   launch.json

   "sourceFileMap": {
       "/app/src": "${workspaceFolder}/BlazorProject"
   }
   

4. docker compose up -d等でコンテナを起動します．

5. メニューバーのView -> Runから「Run and Debug」コンソールを開きます．
   そしてlaunch.jsonのnameに記載の名称が選択された状態で，Start Debuggingボタンをクリックします．
   

   コンテナグループを選択します．
   

6. ASP.NET Coreのプロジェクトが動いているコンテナ（ここではblazorproject-app）を選択します．
   

7. .NET Debuggerをコンテナ内にコピーするかどうかを尋ねられます．ここでNoを選択するとデバッグできないのでYesを選択します．
   

8. アタッチするプロセスとして，.csprojファイルと同名のプロセス（ここではBlazorProject）を選択します．
   

9. 以上で設定完了です！問題なく動作していればブレークポイントを置いたり変数のウォッチが可能です．