如何在VS Code中为Docker容器内的Angular应用附加调试器

我是第100万个询问该问题的开发者，但未找到解决方案。目前热重载和应用启动均正常，但无法在通过SSH连接远程Linux开发服务器的VS Code中，将调试器附加到Docker容器内的Angular应用，求正确的launch.json配置方法。

项目结构 #

├ server
│   ├ server.csproj
│   ├ Dockerfile
│   ├ ...
├ client
│   ├ src
│   │   ├ ...
│   ├ Dockerfile
│   ├ package.json
├ docker-compose.yml

当前配置文件 #

docker-compose.yml #

version: '3.8'

services: 
  client:
    container_name: client
    build:
      context: ./client
      target: debug
    ports:
      - "4200:4200"
    volumes:
      - ./client:/src
      - ./client/node_modules:/src/node_modules

Angular Dockerfile #

# Development Container
FROM node:18-alpine as debug
WORKDIR /src
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 4200
CMD ["npm", "run", "start-dev" ]

# Build Container
FROM node:18-alpine as build
WORKDIR /src
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 4200
RUN npm run build --prod

# Prod Container
FROM nginx:alpine as pord
COPY --from=build /src/dist/client /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

launch.json #

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Docker: Attach to Node",
            "type": "node",
            "request": "attach",
            "remoteRoot": "/src/",
            "port": 9229,
            "address": "localhost",
            "localRoot": "${workspaceFolder}/client/src/",
            "restart": true
        }
    ]
}

package.json #

{
  "name": "client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4200 --host 0.0.0.0",
    "start-dev": "ng serve --port 4200 --host 0.0.0.0 --disable-host-check",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint"
  }
}

启动命令 #

docker compose build client
docker compose up client

遇到的错误 #

尝试暴露调试端口9229时，出现端口占用提示：

Error response from daemon: driver failed programming external connectivity on endpoint client (5cacc05b4977a019742e3d4670302211b2aef037b0332331f3166a5678c3e900): Error starting userland proxy: listen tcp4 0.0.0.0:9229: bind: address already in use

解决步骤 #

1. 修改Angular启动命令，开启调试模式 #

Angular的ng serve需要添加--inspect参数开启Node调试端口，更新package.json中的start-dev脚本：

"start-dev": "ng serve --port 4200 --host 0.0.0.0 --disable-host-check --inspect=0.0.0.0:9229"

指定0.0.0.0:9229是让容器内的调试端口监听所有网卡，方便外部连接。

2. 处理端口占用问题 #

如果9229端口被占用，有两种解决方式：

• 换用其他端口：比如改成9230，同步修改package.json的--inspect=0.0.0.0:9230，以及后续docker-compose.yml和launch.json中的端口号。
• 释放占用端口：在远程Linux服务器上执行以下命令排查并杀掉占用进程：

  # 查找占用9229端口的进程
  lsof -i :9229
  # 或者
  netstat -tulpn | grep :9229
  # 根据进程ID杀掉进程
  kill -9 <PID>
  

3. 更新docker-compose.yml，映射调试端口 #

在client服务的ports字段中添加调试端口映射：

ports:
  - "4200:4200"
  - "9229:9229" # 若换了端口则同步修改，比如9230:9230

4. 调整launch.json配置 #

确保路径和端口与容器配置匹配，修改后的launch.json：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Docker: Attach to Angular",
            "type": "node",
            "request": "attach",
            "remoteRoot": "/src", // 容器内工作目录，无需末尾斜杠
            "port": 9229, // 与前面配置的端口一致
            "address": "localhost", // SSH远程VS Code中，localhost对应远程服务器
            "localRoot": "${workspaceFolder}/client", // 远程服务器上的client目录，对应容器的/src
            "restart": true,
            "skipFiles": [
                "<node_internals>/**" // 跳过Node内部文件，避免调试进入无关代码
            ]
        }
    ]
}

5. 重新启动容器 #

执行以下命令重建并启动容器：

docker compose down
docker compose build client
docker compose up client

6. 附加调试器 #

在VS Code调试面板中选择Docker: Attach to Angular，点击启动按钮即可附加调试器，现在可以在Angular代码中设置断点测试调试功能。

内容的提问来源于stack exchange，提问作者ETfraXoR