在 Kubernetes 上的 Jenkins 管道中使用 npm 构建 ReactJs 应用程序

Posted 2023-03-07

【中文标题】在 Kubernetes 上的 Jenkins 管道中使用 npm 构建 ReactJs 应用程序

【英文标题】：build a ReactJs app with npm in a Jenkins Pipeline on Kubernetes

【发布时间】：2022-01-10 16:18:48

【问题描述】：

我尽一切努力在 Kubernetes 上运行的 Jenkins 管道中使用 NPM 构建 ReactJs 应用程序。

当我尝试从 Windows 甚至是安装了 Ubuntu 的 Linux 的 Windows 子系统构建项目时，一切正常，NPM 能够安装包并从 package.json 文件构建项目。

我安装了 NodeJS 插件（可用here） 我将此部分添加到我的 Jenkinsfile 中

stages 

    stage('Build') 

        steps 

            nodejs(nodeJSInstallationName: 'nodeJS_14.15.4') 

                sh """
                cd ./project-folder
                npm install
                npm run-script build
                """
            
        
    

我使用以下 package.json

    "name": "app-react",
    "version": "5.0.0",
    "homepage": ".",
    "private": true,
    "dependencies": 
        "react": "^17.0.1",
        ...
        "react-scripts": "4.0.0",
        ...
    ,
    "scripts": 
        "start": "set HTTPS=true&&react-scripts start",
        "build": "set GENERATE_SOURCEMAP=false&&react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "sitemap": "babel-node src/sitemap-generator.js"
    ,
    "eslintConfig": 
        "extends": "react-app"
    ,
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ],
    "devDependencies": 
        "babel-cli": "^6.26.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1"
    

安装似乎没问题，但在构建步骤中总是失败。使用蓝海我可以看到以下错误消息

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! apollo-react@5.0.1 build: `set GENERATE_SOURCEMAP=false&&./node_modules/react-scripts/bin/react-scripts.js build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the apollo-react@5.0.1 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-12-04T19_05_34_235Z-debug.log
script returned exit code 1

可访问 /root/.npm/_logs 的完整日志显示：

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run-script', 'build' ]
2 info using npm@6.14.10
3 info using node@v14.15.4
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle app-react@5.0.0~prebuild: app-react@5.0.0
6 info lifecycle app-react@5.0.0~build: app-react@5.0.0
7 verbose lifecycle app-react@5.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle app-react@5.0.0~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/jenkins/agent/workspace/client/app-react/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
9 verbose lifecycle app-react@5.0.0~build: CWD: /home/jenkins/agent/workspace/client/app-react
10 silly lifecycle app-react@5.0.0~build: Args: [ '-c', 'set GENERATE_SOURCEMAP=false&&react-scripts build' ]
11 silly lifecycle app-react@5.0.0~build: Returned: code: 1  signal: null
12 info lifecycle app-react@5.0.0~build: Failed to exec build script
13 verbose stack Error: app-react@5.0.0 build: `set GENERATE_SOURCEMAP=false&&react-scripts build`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1048:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid app-react@5.0.0
15 verbose cwd /home/jenkins/agent/workspace/client/app-react
16 verbose Linux 4.15.0-135-generic
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run-script" "build"
18 verbose node v14.15.4
19 verbose npm  v6.14.10
20 error code ELIFECYCLE
21 error errno 1
22 error app-react@5.0.0 build: `set GENERATE_SOURCEMAP=false&&react-scripts build`
22 error Exit status 1
23 error Failed at the app-react@5.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

在此之前，我还尝试使用其他代理构建我的项目，实际上在我使用 NodeJs 插件进行测试之前的脚本中，我使用了可以将任何代理运行到临时 pod 中的 Kubernetes 插件。因此，我尝试使用 Nodejs 映像，甚至使用手动安装 NodeJs 的 Ubuntu 映像。结果总是和以前一样。

我不知道问题的根源是什么：对已安装包的访问权限？资源问题？

【问题讨论】：

我不认为set 是标准的 Bourne shell 命令。把命令改成GENERATE_SOURCEMAP=false react-scripts build能用吗？

@DavidMaze 谢谢，但不幸的是它并没有改变任何东西。我也试过不使用 GENERATE_SOURCEMAP 部分。

【参考方案1】：

我终于找到了解决方法。构建失败不是因为错误而是警告。

解决方法是去掉eslint配置部分

"eslintConfig": 
    "extends": "react-app"

当 eslint 未激活时，构建结果编译成功。

但是当它处于活动状态时，结果是编译时带有警告，并且所有警告都出现在日志中，并且 jenkins 作业失败。