Azure DevOps React 容器生产构建 JavaScript 堆内存不足错误
Azure DevOps React Container Production Build JavaScript heap out of memory error
我正在尝试使用 Azure DevOps 管道构建 React prod docker 容器。升级构建环境和代码后，流水线失败。经过一些研究，我在构建命令中添加了“--node-flags --max-old-space-size=8192”语句。不过没关系。我也尝试过相关的节点容器进行构建，但没有用。
> demo1@7.0.6 build /app
> react-scripts build
Creating an optimized production build...
<--- Last few GCs --->
[27:0x7f9033ec22b0] 518219 ms: Scavenge 1985.4 (2066.8) -> 1969.9 (2066.8) MB, 3.7 / 0.0 ms (average mu = 0.190, current mu = 0.078) allocation failure
[27:0x7f9033ec22b0] 518272 ms: Scavenge 1985.8 (2067.0) -> 1970.4 (2067.0) MB, 5.7 / 0.0 ms (average mu = 0.190, current mu = 0.078) allocation failure
[27:0x7f9033ec22b0] 520448 ms: Mark-sweep 1986.2 (2067.3) -> 1963.8 (2067.3) MB, 2137.2 / 0.0 ms (average mu = 0.257, current mu = 0.320) allocation failure scavenge might not succeed
<--- JS stacktrace --->
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! demo1@7.0.6 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the demo1@7.0.6 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2021-06-13T21_04_02_873Z-debug.log
The command '/bin/sh -c npm run-script build --node-flags --max-old-space-size=8192' returned a non-zero code: 1
##[error]The command '/bin/sh -c npm run-script build --node-flags --max-old-space-size=8192' returned a non-zero code: 1
##[error]The process '/usr/bin/docker' failed with exit code 1
Finishing: Docker
Docker 文件：
# stage1 - build react app first
FROM node:14.16.1-alpine3.13 as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY ./package.json /app/
RUN apk --no-cache add g++ gcc libgcc libstdc++ linux-headers make py3-pip git
RUN npm install --quiet node-gyp -g
RUN npm install
COPY . /app
RUN npm run-script build --node-flags --max-old-space-size=8192
我的 package.json 文件：
{
"name": "demo1",
"version": "7.0.6",
"private": true,
"homepage": "",
"scripts": {
"start": "react-scripts start -o",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint src",
"format": "prettier --write \"src/**/*.{js,css,scss,html}\"",
"rtl": "webpack"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"last 1 edge version",
"IE 11"
]
},
"dependencies": {
"@ant-design/charts": "^1.1.1",
"@ant-design/icons": "^4.6.2",
"@babel/standalone": "^7.14.4",
"@date-io/date-fns": "2.6.1",
"@emotion/react": "^11.4.0",
"@formatjs/intl-pluralrules": "1.3.5",
"@fortawesome/fontawesome-free": "5.13.0",
"@manaflair/redux-batch": "1.0.0",
"@material-ui/core": "4.9.14",
"@material-ui/icons": "4.9.1",
"@material-ui/lab": "4.0.0-alpha.53",
"@material-ui/pickers": "3.2.10",
"@material-ui/styles": "4.9.14",
"@phuocng/react-pdf-viewer": "^1.7.0",
"@react-google-maps/api": "^2.2.0",
"@reduxjs/toolkit": "1.3.6",
"@tanem/svg-injector": "8.0.50",
"antd": "^4.13.0",
"antd-mask-input": "^0.1.15",
"apexcharts": "3.19.2",
"axios": "0.19.2",
"axios-mock-adapter": "1.18.1",
"bootstrap": "4.5.0",
"bulma": "^0.9.2",
"bulma-helpers": "^0.4.0",
"chart.js": "^3.3.2",
"classnames": "^2.3.1",
"clipboard-copy": "3.1.0",
"clsx": "1.1.0",
"convert-units": "^2.3.4",
"cp-cli": "2.0.0",
"css-mediaquery": "0.1.2",
"date-fns": "2.8.1",
"dentist": "^1.0.3",
"dom-to-image": "^2.6.0",
"downshift": "3.4.2",
"email-validator": "^2.0.4",
"fg-loadcss": "2.1.0",
"formik": "2.1.4",
"frappe-gantt-react": "^0.2.2",
"fs": "*",
"html-react-parser": "^1.2.5",
"html2canvas": "*",
"inputmask-core": "^2.2.0",
"jquery": "^3.6.0",
"json2mq": "0.2.0",
"jspdf": "^2.3.1",
"jspdf-autotable": "^3.5.14",
"jss-rtl": "^0.3.0",
"lodash": "4.17.15",
"material-ui-popup-state": "1.4.1",
"node-sass": "^4.0.0",
"object-path": "0.11.4",
"pdfjs-dist": "^2.7.570",
"perfect-scrollbar": "1.5.0",
"primeicons": "^4.1.0",
"primereact": "^6.2.1",
"prop-types": "15.7.2",
"qrcode.react": "^1.0.1",
"quill": "^1.3.7",
"rc-year-calendar": "^1.0.2",
"react": "16.12.0",
"react-bootstrap": "1.0.1",
"react-bootstrap-table-next": "4.0.2",
"react-bootstrap-table2-editor": "^1.4.0",
"react-bootstrap-table2-filter": "^1.3.3",
"react-bootstrap-table2-paginator": "2.1.2",
"react-bootstrap-table2-toolkit": "^2.1.3",
"react-color": "^2.19.3",
"react-contexify": "^4.1.1",
"react-country-region-selector": "^3.1.0",
"react-data-table-component": "^6.11.7",
"react-date-picker": "^8.2.0",
"react-datepicker": "2.16.0",
"react-dom": "16.12.0",
"react-draggable": "4.4.2",
"react-export-excel": "^0.5.3",
"react-google-maps": "^9.4.5",
"react-helmet": "^6.1.0",
"react-highlight": "^0.14.0",
"react-highlight-words": "^0.17.0",
"react-horizontal-timeline": "^1.5.3",
"react-inlinesvg": "1.2.0",
"react-intl": "3.6.2",
"react-is": "16.13.1",
"react-jvectormap": "0.0.16",
"react-loader-spinner": "^4.0.0",
"react-moment": "^1.1.1",
"react-pdf": "^5.3.0",
"react-pdfjs-multi": "^0.5.1",
"react-perfect-scrollbar": "1.5.8",
"react-phone-input-2": "^2.14.0",
"react-portal": "4.2.0",
"react-qr-reader": "^2.2.1",
"react-qr-scanner": "*",
"react-redux": "7.1.3",
"react-router-dom": "5.1.2",
"react-router-last-location": "^2.0.1",
"react-scripts": "3.2.0",
"react-select": "3.1.0",
"react-share": "^4.4.0",
"react-swipeable-views": "0.13.9",
"react-syntax-highlighter": "12.2.1",
"react-to-print": "^2.12.6",
"react-toggle": "^4.1.2",
"react-transition-group": "^4.4.2",
"react-window": "1.8.5",
"reactjs-pdf-reader": "^1.0.12",
"reactstrap": "^8.9.0",
"redux": "4.0.5",
"redux-devtools-extension": "^2.13.9",
"redux-logger": "^3.0.6",
"redux-persist": "6.0.0",
"redux-promise-middleware": "^6.1.2",
"redux-saga": "1.1.3",
"redux-thunk": "^2.3.0",
"rsuite": "^4.10.2",
"socicon": "3.0.5",
"sockjs-client": "^1.4.0",
"stompjs": "^2.3.3",
"styled-components": "^5.3.0",
"xlsx": "0.13.4",
"yup": "0.29.0"
},
"devDependencies": {
"@babel/plugin-transform-react-jsx": "^7.14.3",
"copyfiles": "2.1.1",
"node-sass": "4.14.0",
"prettier": "1.19.1",
"serve": "11.2.0",
"webpack-cli": "3.3.11",
"webpack-messages": "2.0.4",
"webpack-rtl-plugin": "2.0.0"
}
}
感谢您的帮助！
我知道“--max-old-space-size=8192”参数不会传递给构建。所以我决定在 Dockerfile 中添加 ENV，例如“ENV NODE_OPTIONS="--max-old-space-size=8192""。最后我的 Dockerfile 转换为：
# stage1 - build react app first
FROM node:14.16.1-alpine3.13 as build
WORKDIR /app
ENV NODE_OPTIONS="--max-old-space-size=8192"
ENV PATH /app/node_modules/.bin:$PATH
COPY ./package.json /app/
RUN apk --no-cache add g++ gcc libgcc libstdc++ linux-headers make py3-pip git
RUN npm install --quiet node-gyp -g
RUN npm install
COPY . /app
RUN npm run-script build
然后问题就解决了。谢谢
最后唯一帮助我的是删除“node-modules”文件夹、“package-lock.json”文件和 运行 npm install。然后我将新生成的“package-lock.json”提交给 git 并且 Azure 管道成功通过。
我还从 devDependencies 中删除了 eslint，因为它自动成为 react-scripts 的依赖项，但我认为没有必要。
我在 React 项目和 Azure 管道中遇到了这个错误。在本地一切正常。
我正在尝试使用 Azure DevOps 管道构建 React prod docker 容器。升级构建环境和代码后，流水线失败。经过一些研究，我在构建命令中添加了“--node-flags --max-old-space-size=8192”语句。不过没关系。我也尝试过相关的节点容器进行构建，但没有用。
> demo1@7.0.6 build /app
> react-scripts build
Creating an optimized production build...
<--- Last few GCs --->
[27:0x7f9033ec22b0] 518219 ms: Scavenge 1985.4 (2066.8) -> 1969.9 (2066.8) MB, 3.7 / 0.0 ms (average mu = 0.190, current mu = 0.078) allocation failure
[27:0x7f9033ec22b0] 518272 ms: Scavenge 1985.8 (2067.0) -> 1970.4 (2067.0) MB, 5.7 / 0.0 ms (average mu = 0.190, current mu = 0.078) allocation failure
[27:0x7f9033ec22b0] 520448 ms: Mark-sweep 1986.2 (2067.3) -> 1963.8 (2067.3) MB, 2137.2 / 0.0 ms (average mu = 0.257, current mu = 0.320) allocation failure scavenge might not succeed
<--- JS stacktrace --->
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! demo1@7.0.6 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the demo1@7.0.6 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2021-06-13T21_04_02_873Z-debug.log
The command '/bin/sh -c npm run-script build --node-flags --max-old-space-size=8192' returned a non-zero code: 1
##[error]The command '/bin/sh -c npm run-script build --node-flags --max-old-space-size=8192' returned a non-zero code: 1
##[error]The process '/usr/bin/docker' failed with exit code 1
Finishing: Docker
Docker 文件：
# stage1 - build react app first
FROM node:14.16.1-alpine3.13 as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY ./package.json /app/
RUN apk --no-cache add g++ gcc libgcc libstdc++ linux-headers make py3-pip git
RUN npm install --quiet node-gyp -g
RUN npm install
COPY . /app
RUN npm run-script build --node-flags --max-old-space-size=8192
我的 package.json 文件：
{
"name": "demo1",
"version": "7.0.6",
"private": true,
"homepage": "",
"scripts": {
"start": "react-scripts start -o",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint src",
"format": "prettier --write \"src/**/*.{js,css,scss,html}\"",
"rtl": "webpack"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"last 1 edge version",
"IE 11"
]
},
"dependencies": {
"@ant-design/charts": "^1.1.1",
"@ant-design/icons": "^4.6.2",
"@babel/standalone": "^7.14.4",
"@date-io/date-fns": "2.6.1",
"@emotion/react": "^11.4.0",
"@formatjs/intl-pluralrules": "1.3.5",
"@fortawesome/fontawesome-free": "5.13.0",
"@manaflair/redux-batch": "1.0.0",
"@material-ui/core": "4.9.14",
"@material-ui/icons": "4.9.1",
"@material-ui/lab": "4.0.0-alpha.53",
"@material-ui/pickers": "3.2.10",
"@material-ui/styles": "4.9.14",
"@phuocng/react-pdf-viewer": "^1.7.0",
"@react-google-maps/api": "^2.2.0",
"@reduxjs/toolkit": "1.3.6",
"@tanem/svg-injector": "8.0.50",
"antd": "^4.13.0",
"antd-mask-input": "^0.1.15",
"apexcharts": "3.19.2",
"axios": "0.19.2",
"axios-mock-adapter": "1.18.1",
"bootstrap": "4.5.0",
"bulma": "^0.9.2",
"bulma-helpers": "^0.4.0",
"chart.js": "^3.3.2",
"classnames": "^2.3.1",
"clipboard-copy": "3.1.0",
"clsx": "1.1.0",
"convert-units": "^2.3.4",
"cp-cli": "2.0.0",
"css-mediaquery": "0.1.2",
"date-fns": "2.8.1",
"dentist": "^1.0.3",
"dom-to-image": "^2.6.0",
"downshift": "3.4.2",
"email-validator": "^2.0.4",
"fg-loadcss": "2.1.0",
"formik": "2.1.4",
"frappe-gantt-react": "^0.2.2",
"fs": "*",
"html-react-parser": "^1.2.5",
"html2canvas": "*",
"inputmask-core": "^2.2.0",
"jquery": "^3.6.0",
"json2mq": "0.2.0",
"jspdf": "^2.3.1",
"jspdf-autotable": "^3.5.14",
"jss-rtl": "^0.3.0",
"lodash": "4.17.15",
"material-ui-popup-state": "1.4.1",
"node-sass": "^4.0.0",
"object-path": "0.11.4",
"pdfjs-dist": "^2.7.570",
"perfect-scrollbar": "1.5.0",
"primeicons": "^4.1.0",
"primereact": "^6.2.1",
"prop-types": "15.7.2",
"qrcode.react": "^1.0.1",
"quill": "^1.3.7",
"rc-year-calendar": "^1.0.2",
"react": "16.12.0",
"react-bootstrap": "1.0.1",
"react-bootstrap-table-next": "4.0.2",
"react-bootstrap-table2-editor": "^1.4.0",
"react-bootstrap-table2-filter": "^1.3.3",
"react-bootstrap-table2-paginator": "2.1.2",
"react-bootstrap-table2-toolkit": "^2.1.3",
"react-color": "^2.19.3",
"react-contexify": "^4.1.1",
"react-country-region-selector": "^3.1.0",
"react-data-table-component": "^6.11.7",
"react-date-picker": "^8.2.0",
"react-datepicker": "2.16.0",
"react-dom": "16.12.0",
"react-draggable": "4.4.2",
"react-export-excel": "^0.5.3",
"react-google-maps": "^9.4.5",
"react-helmet": "^6.1.0",
"react-highlight": "^0.14.0",
"react-highlight-words": "^0.17.0",
"react-horizontal-timeline": "^1.5.3",
"react-inlinesvg": "1.2.0",
"react-intl": "3.6.2",
"react-is": "16.13.1",
"react-jvectormap": "0.0.16",
"react-loader-spinner": "^4.0.0",
"react-moment": "^1.1.1",
"react-pdf": "^5.3.0",
"react-pdfjs-multi": "^0.5.1",
"react-perfect-scrollbar": "1.5.8",
"react-phone-input-2": "^2.14.0",
"react-portal": "4.2.0",
"react-qr-reader": "^2.2.1",
"react-qr-scanner": "*",
"react-redux": "7.1.3",
"react-router-dom": "5.1.2",
"react-router-last-location": "^2.0.1",
"react-scripts": "3.2.0",
"react-select": "3.1.0",
"react-share": "^4.4.0",
"react-swipeable-views": "0.13.9",
"react-syntax-highlighter": "12.2.1",
"react-to-print": "^2.12.6",
"react-toggle": "^4.1.2",
"react-transition-group": "^4.4.2",
"react-window": "1.8.5",
"reactjs-pdf-reader": "^1.0.12",
"reactstrap": "^8.9.0",
"redux": "4.0.5",
"redux-devtools-extension": "^2.13.9",
"redux-logger": "^3.0.6",
"redux-persist": "6.0.0",
"redux-promise-middleware": "^6.1.2",
"redux-saga": "1.1.3",
"redux-thunk": "^2.3.0",
"rsuite": "^4.10.2",
"socicon": "3.0.5",
"sockjs-client": "^1.4.0",
"stompjs": "^2.3.3",
"styled-components": "^5.3.0",
"xlsx": "0.13.4",
"yup": "0.29.0"
},
"devDependencies": {
"@babel/plugin-transform-react-jsx": "^7.14.3",
"copyfiles": "2.1.1",
"node-sass": "4.14.0",
"prettier": "1.19.1",
"serve": "11.2.0",
"webpack-cli": "3.3.11",
"webpack-messages": "2.0.4",
"webpack-rtl-plugin": "2.0.0"
}
}
感谢您的帮助！
我知道“--max-old-space-size=8192”参数不会传递给构建。所以我决定在 Dockerfile 中添加 ENV，例如“ENV NODE_OPTIONS="--max-old-space-size=8192""。最后我的 Dockerfile 转换为：
# stage1 - build react app first
FROM node:14.16.1-alpine3.13 as build
WORKDIR /app
ENV NODE_OPTIONS="--max-old-space-size=8192"
ENV PATH /app/node_modules/.bin:$PATH
COPY ./package.json /app/
RUN apk --no-cache add g++ gcc libgcc libstdc++ linux-headers make py3-pip git
RUN npm install --quiet node-gyp -g
RUN npm install
COPY . /app
RUN npm run-script build
然后问题就解决了。谢谢
最后唯一帮助我的是删除“node-modules”文件夹、“package-lock.json”文件和 运行 npm install。然后我将新生成的“package-lock.json”提交给 git 并且 Azure 管道成功通过。
我还从 devDependencies 中删除了 eslint，因为它自动成为 react-scripts 的依赖项，但我认为没有必要。
我在 React 项目和 Azure 管道中遇到了这个错误。在本地一切正常。