#모노레포

turbo Repo 빌드 속도 멀티레포 보다 빠를까요?

최근에 회사에 모노레포 도입하려고 터보레포에 대해 학습하고 있습니다. 공식문서 보면 빌드도 병렬적으로 실행할 수 있고 원격 캐시를 통해 변경된 코드에 대한 프로젝트만 빌드가 가능하다는 내용을 봤습니다. 공식문서 앞부분을 학습해 봤을 때 제가 드는 생각은 멀티 레포로 운영되는 하나의 프로젝트 코드를 수정하고 빌드 후 배포하는 시간보다 터보 레포로 빌드하고 배포하는 시간이 대체적으로 더 빠를 것이라 생각듭니다. 예를들어 모노레포에서 lint나 공용으로 사용하는 ui컴포넌트는 packages/ 에서 관리하고 프로젝트 코드는 app/project1의 구조의 형태를 가지고 있다고 가정했을 때 case1. 린트 코드 한 줄 수정하고 배포 - 터보레포: 린트 수정한 프로젝트에 대해서만 빌드 - 멀티레포: 프로젝트에 전체 코드에 대한 빌드가 실행 case2. 한번에 린트, 공통ui, 특정 프로젝트 코드 수정하고 배포 - 터보레포: 병렬적으로 배포해서 빠른 배포 - 멀티레포: case1과 같이 전체 코드에 대한 빌드가 실행해서 case1과 빌드시간이 비슷하다 개발은 next.js로 하고 vercel에서 배포하고 있습니다. 제가 위에 작성한 case처럼 터보레포가 빌드시간이 더 빠르게 될까요?? 추가로 next.js프로젝트 vercel에 배포했을 때 캐시전략을 사용할 수도 있는지도 궁금하네요. redeploy할 때만 캐시를 사용할지 선택할 수 있는 것만 알고있습니다. 물론 개발자가 설정한 캐시 전략과 경우에 따라 다르겠지만 대체적으로 어느 방식이 더 빠른지 궁금합니다.

환경변수 주입 및 빌드(모노레포)

모노레포 프로젝트 환경 및 요구사항 - 프로젝트는 front(React), back(Node), common 패키지로 구성되어 있으며, 모노레포로 되어있음 - Dockerfile 스크립트에서는 build → run 순서로 실행되도록 구현되어 있음 - 서버 배포 시에는 하나의 포트만 사용해야 하므로 back(Node)에서 front의 정적 파일(index.html)을 실행해야 함 - Docker 빌드 시, front(webpack 빌드)와 back 둘 다 build 스크립트를 실행하고, 이미지 실행 시에는 back만 run 스크립트를 실행하여 back에서 front의 정적 파일을 실행해야 함 - 환경변수는 이미지 실행 시 docker-compose.yml의 env_file 속성을 사용해 외부에서 주입해야 함(환경변수가 바뀌는 상황이 있다면 .env 파일을 수정한 후 다시 빌드해야 합니다.) 예외 상황 Docker 빌드할 때 .env 파일을 포함하지 않고 run 스크립트를 실행(이미지 실행) 시 주입하는데, front 패키지에는 run 스크립트가 존재하지 않습니다. (back에서 front의 정적 파일을 실행) 즉, 환경변수가 주입되지 않고 있음 해결 방법 첫번째는 back에서 front의 dist 파일 호출 시 환경변수 객체를 만들어 value 값을 key 값으로 치환해서 함께 넘기고, index.html의 head에서 window 객체를 활용해 값을 받는 방법 하지만 이 방법은 개발자 도구에서 환경변수 값이 노출되고, window 객체를 활용하기 때문에 새로운 브라우저를 생성할 때마다 사이드 이펙트가 발생할 수 있음 두번째는 모노레포 root 패키지에서 prerun 스크립트로 front의 build 스크립트를 실행하는 방법 스크립트 -> "prerun": "lerna run build --parallel --scope @projectname/front --stream", 이 방법은 빌드를 두 번 실행하므로 자원을 많이 소모하지만, 예외 상황이 없는 것으로 보임 질문 받은 내용 Q. 환경변수를 바꾸는 상황이 존재할까요? A. 회사의 인프라 환경에 따라 다르지만, 포트나 IP가 변경될 수 있는 상황이 있음 예를 들어, 외부 서버에 요청을 보낼 경우 그 서버의 정보가 바뀌면 설정을 변경해야 하며, 다른 서버에 요청할 때 인증 정보를 입력해야 하는데, 토큰이나 사용자 패스워드 값이 변경될 경우에도 수정이 필요함 고민되는 부분 다른 해결 방법이나 비슷한 상황이 있다면 함께 논의하고 싶습니다. ㅎㅎ *프로젝트 구조 root ├── packages │ ├── back │ │ ├── package.json │ │ ├── index.ts │ │ ├── .babelrc │ │ └── ... │ ├── common │ ├── front │ │ ├── public │ │ │ └── index.html │ │ ├── package.json │ │ ├── src │ │ │ └── index.js │ │ ├── src │ │ ├── webpack.config.js │ │ └── ... ├── package.json ├── lerna.json ├── docker-compose.yml ├── Dockerfile * 프로젝트의 중요 정보는 제외했습니다.

