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. デバッグ設定手順

拡張機能「Docker」がインストールされていない場合はインストールします．
Workspaceの一番上のディレクトリに.vscodeディレクトリを追加します．さらにその中にlaunch.jsonファイルを追加します．
追加後のディレクトリ構成は以下の通りです．
```
.vscode
└ launch.json　# 追加
Dockerfile
docker-compose.yml
BlazorProject
├ nginx
| └ default.conf
├ ...
├ appsettings.json
└ BlazorProject.csproj
BlazorProject.sln
```

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"
}

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

コンテナグループを選択します．
ASP.NET Coreのプロジェクトが動いているコンテナ（ここではblazorproject-app）を選択します．
.NET Debuggerをコンテナ内にコピーするかどうかを尋ねられます．ここでNoを選択するとデバッグできないのでYesを選択します．
アタッチするプロセスとして，.csprojファイルと同名のプロセス（ここではBlazorProject）を選択します．
以上で設定完了です！問題なく動作していればブレークポイントを置いたり変数のウォッチが可能です．