[Project] Sparkle-Note / 데일리로그

📅 데일리 프로젝트 로그

10월 25일 금요일

- 🎯 오늘의 목표

• Swagger UI 도커 배포를 통해 프론트엔드 팀에서도 쉽게 백엔드 API를 테스트하고 확인할 수 있도록 설정하기.

- 📝 진행 상황

• Docker Compose를 이용해 Swagger UI와 백엔드 API 서버를 같은 네트워크에서 실행.
• Swagger UI 초기 설정 파일 수정하여 백엔드 API 문서 URL로 연결.
• 백엔드의 CORS 설정 업데이트하여 Swagger UI가 API에 접근할 수 있도록 허용.
• Docker 네트워크와 각 컨테이너 상태 점검.
• curl 명령어로 백엔드 API 문서 접근 테스트 완료 (HTTP 200 응답 확인).
• Swagger UI에서 계속 CORS 오류 발생 중.

- 🚧 장애물 / 이슈

• Swagger UI에서 백엔드 API 문서 (http://localhost:8082/v3/api-docs)에 접근할 때 CORS 문제로 로딩 실패. 응답 헤더에 Access-Control-Allow-Origin이 누락되어 있어 Swagger UI에서 올바르게 문서를 가져오지 못하고 있음.

-🔑 해결방안

• 백엔드 서버의 로그를 재점검하여 CORS 설정이 정확히 적용되었는지 확인.

- 💡 내일 할 일

• Swagger UI가 도커에서 올바르게 동작하도록 추가 테스트 진행.

- 📊 시간 투자

• 총 작업 시간: 2시간

- 📌 메모 / 아이디어

• 백엔드 설정 변경 후 서버 재시작을 통해 수정사항이 제대로 반영되는지 지속적으로 확인할 필요

---

📝정리

 

RollingPaper API Swagger 도커 배포 및 CORS 문제 해결

1. 도커를 이용한 Swagger UI 배포
프론트엔드 팀이 백엔드 API를 쉽게 확인하고 테스트할 수 있도록 Swagger UI를 Docker로 배포하였다.
Docker Compose를 사용하여 Swagger UI와 백엔드 API 서버를 같은 네트워크에 두고 연결하였다.
이 과정에서 Swagger UI가 백엔드의 API 문서(/v3/api-docs)를 잘 로드할 수 있도록 swagger-initializer.js 파일을 수정

 

2. 발생한 문제점
Swagger UI에서 백엔드 API 문서를 불러올 때 CORS(Cross-Origin Resource Sharing) 문제가 발생했다.

이 문제는 Swagger UI가 localhost:8081에서 실행되는 반면, 백엔드가 localhost:8082에서 실행되면서 서로 다른 출처로 간주되어 발생한 거 같다.
특히 Access-Control-Allow-Origin 헤더가 응답에 포함되지 않아 Swagger UI가 백엔드와의 연결을 허용하지 않았다.

3. 해결을 위한 접근 방식

• CORS 설정 수정: 백엔드 서버의 CORS 설정을 수정하여 모든 출처(*)에서 접근을 허용하였습니다. 이를 위해 SecurityConfig와 CorsMvcConfig에 관련 설정을 추가 및 수정하였고, 쿠키와 인증 헤더를 노출할 수 있도록 설정했다.
• 도커 네트워크 점검: Swagger UI와 백엔드가 같은 네트워크에 정상적으로 연결되어 있는지 Docker 네트워크 설정을 점검했다.
• API 응답 확인: curl 명령어로 백엔드 API 문서에 접근해 응답이 정상적으로 오는지 확인했다. CORS 헤더와 HTTP 상태 코드를 점검했다

4. 현재 진행 상황과 남은 문제
현재 Swagger UI는 여전히 백엔드 API 문서에 접근할 때 CORS 오류를 발생시키고 있다. 응답 헤더에는 Vary: Origin이 있지만, 여전히 Access-Control-Allow-Origin이 제대로 적용되지 않고 있어 오류가 해결되지 않았다.
이 문제를 해결하기 위해 CORS 설정을 좀 더 넓게 적용하고, 백엔드와 Swagger UI의 도메인 설정을 재점검할 계획이다.
(CORS 설정을 임의로 건들면 보안 상의 문제는 없는지도 체크해 봐야겠다.)

5. 다음 단계

• CORS 헤더 확인: 백엔드 응답에서 허용된 헤더들이 올바르게 포함되어 있는지 다시 한번 확인.
• Swagger UI 설정 변경: Docker 네트워크에서 http://backend:8080으로 접근하는 방식으로 Swagger UI 설정을 다시 시도.

---

🙇‍♂️ 마무리

이게 맞나 싶다.. 여러 설정을 건드리지 않고도 뭔가 '딸깍' 하고 해결될 수 있을 것 같은데, 무언가 잘못되고 있다는 느낌이 든다.
최대한 시도해 보고 그래도 안 된다면 배포를 통해 프론트엔드 팀이 볼 수 있게 설정해 봐야겠다.

이런 문제를 마주할 때가 가장 고민되는 것 같다. 개념적으로 접근해야 하는지, 아니면 빠르게 해결하는 데 의의를 둬야 하는지 항상 고민이다.
문제 해결 과정에서의 좌절과 배움을 통해 조금씩 더 나아지고 있다고 믿고 포기하지 말자!!!!

지금 한국시리즈를 하고 있는데 내년엔 한화가 올라갔음 한다⚾️⚾️

한화 우승 vs 100만 원 받기를 한다면 진짜 당연 후자.

해방촌에서 코딩한테 해방을 실패하며..