🎯 NewSpace Frontend 클라우드 배포 프로젝트

🚀 배포 주소

👉 NewSpace 프론트엔드 배포 링크

위 링크를 통해 실제 서비스된 프론트엔드 앱을 확인할 수 있습니다.

📌 프로젝트 개요

25.03.27 ~ 25.04.02
LG CNS AM Inspire Camp 1기
미니프로젝트 2 - 9조
현민영(팀장) / 구동혁 / 김지수 / 박상욱 / 유영서

newspace-msa 프로젝트의 프론트엔드 애플리케이션은 React + Vite 기반으로 개발되었으며,
AWS 인프라를 활용하여 자동화된 CI/CD 배포 파이프라인을 구성하였습니다.

Jenkins, GitHub Webhook, AWS S3, AWS CloudFront를 사용하여 코드 변경 → 자동 배포가 가능한 클라우드 환경을 구축했습니다.

👩‍💻 팀원

김지수

유영서

🛠️ 기술 스택

🧩 CI/CD 자동화 프로세스

       GitHub (main 브랜치 push)
                  │
                  ▼
          [ GitHub Webhook ]
                  │
                  ▼
             [ Jenkins ]
           (1) Vite 빌드 수행
        (2) S3에 정적 파일 업로드
 CloudFront에 index.html 캐시 무효화 요청
                  │
                  ▼
       [ AWS S3 + CloudFront ]

📡 프론트엔드 ↔ 백엔드 마이크로서비스 연동 구조

• 프론트엔드는 별도의 환경 변수 없이, CloudFront 도메인 하나로 모든 API 요청을 처리합니다.

• React 앱에서 /api/... 경로로 요청을 보내면, CloudFront가 해당 요청을 EC2에 위치한 API Gateway로 프록시합니다.

• API Gateway는 요청을 적절한 마이크로서비스로 라우팅하고, 각 서비스는 공용 AWS RDS에 접근하여 데이터를 처리합니다.

• 프론트와 백엔드가 같은 도메인에서 통신하기 때문에, 쿠키 전송, SameSite 정책, CORS 문제가 자연스럽게 해결됩니다.

• 프론트에서는 axios를 통해 상대경로(/api/xxx)로만 요청하면 되므로, 환경 변수 없이도 운영이 가능합니다.

• 전체 흐름은 다음과 같습니다:

            [ 사용자 브라우저 ]
                    │
                    ▼
   [ React 앱에서 axios로 /api/xxx 요청 ]
                    │
                    ▼
    [ CloudFront (리버스 프록시 역할) ]
                    │
                    ▼
 [ API Gateway (Spring Boot - EC2:8072) ]
                    │
                    ▼
    [ 각 마이크로서비스 (Spring Boot) ]
                    │
                    ▼
             [ 공용 AWS RDS ]

🏗️ 시스템 아키텍처

📦 Github Repository

전체 : https://github.com/orgs/newspace-msa/repositories
Deploy : https://github.com/newspace-msa/newspace-deploy
Frontend : https://github.com/newspace-msa/newspace-frontend
Config : https://github.com/newspace-msa/newspace-config
Config-Server : https://github.com/newspace-msa/newspace-config-service
Gateway : https://github.com/newspace-msa/newspace-gateway
Eureka : https://github.com/newspace-msa/newspace-eureka
User-Service : https://github.com/newspace-msa/newspace-user-service
Notice-Service : https://github.com/newspace-msa/newspace-notice-service
News-Service : https://github.com/newspace-msa/newspace-news-service

📚 Notion

https://www.notion.so/LG-CNS-2-9-1c35254cd71680b490c6f7d3a8a0b2e6