无法在 VS Code 中调试 dockerize Angular 应用程序 - 无法连接到目标：套接字挂起

Question

我正在尝试调试容器内运行的 Angular 应用程序，但出现以下错误：

AppData\Local\Temp\vscode-chrome-debug.txt:

[11:27:35.501 UTC] OS: win32 x64
[11:27:35.501 UTC] Adapter node: v10.11.0 x64
[11:27:35.501 UTC] vscode-chrome-debug-core: 6.7.53
[11:27:35.501 UTC] debugger-for-chrome: 4.11.7
[11:27:35.501 UTC] From client: initialize({"clientID":"vscode","clientName":"Visual Studio Code","adapterID":"chrome","pathFormat":"path","linesStartAt1":true,"columnsStartAt1":true,"supportsVariableType":true,"supportsVariablePaging":true,"supportsRunInTerminalRequest":true,"locale":"en-us"})
[11:27:35.501 UTC] To client: {"seq":0,"type":"response","request_seq":1,"command":"initialize","success":true,"body":{"exceptionBreakpointFilters":[{"label":"All Exceptions","filter":"all","default":false},{"label":"Uncaught Exceptions","filter":"uncaught","default":false}],"supportsConfigurationDoneRequest":true,"supportsSetVariable":true,"supportsConditionalBreakpoints":true,"supportsCompletionsRequest":true,"supportsHitConditionalBreakpoints":true,"supportsRestartFrame":true,"supportsExceptionInfoRequest":true,"supportsDelayedStackTraceLoading":true,"supportsValueFormattingOptions":true,"supportsEvaluateForHovers":true,"supportsLoadedSourcesRequest":true,"supportsRestartRequest":true,"supportsSetExpression":true,"supportsLogPoints":true}}
[11:27:35.501 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"ClientRequest/initialize","data":{"Versions.DebugAdapterCore":"6.7.53","Versions.DebugAdapter":"4.11.7","successful":"true","timeTakenInMilliseconds":"5.823501","requestType":"request"}}}
[11:27:35.501 UTC] From client: launch({"type":"chrome","request":"launch","name":"UI Launch (Docker)","url":"http://localhost:4200","webRoot":"D:\Saurabh\Projects\vscode-workflow/ng-app","sourceMapPathOverrides":{"webpack:/*":"${webRoot}/*","/./*":"${webRoot}/*","/src/*":"${webRoot}/*","/*":"*","/./~/*":"${webRoot}/node_modules/*"},"trace":true,"runtimeArgs":["--remote-debugging-port=9222"],"__sessionId":"079a3ab7-942d-4dfe-807b-0be98d6fca6f"})
[11:27:35.501 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"debugStarted","data":{"Versions.DebugAdapterCore":"6.7.53","Versions.DebugAdapter":"4.11.7","request":"launch","args":["type","request","name","url","webRoot","sourceMapPathOverrides","trace","runtimeArgs","__sessionId","breakOnLoadStrategy","pathMapping","sourceMaps","skipFileRegExps","targetFilter","smartStep","showAsyncStacks"]}}}
[11:27:35.501 UTC] Getting browser and debug protocol version via http://127.0.0.1:9222/json/version
[11:27:35.501 UTC] Discovering targets via http://127.0.0.1:9222/json/list
[11:27:35.506 UTC] HTTP GET failed: Error: socket hang up
[11:27:35.507 UTC] Discovering targets via http://127.0.0.1:9222/json
[11:27:35.508 UTC] HTTP GET failed: Error: socket hang up
[11:27:35.508 UTC] There was an error connecting to http://127.0.0.1:9222/json/version : socket hang up
[11:27:35.521 UTC] HTTP GET failed: Error: socket hang up
[11:27:35.674 UTC] [chromeSpawnHelper] spawn('C:\Program Files (x86)\Google\Chrome\Application\chrome.exe', ["--remote-debugging-port=9222","--no-first-run","--no-default-browser-check","--remote-debugging-port=9222","--user-data-dir=C:\Users\spala\AppData\Local\Temp\vscode-chrome-debug-userdatadir_9222","about:blank"])

