[FE] 프론트엔드 인프라 구성도

시작하며

집사의고민 프론트엔드 파트에서는 CI/CD 도구로 젠킨스(Jenkins)를 사용했었습니다. 하지만 젠킨스 인스턴스의 디스크 문제 등으로 관리가 쉽지 않았습니다.

이러한 포인트들을 지속적으로 관리하기에 소비하는 시간과 리소스가 크다고 판단하여, Jenkins에서 GitHub Actions로 마이그레이션을 진행(2023-09-12)했습니다.

GitHub Actions를 사용하면 GitHub 페이지에서 바로 실행 결과를 확인할 수 있고, 워크플로우 간 캐시를 공유할 수 있으며 빌드 과정에서 커스텀 액션을 쉽게 구성할 수 있어 편리합니다. 이로써 저희 팀은 더 깔끔하고 효율적인 CI/CD 관리가 가능해졌습니다.

인프라 구성도(2023년 9월 12일)

CI/CD

GitHub Actions

Deploy with

Docker Nginx

GitHub에서 dev 또는 main 브랜치로 머지를 하게 되면 GitHub Action이 동작하여 워크플로우를 실행합니다.

1. Checkout, 브랜치에 머지 된 내용을 기반으로 코드를 CI 서버로 내려받습니다.
2. Dockerfile build, 도커파일을 빌드하여 도커 이미지를 생성합니다.
3. Dockerhub push, 저희는 현재 가장 기본적인 Docker registry, Dockerhub를 사용해 이미지를 저장하고 있습니다.
4. self-hosted runner를 통해 Zipgo prod server에 접속하여 Dockerhub로 부터 이미지를 내려받고 도커 컨테이너를 구동합니다.
5. 배포가 성공하면 Slack으로 배포 성공 / 실패 알림이 옵니다.

기본적으로 리액트 빌드 결과물은 배포 서버의 도커로 구동되어있는 nginx 컨테이너에 감싸져서 배포됩니다.

해당 컨테이너 내부에서 3000 포트로 바인딩되며, 프로덕션 서버에서는 리버스 프록시를 통해 80포트 또는 443포트(zipgo.pet)으로 포워딩됩니다.

2023년 9월 12일 기준

인프라 구성도(2023년 8월 17일)

CI/CD

Jenkins Github Webhook

Deploy with

Docker Nginx

전체적인 워크플로우는, 깃허브에서 dev 또는 main 브랜치로 머지를 하게 되면

1. Github Webhook이 동작하여 Zipgo Infra server의 Jenkins에서 트리거가 됩니다.
2. Jenkins pipeline이 돌아갑니다.
   1. Clone Repo, 브랜치에 머지 된 내용을 기반으로 브랜치를 클론해옵니다.
   2. Dockerfile build, 도커파일을 빌드하여 도커 이미지를 생성합니다.
   3. Dockerhub push, 저희는 현재 가장 기본적인 Docker registry, Dockerhub를 사용해 이미지를 저장하고 있습니다.
   4. Deploy sshagent를 통해 Zipgo prod server에 접속하여 Dockerhub로 부터 이미지를 내려받고 도커 컨테이너를 구동합니다.
   5. 배포가 성공하면 Slack으로 배포 성공 / 실패 알림이 옵니다.

기본적으로 리액트 빌드 결과물은 배포 서버의 도커로 구동되어있는 nginx 컨테이너에 감싸져서 배포됩니다.

해당 컨테이너 내부에서 3000 포트로 바인딩되며, 프로덕션 서버에서는 리버스 프록시를 통해 80포트 또는 443포트(zipgo.pet)으로 포워딩됩니다.

2023년 8월 17일 기준