🍀 시스템 아키텍처

🤔 왜 작성했나요?

서비스 아키텍처를 한눈에 이해할 수 있도록 하면서도, 기술과 흐름을 깊이 이해할 수 있도록 두 가지 버전으로 나눠 작성했습니다.

• 첫 번째 간단한 서비스 아키텍처는 서비스 구조를 직관적으로 보여주어 전반적인 그림을 빠르게 파악할 수 있도록 작성했습니다.
• 두 번째 세부적인 서비스 흐름은 서비스 내부 동작과 각 구성 요소의 역할을 구체적으로 설명하여 기술적인 이해도를 높이는 데 초점을 맞췄습니다.

🐱 간단한 서비스 아키텍처

이 그림은 서비스의 전체적인 구조를 간략하게 보여줍니다.

• 클라이언트와 백엔드는 Naver Cloud Platform에 배포되어 있으며, 각각 Docker 컨테이너화되어 독립적으로 관리됩니다.
• GitHub Actions와 Docker Hub를 통해 CI/CD 파이프라인이 구성되어 코드 변경 사항이 자동으로 Docker 이미지로 빌드 및 배포됩니다.
• 프론트엔드(React)는 Nginx를 통해 정적 파일로 서빙되며, 백엔드(Express)는 API 요청을 처리하고 MongoDB와 통신합니다.

🐶 세부적인 서비스 흐름

이 그림은 서비스의 동작 과정과 세부적인 기능 흐름을 구체적으로 설명합니다.

• 클라이언트
  • React로 구성된 클라이언트는 워크스페이스의 조회, 생성, 삭제, HTML/CSS 블록 생성 및 저장 기능을 제공합니다.
  • Storybook을 활용하여 컴포넌트 테스트 및 문서화를 진행합니다.
  • 사용자 요청은 Nginx를 통해 백엔드 API로 전달됩니다.
• 백엔드
  • Express.js와 Mongoose를 사용하여 MongoDB와의 데이터 처리를 담당합니다.
  • CRUD 작업(워크스페이스 생성, 조회, 수정, 삭제)을 처리하며, 필요한 데이터를 클라이언트에 반환합니다.
  • GitHub Actions를 통해 Docker 이미지를 자동으로 빌드하여 배포합니다.