Блог

Я пытаюсь создать свое приложение React Webpack на Gitlabs CI / CD.

В моей конфигурации Webpack я использую плагин Sentry для отправки исходных текстов, поэтому я пытаюсь создать свое приложение в контейнере CI / CD.

Вот мой gitlab-ci.yml

 image: node

stages:
  - lint
  - prepare

eslint:
  stage: lint
  script:
    # Install eslint
    - |
      npm install eslint 
      eslint-plugin-react 
      babel-eslint
    # Run eslint
    - npm run lint

flow:
  stage: lint
  script:
    # install flow
    - yarn add flow-bin
    - yarn run lint

sentry:
  stage: prepare
  script:
    - npm i
  environment:
    name: production
  only:
    - master
  

и вот мой package.json

 "dependencies": {
    "@babel/core": "7.1.6",
    "@sentry/browser": "^4.5.1",
    "@sentry/webpack-plugin": "^1.6.2",
    "@svgr/webpack": "2.4.1",
    "axios": "^0.18.0",
    "bfj": "6.1.1",
    "case-sensitive-paths-webpack-plugin": "2.1.2",
    "chalk": "2.4.1",
    "cors": "^2.8.5",
    "cross-env": "^5.2.0",
    "css-loader": "1.0.0",
    "dotenv": "6.0.0",
    "dotenv-expand": "4.2.0",
    "express": "^4.16.4",
    "express-http-proxy": "^1.5.0",
    "file-loader": "2.0.0",
    "fork-ts-checker-webpack-plugin-alt": "0.4.14",
    "fs-extra": "7.0.0",
    "html-webpack-plugin": "4.0.0-alpha.2",
    "humps": "^2.0.1",
    "identity-obj-proxy": "3.0.0",
    "jest": "23.6.0",
    "jest-pnp-resolver": "1.0.1",
    "jest-resolve": "23.6.0",
    "js-cookie": "^2.2.0",
    "mini-css-extract-plugin": "0.4.3",
    "moment": "^2.24.0",
    "normalizr": "^3.3.0",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "pnp-webpack-plugin": "1.1.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-preset-env": "6.3.1",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.8.0",
    "react-app-polyfill": "^0.2.0",
    "react-circle": "^1.1.1",
    "react-dev-utils": "^7.0.1",
    "react-dom": "^16.8.0",
    "react-ga": "^2.5.7",
    "react-grid-system": "^4.4.1",
    "react-helmet": "^5.2.0",
    "react-keyboard-event-handler": "^1.4.1",
    "react-media": "^1.9.2",
    "react-player": "^1.8.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-slack-feedback": "^2.0.4",
    "react-transition-group": "^2.5.3",
    "redux": "^4.0.1",
    "redux-api-middleware": "^3.0.1",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "resolve": "1.8.1",
    "sass-loader": "7.1.0",
    "scrollto-with-animation": "^4.5.2",
    "signale": "^1.4.0",
    "striptags": "^3.1.1",
    "style-loader": "0.23.0",
    "styled-components": "^4.1.3",
    "terser-webpack-plugin": "1.1.0",
    "url-loader": "1.1.1",
    "webpack": "4.19.1",
    "webpack-dev-server": "3.1.14",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "3.6.3",
},
"scripts": {
    "postinstall": "cross-env NODE_ENV=production npm run build amp;amp; patch-package",
    "start": "node server.js",
    "dev": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
    "storybook": "start-storybook -p 9001 -c .storybook",
    "lint": "eslint ./src ./stories",
    "flow": "flow ./src"
},
"devDependencies": {
    "@storybook/addon-info": "^4.1.11",
    "@storybook/addon-knobs": "^4.1.6",
    "@storybook/addon-notes": "^4.1.6",
    "@storybook/react": "^4.1.6",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "9.0.0",
    "babel-jest": "23.6.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-named-asset-import": "^0.3.0",
    "babel-preset-react-app": "^7.0.0",
    "eslint": "5.6.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-loader": "2.1.1",
    "eslint-plugin-flowtype": "^3.2.1",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "flow-bin": "^0.90.0",
    "husky": "^1.3.1",
    "patch-package": "^6.0.4",
    "prettier": "^1.15.3",
    "prop-types": "^15.7.2",
    "redux-devtools-extension": "^2.13.7"
},
  

Он нормально создается локально, но не в CI / CD runner.

В моем приложении у меня был и .env файл, устанавливающий NODE_ENV

После долгого возни мне пришлось установить NODE_ENV при выполнении npm run build

 "scripts": {
    "postinstall": "export NODE_ENV=production NODE_PATH=. amp;amp; npm run build amp;amp; patch-package"
}