문제
Jenkins로 리액트 프로젝트를 빌드할 때 발생한 문제이다. 에러 로그는 다음과 같다.
Error Log
Started by user이명범
Running as SYSTEM
Building in workspace /var/jenkins_home/workspace/cloudfront-deploy-project
The recommended git tool is: NONE
using credential this
> git rev-parse --resolve-git-dir /var/jenkins_home/workspace/cloudfront-deploy-project/.git # timeout=10
Fetching changes from the remote Git repository
> git config remote.origin.urlhttps://lab.ssafy.com/mungmnb777/aws-cicd-test-repo.git # timeout=10
Fetching upstream changes fromhttps://lab.ssafy.com/mungmnb777/aws-cicd-test-repo.git
> git --version # timeout=10
> git --version # 'git version 2.30.2'
using GIT_ASKPASS to set credentials final-project-credentials-by-username
> git fetch --tags --force --progress --https://lab.ssafy.com/mungmnb777/aws-cicd-test-repo.git +refs/heads/*:refs/remotes/origin/* # timeout=10
> git rev-parse refs/remotes/origin/master^{commit} # timeout=10
Checking out Revision 378148c31f8d8cde37704d69b8bb220e20c638d8 (refs/remotes/origin/master)
> git config core.sparsecheckout # timeout=10
> git checkout -f 378148c31f8d8cde37704d69b8bb220e20c638d8 # timeout=10
Commit message: "zz"
> git rev-list --no-walk 378148c31f8d8cde37704d69b8bb220e20c638d8 # timeout=10
[cloudfront-deploy-project] $ /bin/sh -xe /tmp/jenkins15902922808150805276.sh
+ cd FE/shall-we-meet-then
+ npm install
up to date, audited 1514 packages in 13s
216 packages are looking for funding
run `npm fund` for details
25 vulnerabilities (24 high, 1 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
+ npm run build
> shall-we-meet-then@0.1.0 build
> react-scripts build
Creating an optimized production build...
Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.
Failed to compile.
[eslint]
src/App.js
Line 5:10: 'useEffect' is defined but never used no-unused-vars
src/Components/Group/ShiningClock.js
Line 17:11: 'play' is assigned a value but never used no-unused-vars
Line 18:11: 'pause' is assigned a value but never used no-unused-vars
Line 19:11: 'playBtn' is assigned a value but never used no-unused-vars
Line 20:11: 'wave1' is assigned a value but never used no-unused-vars
Line 21:11: 'wave2' is assigned a value but never used no-unused-vars
Line 24:11: 'container' is assigned a value but never used no-unused-vars
Line 25:11: 'btn' is assigned a value but never used no-unused-vars
Line 26:11: 'color' is assigned a value but never used no-unused-vars
Line 27:11: 'tooltip' is assigned a value but never used no-unused-vars
src/Components/Group/ShiningComponent.js
Line 1:8: 'React' is defined but never used no-unused-vars
src/Components/Memory/GroupModal.js
Line 15:6: React Hook useEffect has a missing dependency: 'props.groupMembers'. Either include it or remove the dependency array react-hooks/exhaustive-deps
src/Components/Memory/MemoryModal.js
Line 2:10: 'useNavigate' is defined but never used no-unused-vars
Line 2:23: 'useParams' is defined but never used no-unused-vars
Line 5:3: 'getArticlesApi' is defined but never used no-unused-vars
Line 7:3: 'getVideoApi' is defined but never used no-unused-vars
Line 8:3: 'getThumbnailApi' is defined but never used no-unused-vars
Line 9:3: 'getImageApi' is defined but never used no-unused-vars
Line 10:3: 'getArticleCount' is defined but never used no-unused-vars
Line 11:3: 'getTotalArticleCount' is defined but never used no-unused-vars
Line 29:6: React Hook useEffect has a missing dependency: 'props.boardSeq'. Either include it or remove the dependency array react-hooks/exhaustive-deps
src/Components/Memory/MemoryModal2.js
Line 2:10: 'useNavigate' is defined but never used no-unused-vars
Line 2:23: 'useParams' is defined but never used no-unused-vars
Line 5:3: 'getArticlesApi' is defined but never used no-unused-vars
Line 7:3: 'getVideoApi' is defined but never used no-unused-vars
Line 8:3: 'getThumbnailApi' is defined but never used no-unused-vars
Line 9:3: 'getImageApi' is defined but never used no-unused-vars
Line 10:3: 'getArticleCount' is defined but never used no-unused-vars
Line 11:3: 'getTotalArticleCount' is defined but never used no-unused-vars
Line 30:6: React Hook useEffect has a missing dependency: 'props.boardSeq'. Either include it or remove the dependency array react-hooks/exhaustive-deps
src/Components/MemoryList/MemoryCard.js
Line 1:17: 'useEffect' is defined but never used no-unused-vars
Line 1:28: 'useState' is defined but never used no-unused-vars
Line 1:38: 'useRef' is defined but never used no-unused-vars
Line 2:10: 'useNavigate' is defined but never used no-unused-vars
Line 2:23: 'useParams' is defined but never used no-unused-vars
Line 3:10: 'getArticlesApi' is defined but never used no-unused-vars
src/Components/MemoryList/MemoryCardVideo.js
Line 1:17: 'useEffect' is defined but never used no-unused-vars
Line 1:28: 'useState' is defined but never used no-unused-vars
Line 1:38: 'useRef' is defined but never used no-unused-vars
Line 2:10: 'useNavigate' is defined but never used no-unused-vars
Line 2:23: 'useParams' is defined but never used no-unused-vars
Line 3:10: 'getArticlesApi' is defined but never used no-unused-vars
src/Components/MemoryList/MemoryComponent.js
Line 1:38: 'useRef' is defined but never used no-unused-vars
Line 2:10: 'useNavigate' is defined but never used no-unused-vars
Line 5:3: 'getArticleApi' is defined but never used no-unused-vars
Line 6:3: 'getVideoApi' is defined but never used no-unused-vars
Line 7:3: 'getThumbnailApi' is defined but never used no-unused-vars
Line 8:3: 'getImageApi' is defined but never used no-unused-vars
Line 9:3: 'getArticleCount' is defined but never used no-unused-vars
Line 10:3: 'getTotalArticleCount' is defined but never used no-unused-vars
Line 29:6: React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array react-hooks/exhaustive-deps
src/Components/MemoryList/MemoryComponent2.js
Line 1:38: 'useRef' is defined but never used no-unused-vars
Line 2:10: 'useNavigate' is defined but never used no-unused-vars
Line 5:3: 'getArticleApi' is defined but never used no-unused-vars
Line 6:3: 'getVideoApi' is defined but never used no-unused-vars
Line 7:3: 'getThumbnailApi' is defined but never used no-unused-vars
Line 8:3: 'getImageApi' is defined but never used no-unused-vars
Line 9:3: 'getArticleCount' is defined but never used no-unused-vars
Line 10:3: 'getTotalArticleCount' is defined but never used no-unused-vars
Line 13:8: 'MemoryCard' is defined but never used no-unused-vars
Line 30:6: React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array react-hooks/exhaustive-deps
src/Components/MemoryList/MemoryComponent3.js
Line 1:38: 'useRef' is defined but never used no-unused-vars
Line 2:10: 'useNavigate' is defined but never used no-unused-vars
Line 8:3: 'getTotalUserArticleCountApi' is defined but never used no-unused-vars
Line 9:3: 'getGroupArticleCountApi' is defined but never used no-unused-vars
Line 20:8: 'MemoryCard' is defined but never used no-unused-vars
Line 21:8: 'MemoryCardVideo' is defined but never used no-unused-vars
Line 25:10: 'Cdata' is defined but never used no-unused-vars
Line 30:10: 'graphBtn' is assigned a value but never used no-unused-vars
Line 30:20: 'setgraphBtn' is assigned a value but never used no-unused-vars
Line 46:6: React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Line 56:6: React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Line 103:6: React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array react-hooks/exhaustive-deps
src/Components/MemoryList/MemoryHead.js
Line 1:38: 'useRef' is defined but never used no-unused-vars
Line 4:3: 'getArticlesApi' is defined but never used no-unused-vars
Line 5:3: 'getArticleApi' is defined but never used no-unused-vars
Line 6:3: 'getVideoApi' is defined but never used no-unused-vars
Line 7:3: 'getThumbnailApi' is defined but never used no-unused-vars
Line 8:3: 'getImageApi' is defined but never used no-unused-vars
Line 23:9: 'navigate' is assigned a value but never used no-unused-vars
Line 41:6: React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Line 52:6: React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Line 62:6: React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Line 81:6: React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array react-hooks/exhaustive-deps
src/Components/NavBar/NavBar.js
Line 3:8: 'styled' is defined but never used no-unused-vars
Line 24:9: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
Line 44:9: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
src/Components/Statistics/Calendar.js
Line 6:5: 'getGroupArticleCountApi' is defined but never used no-unused-vars
Line 8:9: 'Cdata' is defined but never used no-unused-vars
Line 31:8: React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array react-hooks/exhaustive-deps
src/Components/Statistics/LineChart.js
Line 7:5: 'getGroupArticleCountApi' is defined but never used no-unused-vars
Line 9:10: 'Ldata' is defined but never used no-unused-vars
Line 24:8: React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Line 47:8: React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array react-hooks/exhaustive-deps
src/Components/Statistics/Piechart.js
Line 5:5: 'getTotalUserArticleCountApi' is defined but never used no-unused-vars
Line 39:8: React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array react-hooks/exhaustive-deps
src/pages/CreateGroup/CreateGroup.js
Line 1:27: 'useEffect' is defined but never used no-unused-vars
Line 10:3: 'ShiningComponent' is defined but never used no-unused-vars
Line 11:3: 'ShiningContainer' is defined but never used no-unused-vars
Line 97:9: 'joinGroup' is assigned a value but never used no-unused-vars
Line 126:9: 'ShiningInput' is assigned a value but never used no-unused-vars
src/pages/Home/Home.js
Line 247:17: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
Line 274:17: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
Line 280:17: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
src/pages/Main/Main.js
Line 6:8: '$' is defined but never used no-unused-vars
Line 7:8: 'styled' is defined but never used no-unused-vars
Line 43:9: 'rotation' is assigned a value but never used no-unused-vars
Line 49:6: React Hook useEffect has a missing dependency: 'now'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Line 166:11: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
Line 171:13: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
Line 175:19: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
Line 188:13: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
Line 192:19: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
Line 206:11: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
Line 233:13: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
Line 235:13: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
Line 237:13: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
Line 258:13: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
Line 260:13: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
Line 262:13: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
src/pages/MemoryList/MemoryList.js
Line 1:38: 'useRef' is defined but never used no-unused-vars
Line 2:10: 'useNavigate' is defined but never used no-unused-vars
Line 5:3: 'getArticleApi' is defined but never used no-unused-vars
Line 6:3: 'getVideoApi' is defined but never used no-unused-vars
Line 7:3: 'getThumbnailApi' is defined but never used no-unused-vars
Line 8:3: 'getImageApi' is defined but never used no-unused-vars
Line 9:3: 'getArticleCount' is defined but never used no-unused-vars
Line 10:3: 'getTotalArticleCount' is defined but never used no-unused-vars
Line 42:6: React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Line 46:6: React Hook useEffect has missing dependencies: 'articlesPhoto' and 'articlesVideo'. Either include them or remove the dependency array. You can also replace multiple useState variables with useReducer if 'setArticlePhotoIndex' needs the current value of 'articlesPhoto' react-hooks/exhaustive-deps
src/pages/Quiz/Quiz.js
Line 1:38: 'useCallback' is defined but never used no-unused-vars
Line 51:6: React Hook useEffect has missing dependencies: 'groupSeq', 'navigate', 'problemIndex', 'problems', and 'score'. Either include them or remove the dependency array. You can also replace multiple useState variables with useReducer if 'setProblem' needs the current value of 'problemIndex' react-hooks/exhaustive-deps
Line 62:6: React Hook useEffect has missing dependencies: 'groupSeq' and 'problemIndex'. Either include them or remove the dependency array. You can also replace multiple useState variables with useReducer if 'setProblem' needs the current value of 'problemIndex' react-hooks/exhaustive-deps
src/pages/Statistics/Statistics.js
Line 1:38: 'useRef' is defined but never used no-unused-vars
Line 2:10: 'useNavigate' is defined but never used no-unused-vars
Line 18:10: 'totalArticle' is assigned a value but never used no-unused-vars
Line 18:24: 'setTotalArticle' is assigned a value but never used no-unused-vars
Line 69:6: React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array react-hooks/exhaustive-deps
src/pages/WriteBoard/VideoUploader.js
Line 6:12: 'defaultImg' is assigned a value but never used no-unused-vars
Line 6:24: 'setDefaultImg' is assigned a value but never used no-unused-vars
src/pages/WriteBoard/WriteBoard.js
Line 7:10: 'writeMemoryApi' is defined but never used no-unused-vars
Line 26:22: 'setDefaultImg' is assigned a value but never used no-unused-vars
Build step 'Execute shell' marked build as failure
Finished: FAILURE해당 에러 로그를 확인해보면 빌드 중 다양한 모듈에서 경고 메시지가 떴고, 이로 인해 빌드가 실패했다고 생각했다. 하지만 실제 에러가 난 부분은 따로 있었다.
Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.
Failed to compile.중간에 보면 이런 메세지가 보인다. 이 때 빌드가 실패했다.
원인
해당 에러는 리액트 어플리케이션을 빌드할 때 종종 나타나는 빌드 오류이다. 리액트는 CI라는 환경 변수가 기본적으로 true로 되어있는데, 요약하면 리액트의 경고를 빌드 오류로 처리한다는 것이다.
해결
가장 좋은 방법은 경고를 없애는 것이겠지만, 우회하는 방법도 존재한다.
빌드 명령어 앞에 CI=false를 추가로 붙여준다. → CI=false npm run build
백엔드 개발자가 될거야