Infra(CI/CD 파이프라인) 구축 - 프론트엔드

이전 Infra(AWS) 구축 - 벡엔드 글이랑 이어지는 내용임

어찌저찌 벡엔드 자동 CI/CD 파이프라인 구축하고 나니 프론트엔드도 구축을 해야했다
하지만 인프라 뿐만아니라 벡엔드와 프론트엔드 개발도 해야해서, 프론트 초기설정은 다른 팀원에게 맡겼다

하지만 하나의 인스턴스에서 하다보니 메모리 부담이 커지고, 보안상의 문제가 있을것 같다라고 생각되어 다시 내가 구성을 맡아 벡엔드와 분리를 하게 됨 이게 나중에 아주 골치 아픈 일이 발생하게 됨

프론트엔드는 순수 React다 보니 번들링하고 빌드한 결과물을 따로 도커 이미지로 만들지않고
빌드된 결과물을 별도로 생성한 EC2로 곧바로 던져서 띄움

벡엔드 보다 비교적 수월하게 진행됨

다만, 프론트 인프라 구성에서 조금 어려웠던 벡엔드의 퍼블릭 IP로의 다이렉트 접근 막아서 보안을 신경써야하는 부분이 조금 까다로웠음(API 마음대로 호출 방지 및 DB 접근 방지)

기존 구성: 사용자 → 백엔드 EC2 직접 접속(벡엔드 퍼블릭 IP)
바뀐 구성: 사용자 → 프론트 EC2의 Nginx → 백엔드 EC2 :8080(벡엔드 프라이빗 IP)

위의 구성처럼 바꾸기 위해
프론트 Ec2에 Nginx 설치하고 설정하고, 보안그룹에서 허용 IP및 포트 대역 설정(여기가 제일 까다로웠음)

Nginx 설정

server {
    listen 80;          # 80번 포트(HTTP)로 들어오는 요청 수신
    server_name _;      # 모든 도메인/IP 허용
    
    root /var/www/html/til-frontend;    # 빌드 결과물 위치
    index index.html;                   # 기본으로 서빙할 파일

    location / {
        try_files $uri /index.html; # 요청한 파일이 실제로 존재하면 그 파일 반환
    }

    location /api/ {
        # /api/ 로 시작하는 요청은 백엔드 서버로 전달 (리버스 프록시)
        # /api/ 부분을 떼고 백엔드의 /api/ 로 교체해서 전달
        # 프로젝트 설정 마다 다름 진행한 프로젝트에서는 이렇게 했음..
        proxy_pass http://${Backend_private_ip}:${Backend_port}/api/;
        
        proxy_http_version 1.1;
        
        proxy_set_header Host $host; # 원래 요청의 호스트 정보 전달                 
        proxy_set_header X-Real-IP $remote_addr;  # 실제 사용자 IP 전달
         # 프록시 거친 IP 목록 전달
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   
        # http/https 프로토콜 정보 전달
        proxy_set_header X-Forwarded-Proto $scheme;        
    }
}

진짜 문제는 네트워크 영역 설정이였다...
다음 네트워크설정(VPC)에서 계속..

구성도

(MadeBy: Gemini 참 잘 만들어줌)