개발자

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

2024년 03월 05일조회 84

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

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 0

답변이 없을 때 보이는 아이콘

첫 답변을 기다리고 있어요.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 03월 05일

한개의 CloudFront에서 여러 S3 buckets을 서빙할 수 있는 방법이 있지만, 이 경우에는 각 bucket별로 별도의 origin을 설정해줘야 합니다. Lambda@Edge를 이용하면 origin selection routing을 동적으로 할 수 있습니다. Lambda@Edge는 CloudFront의 CDN 엣지 위치에서 AWS Lambda 코드를 실행하게 해주는 기능입니다. Origin Request 이벤트에 함수를 연결해요, 그럼 클라이언트 요청에 따라서 원하는 S3 버켓으로 라우팅될 수 있어요. 다음은 대략적인 설정 단계입니다: 1. 각 프로젝트를 서빙하는 S3 버켓을 생성 2. CloudFront 배포 생성 - 각 버켓의 origin과 cache behavior 등록(Origin Path, viewer protocol policy, allowed HTTP methods 등) 3. Lambda@Edge 함수 생성 - 입력된 URL path 에 따라 맞는 s3 버켓으로 라우팅하는 로직 구현. 4. CloudFront distribution settings에서 Default Cache Behavior Settings 섹션에 생성한 lambda 함수 ARN 붙여넣기. 하지만 이 방법은 모노레포 구조와 상관없이 여러개의 프로젝트를 한 개의 cloudfront에서 운영하기 위한 일반적인 접근방법입니다. 소스 코드 모노리포화와 deploy 시스템 구조는 별도로 고려해야 합니다. 모노레포 배포로는 Lerna, Yarn Workspaces 등이 있으나, 웹 서비스 배포에 특화된 것은 아니므로 적절한 스크립트 작성이 필요합니다. 이에 대해서는 프로젝트의 요구사항과 비즈니스 로직에 따라 개별적으로 고려해야 합니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!