안녕하세요. 3팀 백엔드 개발자 이경복입니다.

배포 문제로 급하게 도움을 요청드리고자 문의 남깁니다.

현재 상황

• 프론트와 백엔드는 다른 깃허브 레파지토리를 사용 중
  • 프론트 : 스위프에서 제공해주는 웹 호스팅을 이용하여 배포할 계획 (도메인 주소 및 배포)
• 백엔드는 AWS EC2 배포 완료
  • nestjs, nginx 등 컨테이너 구성 후 docker-compose로 EC2 인스턴스 내에서 실행하여 배포 완료
  • 하나의 VPC 내에서 EC2(백엔드 애플리케이션-퍼블릭)와 AWS RDS, DynamoDB, ElastiCache(프라이빗)와 연결
  • EC2 인바운드 규칙에는 80, 443 포트 등을 허용하게 설정
  • 브라우저 상에서 http://public-ip/api/docs 스웨거 문서를 제공하여 프론트와 협업 중
  • 스웨거 문서로 백엔드 API 실행하면 문제 없이 실행

문제

• 프론트 로컬 환경에서 백엔드 서버로 요청을 보내면 네트워크 에러 및 CORS 에러가 발생합니다.
  • 프론트에서 axios.get(http://3.34.189.220:80/api) 요청을 보내면 Hello World! 응답을 받아야하는데, 네트워크 에러가 발생하는 것으로 보아선 프론트 <> 백엔드 간 통신이 안되는 것 같습니다.

문의 사항

1. 단순히 백엔드에서의 nginx 프록시 서버 설정 문제인지 해결이 쉽게 되지 않고 있습니다. 도와주실 수 있을까요?

   • Nestjs 로그 : 문제 없이 실행 중

   • nginx 로그

     49.161.161.225 - - [27/Sep/2024:07:37:00 +0000] "OPTIONS /api HTTP/1.1" 204 0 "http://localhost:5174/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36"

2. 다른 팀들 혹은 보통의 경우 어떻게 프론트와 백엔드를 각각 배포해서 통신하게 하나요?

백엔드 깃허브 링크 : https://github.com/swyg3/BE

스웨거 문서 : http://3.34.189.220/api/docs

• 프로덕션 환경의 CORS 설정을 Nestjs → Nginx에 모두 처리하는 방식으로 변경

  // CORS 설정
  if (process.env.NODE_ENV !== "production") {
    // 개발 환경에서는 Nestjs에서 CORS를 처리
    const corsOptions = {
      origin: ["<http://localhost:3000>", "<http://localhost:5174>"],
      methods: ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"],
      allowedHeaders: ["Content-Type", "Authorization"],
      credentials: true,
    };
    app.enableCors(corsOptions);
    console.log("개발 환경: NestJS에서 CORS를 처리합니다.");
    console.log("CORS 설정:", JSON.stringify(corsOptions, null, 2));
  } else {
    // 프로덕션 환경에서는 Nginx에서 CORS를 처리
    console.log("프로덕션 환경: CORS는 Nginx에서 처리됩니다.");
  }