동작 과정

1. Local 환경에서 Github로 Push
2. GitHub의 WebHook을 이용해 배포용 EC2의 Jenkins에 전달
3. Jenkins의 동작과정
   • Github의 코드를 받아 빌드, 테스트를 진행
   • Dockerfile을 이용해 이미지를 빌드하고 빌드 된 이미지를 DockerHub에 Push
   • deploy.sh 파일을 운영 EC2로 전송하고 운영 EC2에 deploy.sh 실행 명령어 요청
   • deploy.sh 의 내용은 DockeHub에서 이미지를 받아오고 실행시키는 코드
4. 운영용 EC2에서 deploy.sh 파일 실행하여 Docker로 Spring boot 프로젝트를 띄움

F.E ≈≈®동작 과정 및 플로우 차트

1. Web Browser 에서 React 어플리케이션의 URL로 접속
2. React 애플리케이션은 가상 DOM을 사용하여 렌더링을 수행합니다. 가상 DOM은 메모리에서 유지되는 가상의 트리 구조입니다. 컴포넌트의 상태나 속성이 변경되면, React는 이전과 새로운 가상 DOM을 비교하여 변경된 부분만 실제 DOM에 업데이트한다.
3. Web Browser 에서 요청한 URL에 따라 ‘React-Router’에서 해당 URl에 해당하는 페이지의 내용을 Rendering 하는 최상위 ‘Component’를 불러온다.
4. ‘Axios’ 패키지의 기능을 사용해서 ‘Spring boot Api’와 http 통신을 주고 받는다.
5. Netlify에서 운영용 EC2로 요청 및 응답

EC2 내부구조

Docker을 이용해서 Jenkins를 띄우고 Jenkins안에서 Dockerfile을 빌드하여 DockerHub로 Push.