TIL – HTTPS 인증서 적용 및 프론트·백엔드 연결 문제 해결

📌 문제 상황

• 프론트(Next.js, Vercel 배포)와 백엔드(Spring, EC2) 연결 시 net::ERR_CONNECTION_REFUSED 오류 발생
• 원인: 프론트는 HTTPS 요청을 보내지만, 백엔드는 SSL 인증서 없이 HTTP만 가능
• HTTPS 요청을 위해서는 프론트와 백엔드 모두 SSL 인증서 필요

🔍 시도 과정

• 도메인 DNS를 수정하여 백엔드 도메인 연결 시도
• certbot으로 백엔드 SSL 키 발급
• 리눅스 환경에서 키 변환 및 Spring Boot application.yml에 적용

server.ssl.key-store=/etc/letsencrypt/live/doran.my/doran.my.p12
server.ssl.key-store-password=${SSL_KEY_PASSWORD}
server.ssl.key-store-type=PKCS12
server.ssl.key-alias=tomcat
server.port=8443

server.ssl.key-store=/etc/letsencrypt/live/doran.my/doran.my.p12
server.ssl.key-store-password=${SSL_KEY_PASSWORD}
server.ssl.key-store-type=PKCS12
server.ssl.key-alias=tomcat
server.port=8443

• 이후 프론트는 https://www.doran.my/
• 백엔드는 https://doran.my:8443로 접속 테스트
• 작동 확인 완료

✅ 해결 방법

• HTTPS 연결 시, 백엔드와 프론트 모두 SSL 필요
• 배포 시 시간 문제로 서브 도메인(api.doran.my) 설정과 키 재발급은 생략
• DNS와 포트(EC2 보안 그룹) 설정을 확인하여 연결

💡 배운 점

• HTTPS 요청 시 백엔드가 SSL 없이 열려있으면 브라우저에서 연결 거부 발생
• SSL 인증서를 발급받고 Spring Boot에 적용하면 HTTPS 연결 가능
• 장기적으로는 **프론트·백엔드 도메인 분리(서브도메인 API)**가 안정적
• 배포 후 반드시 포트 개방과 테스트를 통해 정상 작동 확인 필수
• 추후 더 개선하려면 api.doran.my 로 서브 도메인 설정하는것이 유지보수 측면에 도움됨

🔗 참고

• 프론트: https://www.doran.my/
• 백엔드: https://doran.my:8443