在 docker 容器中调试 React 应用程序时，VSCode 断点未绑定

Question

我在使用 VSCode 调试使用Create React App 创建并在 Docker 容器中运行的 React 应用程序时遇到问题。

该应用程序在docker compose up运行良好，并且在我附加调试器之前它会正确停止执行。

但是，在那之后，只有start.js文件中的断点正常运行，而我的源文件中的任何其他断点都保持未绑定。

项目设置

package.json

我定义了一个新脚本start:debug以检查模式运行应用程序。

    {
    "name": "test",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@emotion/react": "^11.8.1",
        "@emotion/styled": "^11.8.1",
        "@mui/icons-material": "^5.4.2",
        "@mui/material": "^5.4.3",
        "@testing-library/jest-dom": "^5.16.1",
        "@testing-library/react": "^12.1.2",
        "@testing-library/user-event": "^13.5.0",
        "axios": "^0.26.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "5.0.0",
        "web-vitals": "^2.1.3"
    },
    "scripts": {
        "start": "react-scripts start",
        "start:debug": "react-scripts --inspect-brk=0.0.0.0:9229 start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    ...
    }

Dockerfile

FROM node:16-alpine

# Create app directory
WORKDIR /usr/src/app

# add `node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# Install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install

# If you are building your code for production
# RUN npm ci --only=production

# Bundle app source
COPY . .

EXPOSE 3000

# Run app
CMD [ "npm", "run", "start:debug" ]

docker-compose.yml

version: '3'

services:
  web:
    image: test
    container_name: test
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./src:/usr/src/app/src
    env_file:
      - ./.envs/.local/.node
    ports:
      - "3000:3000"
      - "9229:9229"

.vscode/launch.json

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

---

我尝试了所有我能找到的配置，但我没有设法让它工作。 谁能帮我找出问题所在？

---

Answer 1

如果您正在使用基于 Web 的 React 应用程序 - 您将需要运行 web 浏览器来调试它。 这是我做的一个设置：

1. 为 React 设置一个 docker 容器，并绑定到我的主系统
2. 从终端docker exec -ti react-ptc /bin/bash
3. 在 /app 目录中的容器内创建反应应用程序
4. cd 进入应用目录
5. 运行npm run eject - 需要稍后管理 webpack 配置
6. 在 docker 容器内运行npm run start
7. 从主机系统上的绑定挂载中使用 vscode 打开反应项目文件夹。

数字 7 是必需的，否则 VSCode 将无法启动 web 浏览器进行调试。 不过请注意您的权限。 您可能需要设置绑定挂载的/react目录来托管用户权限。

这是我使用的docker-compose.yml的一部分：

version: '3'
services:
  react-ptc:
    image: 'dmitryr117/node:18.8.0-dev'
    container_name: react-ptc
    restart: unless-stopped
    volumes:
      - ./react:/app
    environment:
      - HOST=0.0.0.0
      - PORT=80
      - WDS_SOCKET_HOST=0.0.0.0
      - WDS_SOCKET_PORT=0
    expose:
      - 80
    ports:
      - 8080:80

但是，我正在使用nginx反向代理运行我的系统，并使用/etc/hosts来模拟本地环境中的真实域名行为。

现在launch.json和webpack.config.js

发射.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Brave Debug",
      "url": "http://client.ptc.test", // can set to http://localhost:8080
      "webRoot": "${workspaceFolder}",
      "timeout": 20000,
      "sourceMaps": true,
      "breakOnLoad": true,
      "runtimeExecutable": "/snap/bin/brave", // I am on Ubuntu using Brave web browser
      "runtimeArgs": [
        "--new-window",
        "--incognito",
        "--user-data-dir=${workspaceFolder}/chrome-profiles/ReactProfile",
        "--remote-debugging-port=9222"
      ],
      "sourceMapPathOverrides": {
        // requires inline-source-map in webpack.config.js for devtool
        // "browser-path": "web-root path"
        // IMPORTANT AREA:
        // Check sources in web browser DeveloperTools and change /app/ptc to 
        // your path above /src directory
        "/app/ptc/*": "${webRoot}/*",
      },
    }
  ]
}

在之前弹出的config目录中查找webpack.config.js并更新为 wollos：

    ...
    devtool: 'inline-source-map',
    // isEnvProduction
    //   ? shouldUseSourceMap
    //     ? 'source-map'
    //     : false
    //   : isEnvDevelopment && 'cheap-module-source-map',
    // These are the "entry points" to our application.
    // This means they will be the "root" imports that are included in JS bundle.
    ...

而已。 还要更新您的.gitignore以避免提交浏览器配置文件：

...
# browser_profile
/chrome-profiles

应该从这里开始工作。 希望这可以帮助。