一光年

[Gitlab-CICD] 部署create-react-app项目build时报错的问题

2019.11.06

使用Gitlab-Runner可以很方便的自动部署Gitlab项目,无论是通过Docker方式还是Shell方式,甚至可以用SSH方式部署到远程服务器。

对于使用create-react-app构建的React前端项目来讲,只需要进行简单的三步操作即可简单部署:

  1. npm install
  2. npm run build
  3. cp build/* /var/www/xxx // 拷贝到目标目录

variables:
  DEPLOY_PATH: /data/www/test-project

stages:
  - deploy

project-deploy:
  stage: deploy
  tags:
    - web-deploy
  script:
    - npm install
    - npm run build
    - mkdir -p $DEPLOY_PATH
    - cp -R build/* $DEPLOY_PATH
  only:
    - master

但是在编译过程中,会遇到以下错误导致部署失败。

./src/components/Profile.js
  Line 4:    'renderReporter' is defined but never used     no-unused-vars
  Line 38:   'profiled' is assigned a value but never used  no-unused-vars
  Line 52:   Expected '===' and instead saw '=='            eqeqeq
  Line 137:  Expected '===' and instead saw '=='            eqeqeq

./src/components/Finished.js
  Line 53:   Missing radix parameter                                                                                    radix
  Line 53:   Missing radix parameter                                                                                    radix
  Line 53:   Missing radix parameter                                                                                    radix
  Line 53:   Missing radix parameter                                                                                    radix
  Line 72:   Expected '===' and instead saw '=='                                                                        eqeqeq
  Line 83:   Missing radix parameter                                                                                    radix
  Line 92:   Expected '===' and instead saw '=='                                                                        eqeqeq
  Line 143:  Missing radix parameter                                                                                    radix
  Line 151:  Expected '===' and instead saw '=='                                                                        eqeqeq
  Line 162:  'type' is assigned a value but never used                                                                  no-unused-vars
  Line 171:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  Line 213:  Expected '===' and instead saw '=='                                                                        eqeqeq
  Line 214:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  Line 228:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client@0.1.0 build: `export PUBLIC_URL=./ && react-app-rewired build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the client@0.1.0 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!     /home/test/.npm/_logs/2019-11-06T03_15_37_523Z-debug.log

总之一大堆的build警告,最后导致了runner运行失败退出。而在本地直接运行npm run build,虽然也有警告但最终编译是成功的。

仔细看错误信息,发现有一句提示如下:

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

因为环境变量CI设为了true,所有将报警信息当做错误来处理。

知道了原因,解决办法就很简单了。在执行脚本中,将CI设置为false。

...
  "scripts": {
    "start": "node scripts/start.js",
    "build": "export PUBLIC_URL=./ CI=false && node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom"
  },
...