つばろぐ

主に C#, .NET, Azure の備忘録です。たまに日記。

GitHub CodespacesでのASP.NET Core 6.0のデバッグ構成は少し工夫が必要

ASP.NET Core 6.0 を GitHub Codespaces で開発する際に、VSCodeデバッグ構成で少しハマったのでメモ。*1


VSCodeデバッグ構成を作成すると .vscode/launch.json が作成されます。
標準的な構成はこんな内容です。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/aspnetapp/bin/Debug/net6.0/aspnetapp.dll",
            "args": [],
            "cwd": "${workspaceFolder}/aspnetapp",
            "stopAtEntry": false,
            "serverReadyAction": {
                "action": "openExternally",
                "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        },
        {
            "name": ".NET Core Attach",
            "type": "coreclr",
            "request": "attach"
        }
    ]
}

この構成のうち、 "serverReadyAction" > "pattern" でポート番号を抽出し、別タブでデバッグ中のアプリケーションを開いてくれます。

例えば、 ASP.NET Core 6.0 の Properties/launchSettings.json が以下の内容であれば、"applicationUrl" に記載されているポート番号 7193 が抽出されます。

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:23469",
      "sslPort": 44391
    }
  },
  "profiles": {
    "aspnetapp": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7193;http://localhost:5058",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

GitHub Codespaces でデバッグ実行すると、アプリケーションポートに以下のような「ローカルアドレス」が割り当てられます。
https://{GitHubアカウント名}-{ランダムな文字列}-{アプリケーションポート}.preview.app.github.dev/

つまり https://tsubakimoto-{ランダムな文字列}-7193.preview.app.github.dev/ となり、この URL が別タブで開かれます。
しかし実際にアクセスすると HTTP 502 Bad Gateway となります。
なお、なぜこうなるかはまだ正しく把握できていません。 dotnet dev-certs の問題なのではないかと推測しています。

そこで .vscode/launch.json に、GitHub Codespaces 向けの構成を追加します。
違いは HTTP のアプリケーションポートを抽出するように変更します。
"pattern": "\\bNow listening on:\\s+(http?://\\S+)"

{
    "name": ".NET Core Launch (Codespaces)",
    "type": "coreclr",
    "request": "launch",
    "preLaunchTask": "build",
    "program": "${workspaceFolder}/aspnetapp/bin/Debug/net6.0/aspnetapp.dll",
    "args": [],
    "cwd": "${workspaceFolder}/aspnetapp",
    "stopAtEntry": false,
    "serverReadyAction": {
        "action": "openExternally",
        "pattern": "\\bNow listening on:\\s+(http?://\\S+)"
    },
    "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
    },
    "sourceFileMap": {
        "/Views": "${workspaceFolder}/Views"
    }
},

これでデバッグ実行時に、 HTTP のアプリケーションポートに紐づくローカルアドレスが起動するようになります。

*1:そもそもVSCodeASP.NET Coreを開発する人がどれくらいいるやら