CI/CD 구성을 위해 AWS CodePipeline( Github → CodeBuild → CodeDeploy )를 이용하고 있다.
- yarn 을 사용하고 있으며 4.0.2 버전을 yarn set version 4.0.2 을 통해 버전 고정하여 개발했다.
- next.js 14.0.3
- AWS CodeBuild 현재 환경 이미지 aws/codebuild/standard:7.0-23.07.28
로컬에서는 빌드할 때 이상이 없었는데 CodeBuild에서 yarn build 만 하면 아래처럼 오류가 났다.
▲ Next.js 14.0.3 - Environments: .env Creating an optimized production build ... Failed to compile. ... 중략 ... > Build failed because of webpack errors [Container] 2024/01/08 01:54:43.364625 Command did not exit successfully yarn build exit status 1 [Container] 2024/01/08 01:54:43.368400 Phase complete: BUILD State: FAILED [Container] 2024/01/08 01:54:43.368418 Phase context status code: COMMAND_EXECUTION_ERROR Message: Error while executing command: yarn build. Reason: exit status 1
빌드 실패하였고 웹팩 에러라 떴다.
저기 중략된 곳에서 힌트를 찾아보려고 했다. 중략된 곳 내용 중에는
... 생략 ... Module not found: @mui/x-date-pickers tried to access @mui/system (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound. ... 생략 ... Ancestor breaking the chain: material-react-table@virtual:1faeb64ee5994910c614ff89a4c6833c8e9fccc7e7f77d1ae9625cc0584dc4c5fcaead64efd7483bafd0c3492a55eae395f5c212dedee588f359f873b21a3d8c#npm:2.3.1 Ancestor breaking the chain: othetak-front-customer@workspace:. https://nextjs.org/docs/messages/module-not-found ... 생략 ... /src/api/diet/api.ts Module not found: Can't resolve 'lodash/groupBy' https://nextjs.org/docs/messages/module-not-found Import trace for requested module: ./src/app/food/diet/[dietId]/page.tsx ./src/app/auth/signUp/page.tsx Module not found: Can't resolve 'lodash/debounce' https://nextjs.org/docs/messages/module-not-found ./src/app/food/diet/[dietId]/AddFoodModal.tsx Module not found: Can't resolve 'lodash/isEmpty' https://nextjs.org/docs/messages/module-not-found
이렇게 모듈이 없다고 나온다. (Module not found)
이 부분을 해결하기 위해 여러 원인을 찾는 과정은 필요 없을 것 같다.
(github 환경변수에서 값을 가져와서 만드는 .env 가 잘 만들어졌는지 , loadsh 불러오는 부분에서 문제가 있는 지, .yarn 폴더와 .yarnrc.yml 파일을 git에서 제거한 상태로 올려서 yarn install로 생성되게 한다는지, AWS CodeBuild 현재 환경 이미지가 버전이 변경해본다든지, mui 문제인 지, PnP모드 때문인지, 로컬에서 yarn을 새로 설치한 후 변경된 yarn.lock 파일을 새로 업로드한다는 등)
결론은 AWS CodeBuild 당시 build spec에 yarn install 이 있지만 node_modules 폴더가 생성되지 않아서 그런 것이다.
이 원인을 알아내는 과정과 해결 방법을 아래에 설명하였다.
AWS CodeBuild의 Buildspec 편집을 들어가서 내가 입력한 커맨드를 보자.
install:
runtime-versions:
nodejs: 18.x
commands:
- ls -al
- yarn set version 4.0.2
- yarn -v
- ls -al
- cat .yarnrc.yml
- yarn install --immutable
- ls -al
위 커맨드 순서대로 진행한 결과의 로고를 분석해 보자.
1. 인스톨 시작 당시 목록 조회해본다.
.yarn 폴더와 .yarnrc.yml 파일이 없다.
[Container] 2024/01/08 08:46:24.236436 Running command ls -al total 572 drwxr-xr-x 8 root root 315 Jan 8 08:46 . drwxr-xr-x 3 root root 17 Jan 8 08:46 .. -rw-rw-r-- 1 root root 86 Jan 8 08:44 .eslintrc.json -rw-rw-r-- 1 root root 526 Jan 8 08:44 .gitignore -rw-rw-r-- 1 root root 72 Jan 8 08:44 .prettierignore -rw-rw-r-- 1 root root 126 Jan 8 08:44 .prettierrc.json drwxr-xr-x 2 root root 40 Jan 8 08:46 .storybook drwxr-xr-x 2 root root 50 Jan 8 08:46 .vscode -rw-rw-r-- 1 root root 1383 Jan 8 08:44 README.md -rw-rw-r-- 1 root root 541 Jan 8 08:44 appspec.yml drwxr-xr-x 6 root root 73 Jan 8 08:46 lib -rw-rw-r-- 1 root root 247 Jan 8 08:44 next.config.js -rw-rw-r-- 1 root root 1925 Jan 8 08:44 package.json drwxr-xr-x 3 root root 56 Jan 8 08:46 public drwxr-xr-x 2 root root 78 Jan 8 08:46 shellScripts drwxr-xr-x 9 root root 99 Jan 8 08:46 src -rw-rw-r-- 1 root root 75 Jan 8 08:44 test.html -rw-rw-r-- 1 root root 660 Jan 8 08:44 tsconfig.json -rw-rw-r-- 1 root root 541863 Jan 8 08:44 yarn.lock
2. yarn 버전 4.0.2으로 설정하고 확인 한 뒤 목록 조회한다.
.yarn 폴더와 .yarnrc.yml 파일이 생성됨을 확인 할 수 있다.
[Container] 2024/01/08 08:46:24.245564 Running command yarn set version 4.0.2 ➤ YN0000: Retrieving https://repo.yarnpkg.com/4.0.2/packages/yarnpkg-cli/bin/yarn.js ➤ YN0000: Saving the new release in .yarn/releases/yarn-4.0.2.cjs ➤ YN0000: Done in 0s 415ms [Container] 2024/01/08 08:46:25.353225 Running command yarn -v 4.0.2 [Container] 2024/01/08 08:46:25.764283 Running command ls -al total 580 drwxr-xr-x 9 root root 4096 Jan 8 08:46 . drwxr-xr-x 3 root root 17 Jan 8 08:46 .. -rw-rw-r-- 1 root root 86 Jan 8 08:44 .eslintrc.json -rw-rw-r-- 1 root root 526 Jan 8 08:44 .gitignore -rw-rw-r-- 1 root root 72 Jan 8 08:44 .prettierignore -rw-rw-r-- 1 root root 126 Jan 8 08:44 .prettierrc.json drwxr-xr-x 2 root root 40 Jan 8 08:46 .storybook drwxr-xr-x 2 root root 50 Jan 8 08:46 .vscode drwxr-xr-x 3 root root 22 Jan 8 08:46 .yarn -rw-r--r-- 1 root root 40 Jan 8 08:46 .yarnrc.yml -rw-rw-r-- 1 root root 1383 Jan 8 08:44 README.md -rw-rw-r-- 1 root root 541 Jan 8 08:44 appspec.yml drwxr-xr-x 6 root root 73 Jan 8 08:46 lib -rw-rw-r-- 1 root root 247 Jan 8 08:44 next.config.js -rw-rw-r-- 1 root root 1925 Jan 8 08:44 package.json drwxr-xr-x 3 root root 56 Jan 8 08:46 public drwxr-xr-x 2 root root 78 Jan 8 08:46 shellScripts drwxr-xr-x 9 root root 99 Jan 8 08:46 src -rw-rw-r-- 1 root root 75 Jan 8 08:44 test.html -rw-rw-r-- 1 root root 660 Jan 8 08:44 tsconfig.json -rw-rw-r-- 1 root root 541863 Jan 8 08:44 yarn.lock
3. 생성된 .yarnrc.yml을 확인하여 내용을 본다.
[Container] 2024/01/08 08:46:25.769760 Running command cat .yarnrc.yml yarnPath: .yarn/releases/yarn-4.0.2.cjs
4. yarn 을 install 한다.
[Container] 2024/01/08 08:46:25.774527 Running command yarn install --immutable ➤ YN0000: · Yarn 4.0.2 ➤ YN0000: ┌ Resolution step ➤ YN0000: └ Completed in 0s 341ms ➤ YN0000: ┌ Post-resolution validation ➤ YN0060: │ @types/react is listed by your project with version 18.2.47, which doesn't satisfy what @material-ui/core (p174a3) and other dependencies request (^16.8.6 || ^17.0.0). ➤ YN0060: │ date-fns is listed by your project with version 2.30.0, which doesn't satisfy what react-date-range (p895c7) requests (3.0.6 || >=3.0.0). ➤ YN0060: │ react is listed by your project with version 18.2.0, which doesn't satisfy what @material-ui/core (p1eae0) and other dependencies request (^16.8.0 || ^17.0.0). ➤ YN0060: │ react-dom is listed by your project with version 18.2.0, which doesn't satisfy what @material-ui/core (pac8e7) and other dependencies request (^16.8.0 || ^17.0.0). ➤ YN0002: │ othetak-front-customer@workspace:. doesn't provide @mui/system (p87a21), requested by @mui/x-date-pickers. ➤ YN0086: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code. ➤ YN0000: └ Completed ➤ YN0000: ┌ Fetch step ➤ YN0013: │ 1384 packages were added to the project (+ 640.48 MiB). ➤ YN0000: └ Completed in 16s 350ms ➤ YN0000: ┌ Link step ➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental ➤ YN0007: │ esbuild@npm:0.18.20 must be built because it never has been before or the last one failed ➤ YN0007: │ sharp@npm:0.32.6 must be built because it never has been before or the last one failed ➤ YN0007: │ @swc/core@npm:1.3.102 [7e765] must be built because it never has been before or the last one failed ➤ YN0007: │ core-js-pure@npm:3.35.0 must be built because it never has been before or the last one failed ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library! ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT The project needs your help! Please consider supporting core-js: ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT > https://opencollective.com/core-js ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT > https://patreon.com/zloirock ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT > https://boosty.to/zloirock ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT > bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT I highly recommend reading this: https://github.com/zloirock/core-js/blob/master/docs/2023-02-14-so-whats-next.md ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT ➤ YN0000: │ sharp@npm:0.32.6 STDOUT sharp: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.14.5/libvips-8.14.5-linux-x64.tar.br ➤ YN0000: │ sharp@npm:0.32.6 STDOUT sharp: Integrity check passed for linux-x64 ➤ YN0000: └ Completed in 6s 633ms ➤ YN0000: · Done with warnings in 23s 724ms
5. 이제 정상적으로 node_modules 폴더가 생성되었는지 확인해 본다.
[Container] 2024/01/08 08:46:50.330419 Running command ls -al total 2000 drwxr-xr-x 9 root root 4096 Jan 8 08:46 . drwxr-xr-x 3 root root 17 Jan 8 08:46 .. -rw-rw-r-- 1 root root 86 Jan 8 08:44 .eslintrc.json -rw-rw-r-- 1 root root 526 Jan 8 08:44 .gitignore -rwxr-xr-x 1 root root 1379862 Jan 8 08:46 .pnp.cjs -rw-r--r-- 1 root root 70818 Jan 8 08:46 .pnp.loader.mjs -rw-rw-r-- 1 root root 72 Jan 8 08:44 .prettierignore -rw-rw-r-- 1 root root 126 Jan 8 08:44 .prettierrc.json drwxr-xr-x 2 root root 40 Jan 8 08:46 .storybook drwxr-xr-x 2 root root 50 Jan 8 08:46 .vscode drwxr-xr-x 4 root root 63 Jan 8 08:46 .yarn -rw-r--r-- 1 root root 40 Jan 8 08:46 .yarnrc.yml -rw-rw-r-- 1 root root 1383 Jan 8 08:44 README.md -rw-rw-r-- 1 root root 541 Jan 8 08:44 appspec.yml drwxr-xr-x 6 root root 73 Jan 8 08:46 lib -rw-rw-r-- 1 root root 247 Jan 8 08:44 next.config.js -rw-rw-r-- 1 root root 1925 Jan 8 08:44 package.json drwxr-xr-x 3 root root 56 Jan 8 08:46 public drwxr-xr-x 2 root root 78 Jan 8 08:46 shellScripts drwxr-xr-x 9 root root 99 Jan 8 08:46 src -rw-rw-r-- 1 root root 75 Jan 8 08:44 test.html -rw-rw-r-- 1 root root 660 Jan 8 08:44 tsconfig.json -rw-rw-r-- 1 root root 541863 Jan 8 08:44 yarn.lock
없다! 없다!!! 없다!!!!
이렇게 node_modules 폴더가 생성되지 않았고 이 이후로 yarn build를 실행하니 당연히 모듈이 없다고 오류가 난 것이였다.
기억으로는 이 비슷한 상황이 npm 에서 yarn 으로 방식을 옮겨가며 생겼던 이슈와 비슷하여 해결 방식을 다시 기억해 냈다.
원인은 .yarnrc.yml 내용 안에 nodeLinker: node-modules 내용이 빠져 있었다.
🙏 해결 방법은 해당 내용을 넣은 .yarnrc.yml 과 yarn-4.0.2.cjs 을 git에 업로드하는 것이다.
로컬에서 아래 내용을 넣어 .yarnrc.yml을 생성하여 git 업로드에 포함시킨다.
(yarn-4.02.cjs라는 파일은 로컬에서 yarn set version 4.0.2를 이용해서 버전을 설정했기 때문에 자동으로 생성된 것이다. 개발자마다 설정함이 다르기 때문에 4.0.2가 꼭 아닐 수 있다.)
nodeLinker: node-modules yarnPath: .yarn/releases/yarn-4.0.2.cjs
그 다음 .yarn/releases/yarn-4.0.2.cjs 파일을 Git에 포함시킨다.
아래 이미지는 .yarnrc.yml 과 .yarn/releases/yarn-4.0.2.cjs 파일이 리모트에 올라간 모습니다.
이제 이 상태로 다시 CodeBuild 해 보았다.
[Container] 2024/01/08 08:51:30.902039 Running command ls -al total 580 drwxr-xr-x 9 root root 4096 Jan 8 08:51 . drwxr-xr-x 3 root root 17 Jan 8 08:51 .. -rw-rw-r-- 1 root root 86 Jan 8 08:51 .eslintrc.json -rw-rw-r-- 1 root root 526 Jan 8 08:51 .gitignore -rw-rw-r-- 1 root root 72 Jan 8 08:51 .prettierignore -rw-rw-r-- 1 root root 126 Jan 8 08:51 .prettierrc.json drwxr-xr-x 2 root root 40 Jan 8 08:51 .storybook drwxr-xr-x 2 root root 50 Jan 8 08:51 .vscode drwxr-xr-x 3 root root 22 Jan 8 08:51 .yarn -rw-rw-r-- 1 root root 66 Jan 8 08:51 .yarnrc.yml -rw-rw-r-- 1 root root 1383 Jan 8 08:51 README.md -rw-rw-r-- 1 root root 541 Jan 8 08:51 appspec.yml drwxr-xr-x 6 root root 73 Jan 8 08:51 lib -rw-rw-r-- 1 root root 247 Jan 8 08:51 next.config.js -rw-rw-r-- 1 root root 1925 Jan 8 08:51 package.json drwxr-xr-x 3 root root 56 Jan 8 08:51 public drwxr-xr-x 2 root root 78 Jan 8 08:51 shellScripts drwxr-xr-x 9 root root 99 Jan 8 08:51 src -rw-rw-r-- 1 root root 75 Jan 8 08:51 test.html -rw-rw-r-- 1 root root 660 Jan 8 08:51 tsconfig.json -rw-rw-r-- 1 root root 541863 Jan 8 08:51 yarn.lock [Container] 2024/01/08 08:51:30.907729 Running command cat .yarnrc.yml nodeLinker: node-modules yarnPath: .yarn/releases/yarn-4.0.2.cjs [Container] 2024/01/08 08:51:30.912290 Running command yarn install --immutable ➤ YN0000: · Yarn 4.0.2 ➤ YN0000: ┌ Resolution step ➤ YN0000: └ Completed in 0s 391ms ➤ YN0000: ┌ Post-resolution validation ➤ YN0060: │ @types/react is listed by your project with version 18.2.47, which doesn't satisfy what @material-ui/core (p174a3) and other dependencies request (^16.8.6 || ^17.0.0). ➤ YN0060: │ date-fns is listed by your project with version 2.30.0, which doesn't satisfy what react-date-range (p895c7) requests (3.0.6 || >=3.0.0). ➤ YN0060: │ react is listed by your project with version 18.2.0, which doesn't satisfy what @material-ui/core (p1eae0) and other dependencies request (^16.8.0 || ^17.0.0). ➤ YN0060: │ react-dom is listed by your project with version 18.2.0, which doesn't satisfy what @material-ui/core (pac8e7) and other dependencies request (^16.8.0 || ^17.0.0). ➤ YN0002: │ othetak-front-customer@workspace:. doesn't provide @mui/system (p87a21), requested by @mui/x-date-pickers. ➤ YN0086: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code. ➤ YN0000: └ Completed ➤ YN0000: ┌ Fetch step ➤ YN0013: │ 1384 packages were added to the project (+ 640.48 MiB). ➤ YN0000: └ Completed in 17s 490ms ➤ YN0000: ┌ Link step ➤ YN0007: │ sharp@npm:0.32.6 must be built because it never has been before or the last one failed ➤ YN0007: │ esbuild@npm:0.18.20 must be built because it never has been before or the last one failed ➤ YN0007: │ @swc/core@npm:1.3.102 [7e765] must be built because it never has been before or the last one failed ➤ YN0007: │ core-js-pure@npm:3.35.0 must be built because it never has been before or the last one failed ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library! ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT The project needs your help! Please consider supporting core-js: ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT > https://opencollective.com/core-js ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT > https://patreon.com/zloirock ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT > https://boosty.to/zloirock ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT > bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT I highly recommend reading this: https://github.com/zloirock/core-js/blob/master/docs/2023-02-14-so-whats-next.md ➤ YN0000: │ core-js-pure@npm:3.35.0 STDOUT ➤ YN0000: │ sharp@npm:0.32.6 STDOUT sharp: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.14.5/libvips-8.14.5-linux-x64.tar.br ➤ YN0000: │ sharp@npm:0.32.6 STDOUT sharp: Integrity check passed for linux-x64 ➤ YN0000: └ Completed in 33s 588ms ➤ YN0000: · Done with warnings in 51s 999ms [Container] 2024/01/08 08:52:24.662687 Running command ls -al total 624 drwxr-xr-x 10 root root 4096 Jan 8 08:51 . drwxr-xr-x 3 root root 17 Jan 8 08:51 .. -rw-rw-r-- 1 root root 86 Jan 8 08:51 .eslintrc.json -rw-rw-r-- 1 root root 526 Jan 8 08:51 .gitignore -rw-rw-r-- 1 root root 72 Jan 8 08:51 .prettierignore -rw-rw-r-- 1 root root 126 Jan 8 08:51 .prettierrc.json drwxr-xr-x 2 root root 40 Jan 8 08:51 .storybook drwxr-xr-x 2 root root 50 Jan 8 08:51 .vscode drwxr-xr-x 3 root root 46 Jan 8 08:52 .yarn -rw-rw-r-- 1 root root 66 Jan 8 08:51 .yarnrc.yml -rw-rw-r-- 1 root root 1383 Jan 8 08:51 README.md -rw-rw-r-- 1 root root 541 Jan 8 08:51 appspec.yml drwxr-xr-x 6 root root 73 Jan 8 08:51 lib -rw-rw-r-- 1 root root 247 Jan 8 08:51 next.config.js drwxr-xr-x 900 root root 28672 Jan 8 08:52 node_modules -rw-rw-r-- 1 root root 1925 Jan 8 08:51 package.json drwxr-xr-x 3 root root 56 Jan 8 08:51 public drwxr-xr-x 2 root root 78 Jan 8 08:51 shellScripts drwxr-xr-x 9 root root 99 Jan 8 08:51 src -rw-rw-r-- 1 root root 75 Jan 8 08:51 test.html -rw-rw-r-- 1 root root 660 Jan 8 08:51 tsconfig.json -rw-rw-r-- 1 root root 541863 Jan 8 08:51 yarn.lock
위에서부터 과정을 보고 마지막 ls -al 한 목록을 보니 node_modules 폴더가 생성된 것을 확인할 수 있다.
그리고 빌드는 성공적으로 종료되었다.
[Container] 2024/01/08 08:53:50.675022 Phase complete: BUILD State: SUCCEEDED [Container] 2024/01/08 08:53:50.675043 Phase context status code: Message: [Container] 2024/01/08 08:53:50.727060 Entering phase POST_BUILD