react 모노레포 배포는 어떻게 하나요?

안녕하게요 ! 이번에 yarn berry + workspace를 사용해서 react 프로젝트를 만들어 배포할 일이 생겼습니다 ! 최소 2개 이상의 react 프로젝트가 들어갈 계획인데... 모노레포 배포는 처음이라 어떻게 해야할지 막막하네요😂 aws를 사용해야해서 루트에서 docker로 배포하는 방향이 맞는지... (현재 사내에서 다른 프로젝트는 ECS에 배포중) 아니면 정적 웹 호스팅으로 S3에 각 버킷을 생성해서 배포하는 방향이 맞는지... (이때는 각 react 프로젝트 1개당 1버킷이 맞는걸까요? dev 서버도 만들면 각 2버킷씩인지...🥲) 혹시 보통의 프론트엔드 모노레포 구조에선 어떻게 배포하는지도 알려주시면 감사하겠습니다 :) 좋은 하루 보내세요 !

모노레포 도입 고민

안녕하세요 현재 리엑트로 pwa게발중인 대학생입니다. 이번 프로젝트에서 두개의 앱을 만들어야 하는데 현재에는 멀티레포방식으로 레포지토리 두개를 파서 개발중입니다. 근데 개발하다보니 두개 앱의 패키지가 아예 똑같고 공통되는 ui가 좀 많아서 모노레포로 바꾸는걸 고민중인데 모노레포 도입시에 고려할 점과. yarn workspace, turborepo 등등 여러가지 있는것으로 아는데 어떤걸 사용하는게 좋을지 추천부탁드리니다!

프론트엔드 모노레포 배포에 대해 궁금합니다 !

안녕하세요 프론트엔드에서 react로 모노레포구조로 운영하고있는데 현재는 통합 s3 1개에 각 프로젝트 빌드파일을 폴더로 구분하여 올리고 각 프로젝트당 1개의 cloudfront를 통해 해당 프로젝트에 접근하는 1:N 관계로 운영중입니다. 이번에 신규프로젝트가 추가되어 작업을해야하는데 앞으로 추가될 프로젝트가 계속 생길거같아서 그때마다 cloudfront를 추가해줘야하는 번거로움이 걱정됩니다... (앞으로 추가될 프로젝트까지하면 거의 react만 6개...) 이러한 모노레포 구조에서 더 좋은 배포방식이 있거나 cloudfront 한개로 운영할수있는 방법이있을까요?? (cloudfront 한개로 시도해봤는데.. 403,404 부분 index.html 이 한개밖에 설정이 안되어 프로젝트들이 제대로 찾지못해 막혔습니다... ㅠ)

React Tuborepo 배포는 어떻게 하면 좋을까요?

안녕하세요! 저는 기존 ecs의 블루/그린 배포와 s3 cloudfront cache 배포 등을 이용한 모놀리스 형식의 구조에서 tuborepo, pnpm의 모노레포 환경으로 마이그레이션 중입니다. ECS로 배포한 서비스는 약 2~3개 S3 Cloudfront로 배포된 서비스는 3개 정도 존재하는데요, 이 경우에 보통 어떤 식으로 터보레포 환경에서 배포 ci/cd를 구축하시는 지 궁금합니다. 관련 아티클도 찾아보고 있는데 vercel이나 aws amplify로 구축한 것 제외하고 큰 규모의 서비스에서의 ci/cd에 대한 따로 정보가 없는 것 같아서요. 혹시 위와 같은 구축 경험이 있으신 분 있다면 조언 부탁드립니다...😭

프론트엔드 레퍼런스 레포지토리 추천부탁드려요!! [React.js, Next.js]

제가 제대로 개발을 하고 있는 건지 모르겠습니다... 공부하기 좋은 것이나, 참고할만한 레퍼런스 레포지토리 아시는거 나눔 부탁드립니다 ㅜ. 감사합니다! 찾고있는 레포지토리 : - UI, 디자인시스템, 구조참고용, 모노레포, 좋은 구조를 가지고 있다고 생각하는 어떤 것이든..! 등

모노레포 사용시 패키지 관리

