VS Code Docker开发容器中React应用启动失败求助

问题背景 #

在VS Code的Docker开发容器中运行React应用，当组件数量从12个增加到100+后，启动变得异常困难，有时需要执行10-15次启动命令才能成功。

已尝试的解决方案 #

• 本地重新打开文件后进入容器启动
• 重建容器
• 交替使用npm run start和npm start命令
• 将Node内存调整至8GB（设置NODE_OPTIONS=--max-old-space-size=8192）

以上方案均未解决问题。

症状表现 #

执行启动命令后，终端短暂闪过Webpack提示，随后显示“Starting the development server...”，等待5-10秒后出现报错：

The build failed because the process exited too early. 
This probably means the system ran out of memory or 
someone called `kill -9` on the process.

相关配置文件 #

devcontainer.json内容 #

{
  "name": "React Dev Container",
  "dockerFile": "Dockerfile",
  "context": "..",
  "appPort": 3000,
  "customizations": {
    "vscode": {
      "extensions": [
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint",
        "mhutchie.git-graph",
        "ms-vscode.js-debug" // Add JS Debugger extension
      ],
      "settings": {
        "files.autoSave": "afterDelay",
        "files.autoSaveDelay": 1000,
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.tabSize": 4
      }
    }
  },
  "postCreateCommand": "npm install",
  "remoteUser": "node"
}

Dockerfile内容 #

# Use the official Node.js image.
FROM node:18

# Set the working directory.
WORKDIR /app

# Install dependencies.
COPY package*.json ./
RUN npm install

# Copy the rest of the application code.
COPY . .

# Expose the port the app runs on.
EXPOSE 3000

# Start the application.
CMD ["npm", "start"]

package.json内容 #

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/user-event": "^13.5.0",
    "@vis.gl/react-google-maps": "^1.4.2",
    "axios": "^1.7.8",
    "bootstrap": "^5.3.3",
    "chroma-js": "^3.1.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.4.0",
    "react-router-dom": "^6.28.0",
    "react-scripts": "5.0.1",
    "react-select": "^5.9.0",
    "sass": "^1.81.0",
    "web-vitals": "^2.1.4"
  },
  "resolutions": {
    "@emotion/react": "11.14.0"
  },
  "scripts": {
    "start": "NODE_OPTIONS=--max-old-space-size=8192 react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.1.0",
    "@types/chroma-js": "^3.1.0",
    "@types/jest": "^29.5.14",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "react-test-renderer": "^18.0.0",
    "ts-jest": "^29.2.5",
    "typescript": "^4.9.5"
  }
}

相关日志 #

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
npm notice
npm notice New major version of npm available! 10.8.2 -> 11.0.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.0.0
npm notice To update run: npm install -g npm@11.0.0
npm notice
[75109 ms] Start: Run in container: # Test for /home/node/.gitconfig and git
[75114 ms] 
[75114 ms] 
[75114 ms] Start: Run in container: # Copy /Users/michaelliss/.gitconfig to /home/node/.gitconfig
[75117 ms] 
[75117 ms] 
[75117 ms] Start: Run in container: # Cleaning up git config
[75122 ms] 
[75122 ms] 
[75123 ms] Start: Run: git config --global --get gpg.ssh.allowedSignersFile
[75123 ms] Start: Run in container: command -v git >/dev/null 2>&1 && git config --global --replace-all credential.helper '!f() { /home/node/.vscode-server/bin/cd4ee3b1c348a13bafd8f9ad8060705f6d4b9cba/node /tmp/vscode-remote-containers-fb21cb92-dbe3-4af3-b382-14be7136693a.js git-credential-helper $*; }; f' || true
[75125 ms] 
[75125 ms] 
[80804 ms] Start: Run in container: cat /proc/552/environ
[98859 ms] Port forwarding connection from 63355 > 33611 > 33611 in the container.
[98865 ms] Start: Run in container: /home/node/.vscode-server/bin/cd4ee3b1c348a13bafd8f9ad8060705f6d4b9cba/node -e 
[99116 ms] Port forwarding 63355 > 33611 > 33611 stderr: Connection established
[103822 ms] Port forwarding 63355 > 33611 > 33611: Local close
[103839 ms] Port forwarding 63355 > 33611 > 33611 stderr: Remote stdin close
[103901 ms] Port forwarding 63355 > 33611 > 33611 terminated by extension (closed) with code 0 and signal null.
[229461 ms] [16:56:09] [File Watcher (node.js)] Watcher shutdown because watched path got deleted
[334918 ms] Port forwarding connection from 63528 > 33611 > 33611 in the container.
[334927 ms] Start: Run in container: /home/node/.vscode-server/bin/cd4ee3b1c348a13bafd8f9ad8060705f6d4b9cba/node -e 
[335574 ms] Port forwarding 63528 > 33611 > 33611 stderr: Connection established
[338872 ms] Port forwarding 63528 > 33611 > 33611: Local close
[338903 ms] Port forwarding 63528 > 33611 > 33611 stderr: Remote stdin close
[338938 ms] Port forwarding 63528 > 33611 > 33611 terminated by extension (closed) with code 0 and signal null.

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