这里是 source code.

文件夹结构：

./ng-app/angular.json:

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ng-app:build",
            "open": true,
            "host": "0.0.0.0",
            "port": 80
          }
        }

./ng-app/.docker/development.dockerfile:

FROM node:10.15.1-alpine
LABEL author="Saurabh Palatkar"
RUN mkdir /usr/share/app
WORKDIR /usr/share/app
COPY package.json package.json
RUN npm i -g @angular/cli@8.0.3
COPY package-lock.json package-lock.json
RUN npm i
COPY . .
ENV PATH /node_modules/.bin:$PATH
EXPOSE 80
EXPOSE 9222
CMD ["sh", "-c", "ng serve --host=0.0.0.0 --watch --poll=2000"]

./ng-app/docker-compose.development.yml: 版本：“3.4”

services:
  ng-app-service:
    image: ng.app.dev.image
    container_name: ng.app.dev.container
    build:
      context: .
      dockerfile: .docker/development.dockerfile
    environment:
      NODE_ENV: development
    volumes:
      - "./:/usr/share/app"
      - /app/node_modules/
    ports:
      - 4200:80
      - 9222:9222
    command:
      [
        "sh",
        "-c",
        "npm start --host=0.0.0.0 --watch --poll=2000 --inspect=9222 --remote-debugging-port=9222 --nolazy",
      ]

./.vscode/launch.json:

{
      "type": "chrome",
      "request": "launch",
      "name": "UI Launch (Docker)",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/ng-app",
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      },
      "trace": true,
      "runtimeArgs": ["--remote-debugging-port=9222"]
    }

./.vscode/tasks.json:

{
      "label": "serve ui dev docker",
      "type": "npm",
      "script": "serve-ui-dev-docker",
      "isBackground": true,
      "presentation": {
        "focus": true,
        "panel": "dedicated"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": {
        "owner": "typescript",
        "source": "ts",
        "applyTo": "closedDocuments",
        "fileLocation": ["relative", "${cwd}"],
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": {
            "regexp": "(.*?)"
          },
          "endsPattern": {
            "regexp": "Compiled |Failed to compile."
          }
        }
      }
    }

./package.json:

"scripts": {
    "serve-ui-dev-docker": "cd ng-app && docker-compose -f docker-compose.development.yml up --build"
  },

Answer 1

我试图重现你的问题，但我之前注意到问题可能出在你的 docker 文件中的 CMD 和你的 docker-[=40 中的 command 块中=].

CMD 使用 exec 格式，它应该是：

CMD ["ng", "serve", "--host=0.0.0.0", "--watch", "--poll=2000"]

或

CMD ng serve --host=0.0.0.0 --watch --poll=2000

注意：我删除了 sh -c，因为它不需要。

来源：https://docs.docker.com/engine/reference/builder/#cmd

在 docker-compose 中有同样的问题：

command: [ "npm", "start", "--host=0.0.0.0", "--watch", "--poll=2000", "--inspect=9222", "--remote-debugging-port=9222", "--nolazy" ]

来源：https://docs.docker.com/compose/compose-file/#command

尝试这些更改并检查 docker 图像是否可以先从命令行启动。

我看到的第二个问题是您不需要定义节点检查进程来调试 angular 应用程序。代码将在 chrome 中调试，而不是在 ng serve 进程中调试。我建议从 docker-compose 文件中删除 9222 端口映射，并从 launch.json 中删除 UI Launch (Docker)

中的 "runtimeArgs": ["--remote-debugging-port=9222"]

无法在 VS Code 中调试 dockerize Angular 应用程序 - 无法连接到目标：套接字挂起

Unable to debug dockerize Angular app in VS Code - Cannot connect to the target: socket hang up

docker

visual-studio-code

angular-cli

angular