안녕하세요 모노레포 사용하다 궁금한 내용이 있어서 질문 남깁니다. 현재 npm+turborepo로 모노레포를 사용중인데요. 만약 5개의 워크스페이스 중에서 2개의 워크스페이스에서만 a라이브러리를 사용하고 나머지 3개에서는 사용하지 않는다면 각각의 워크스페이스에 라이브러리를 설치하시나요? 아니면 루트에 설치해서 관리를 하시나요?

모노레포 프로젝트에서 tailwind intellisense

최근 시작한 프로젝트에 pnpm + turborepo 구성으로 모노레포 구조를 도입하여 진행중에 있습니다. packages/tailwind-config 에 tailwind에 대한 패키지를 구성하고, 다른 프로젝트에서 해당 패키지를 import해 사용중입니다. 이 때, tailwind css가 정상적으로 적용은 되나, tailwind intellisense 익스텐션이 작동을 안하는 문제가 있습니다만, 혹시 해결 방법이 있을까요 ?

micro repo 세팅하면서 격은 문제(같은 문제 격는 분들 댁글)

이번 프로젝트에서 하나의 레포지토리에서 client, server, admin, common 4가지 패키지를 만들었습니다. client, server, admin은 common을 의존하도록 모노레포로 만들었고, client는 admin을 의존할 수 있게 micro로 만들었습니다. 간단한 패키지 설명: - client: 메뉴 헤더 등 구현, 페이지는 admin을 remote 해서 사용, React로 구현 - admin: 페이지에 나오는 콘텐츠의 전반적인 부분이 컴포넌트로 되어있음, React로 구현 - server: Node.js로 되어있고 실제 Spring 서버에서 준 데이터를 포맷하는 형태 - common: 공통 컴포넌트, 라벨 등 문제1: 다른 프로젝트에서 expose 되어있는 Next.js 프로젝트(scss로 스타일 구현)를 client에서 사용할 때 의존성 관련 오류가 생깁니다. client의 package.json에서 peerDependencies로 next를 설정해줘야 하는지, 양쪽 패키지(다른 프로젝트와 client)에서 Next.js와 React를 share 설정을 해야 되는지 잘 모르겠습니다. 여러 방법으로 시도는 해봤지만 의존성 오류나 Next.js에서 훅을 사용 못하는 오류 때문에 해결하지 못하고 있습니다. 문제2: 빌드 최적화를 위해 트리쉐이킹이나 코드 스플리팅을 해야 합니다. 웹팩에서 아래와 같이 코드 스플리팅을 하면 청크 파일 이름이 겹치기 때문에 filename을 해시값으로 설정해야 합니다. 여기서 문제가 생기는데, micro의 client처럼 remote 하는 부분에서 remote.js, app.js 청크가 필요하기 때문에 이름이 해시값으로 바뀌면 해당 청크를 찾을 수 없습니다. 또한 ModuleFederationPlugin이 빌드 시 자동으로 코드 스플리팅을 해준다는 이야기도 있는데, 이 부분은 정확하지 않습니다. 저와 같은 문제를 격고 있거나 해결하신 분들 같이 나눴으면 합니다.

express로 service 단에서 예외처리 방법

프로젝트 간단한 설명 저희 회사 프로젝트는 프론트엔드 Rect, 백엔드 Spring 으로 되어 있고 보안 회사여서 프론트 파트는 모노레포로 구성 되어있습니다. React와 NodeJS 가 같은 포트를 사용해서 모든 요청이 NodeJS에서 처리 됩니다. NodeJS는 React와 Spring의 중간 단계라고 생각하시면 되고 구성은 Router(프론트에서 받은 요청, 지금은 Controller 분리한 상황), Api(백엔드 요청 로직)으로 구성 되어있습니다. 궁금한 부분 다른 분들의 프로젝트를 봤을 때 Controller에서는 try~catch로 오류를 체크하는데 Service에서는 Promise 객체를 반환만 할 뿐 체크하는 로직은 없었습니다. 여기 프로젝트에서 Api와 Service의 의미가 다르지만 Promise 그대로 반환하면 return 타입이 Promise<any>로 설정 될 수 밖에 없습니다.(타입 설정 불가) 그리고 Controller에서 데이터를 검증해야 하고 res.data로 받아야 될 수 밖에 없습니다. 이렇게 하면 body와 header 등 응답에 필요한 부분을 받을 수 있지만 과연 이게 맞는 것인지 의문이 들어서 같이 나누고자 글을 남깁니다. 정리 1. Api(NodeJS에서 Spring으로 요청하는 로직)에서 Controller와 동일하게 예외 처리해야 되는지 2. Api에서 검증을 수행하고 res.data를 던져도 되는 부분인지 응답을 어떤 형식으로 처리하는지(만약 header의 값이 필요하면 같이 객체로 묶어서 return 해야 함) 코드 예시(해당 코드는 회사와 관련 없으며 이해를 위한 코드 입니다)