HTTPS 통신을 위한 SSL/TLS 인증서를 ACM에서 무료로 발급받아 사용 가능하다.
이전 프로젝트에서도 해당 인증서를 사용해 HTTPS 통신을 설정했지만, 최종 프로젝트에서는 조금 달라서 시간이 좀 걸렸다.
모듈 프로젝트 : SSR 방식
최종 프로젝트 : CSR 방식
ACL에 SSL/TSL 인증서를 사용했지만 크게 두가지 문제가 발생했다.
Next.js CORS 오류
첫번째 문제는 4번 과정에서 발생했다.
Next.js에서 API 호출을 위해 사용하는 URL이 EC2 인스턴스 IP 주소였을 때는 문제가 없었지만,
export const API_BASE_URL = 'http://인스턴스IP주소:9999';도메인 주소를 사용 후 5번에서 문제가 생겨 백(DBMS)에서 상품 목록을 불러오지 못했다.
백 EC2 인스턴스를 호출할 때 http://인스턴스IP주소:포트번호 를 사용한다면 CORS 에러가 원인이었다.
EC2 인스턴스 OS를 Windows Server 2019로 올려 Next.js의 export const API_BASE_URL를 공백으로 설정후, Next.js npx next build후 해결했다.
ACM 인증서 문제(도메인 불일치)
두번째 문제는 인증된 인증서를 사용했음에도 불구하고 유요하지 않는 인증서 사용 오류였다.
1. ACM 인증서 이상 없음
2. 대상 그룹 Healthy
3. 와일드카드 A 유형 레코드 설정(범인)
그럼에도 불구하고 아래 사진과 같이 HTTPS 연결 설정이 되지 않았다.
Route53에서 A유형의 레코드 이름을 *이 아닌, WWW로 변경 후 해결했다.
도메인 이름 일치성 문제였다.
ACM에서 발급받은 와일크카드 인증서는 와일드 카드만 일치하면 된다. '*.한글도메인.com' 인증서는 'www.한글도메인.com' 및 다른 서브도메인에 대해서도 유효한다.
그런데, 와일드카드 인증서는 서브도메인에 대해 유효하지만, 단일 도메인 자체에 대해서는 유효하지 않았다. 즉, '*.한글도메인.com' 인증서는 'www.한글도메인.com'과 같은 서브도메인에 대해 유효하지만, '한글도메인.com' 도메인 자체에 대해서는 유효하지 않았다.
따라서 '한글도메인.com' 도메인에 대해서는 유효한 인증서가 필요하며, 이를 위해 'www.한글도메인.com'과 같이 구체적인 서브도메인에 대한 레코드를 사용하는 것이 해결책이었다.
해당 도메인에 대해 정확한 인증서가 적용되고 SSL/TLS 연결에서 유효성 검사가 통과되어 문제가 해결되었다.
아래 주소에서 SSL 인증서 테스트 후 A를 받았다.
https://www.ssllabs.com/ssltest/analyze.html?d=www.한글도메인.com
CSR & SSR 인용 블로그 : https://hahahoho5915.tistory.com/52
CSR 이미지 자료 : https://www.solutelabs.com/blog/client-side-vs-server-side-rendering-what-to-choose-when
Next JS의 CORPS 오류 인용 블로그 : https://velog.io/@aimzero9303/Next.js-CORS-%EC%97%90%EB%9F%AC
Special thanks to LTG :)
ACM 인증서 가져와 사용하기 : https://btcd.tistory.com/1701
