React 프로젝트 AWS로 배포하는 방법

Question

안녕하세요 리액트로 프로젝트를 진행하고 있습니다! CI CD 환경을 구축해보고 싶어서 리액트로 만든 프로젝트를 AWS에 올려보려고 합니다 현재까지 진행 상황은 아래와 같습니다
1. 로컬 리액트 앱 - Gitea repository 연동
2. Gitea repository - AWS EC2의 Jenkins (docker) 연동
3. Jenkins 에서 빌드 후 AWS S3로 배포
4. AWS S3 버킷 - AWS Cloudfront 연동
현재 AWS S3로 저장하고 Cloudfront와 연동한 상태입니다. 
이 부분에서 질문 드립니다.
1. AWS를 이용한 웹 배포는, S3에 빌드 된 디렉토리를 업로드 하는 행위 자체가 배포인건가요? 그래서 Cloudfront와 연동하여 퍼블릭 IP주소로 다른 사람들이 접속할 수 있게하는 것이 배포인건가요?

2. 위 진행사항처럼 진행하고 Cloudfront의 Url 입력 후 들어가면 빈 화면만 나오고 아무것도 나오지 않습니다. 어떻게 해야할까요?

긴 글 읽어주셔서 감사합니다.

커리어리 AI 봇 · Answer

안녕하세요! AWS로 React 프로젝트 배포를 시도하시는 것 같아서 답변드리겠습니다.

1. AWS를 이용한 웹 배포는, S3에 빌드 된 디렉토리를 업로드 하는 행위 자체가 배포인건가요? 그래서 Cloudfront와 연동하여 퍼블릭 IP주소로 다른 사람들이 접속할 수 있게하는 것이 배포인건가요?
- 네, S3에 빌드된 디렉토리를 업로드하는 것은 배포입니다. CloudFront와 연동하여 퍼블릭 IP주소로 다른 사람들이 접속할 수 있게 하는 것은 정적 컨텐츠를 더욱 빠르게 전송하고, 캐싱 및 보안 등의 기능을 추가하기 위한 CDN(Contents Delivery Network) 서비스인 CloudFront를 사용하는 것입니다.

2. 위 진행사항처럼 진행하고 Cloudfront의 Url 입력 후 들어가면 빈 화면만 나오고 아무것도 나오지 않습니다. 어떻게 해야할까요?
빈 화면이 나오는 것은 다양한 이유로 인해 발생할 수 있습니다. 아래와 같은 사항을 체크해보시는 것을 추천드립니다.

- S3 버킷에 올라간 파일들의 권한이 public으로 설정되어 있는지 확인해보세요.
- CloudFront의 캐시가 남아있어서, 이전에 접속하였던 사용자가 보았던 내용이 나오지 않을 수 있습니다. 이를 해결하기 위해서는 CloudFront의 캐시를 삭제하거나, 또는 개발자 도구의 -- Network 탭에서 Disable cache를 체크한 뒤에 새로고침해보세요.
- 브라우저 콘솔을 확인해보세요. 에러 메시지가 출력되고 있을 수 있습니다.
- S3 버킷에서 설정한 index.html 파일 이름이 올바른지 확인해보세요. 예를 들어 index.htm, Index.html 등의 파일 이름이 다를 경우 빈 화면이 출력될 수 있습니다.

위 사항들을 체크해보시고도 문제가 해결되지 않는다면, 더 자세한 원인 파악을 위해 로그와 같은 정보들을 추가로 수집해보시는 것도 좋은 방법입니다.