HTTPS 인증서 문제 디버깅하기

Next.js 작업하다 보면 로컬에서 잘 되던 HTTPS 설정이 배포 후에 이상하게 보일 수 있다. 특히 og:image나 canonical 같은 메타 태그가 제대로 설정됐는지 확인하기가 애매하다.

문제를 좁히려면 먼저 화면만 보지 말고 실제 요청의 응답 헤더와 HTML을 확인해야 한다. 한 가지 값만 고집하지 않고 전체 흐름을 먼저 끊어서 봐야 빠르게 원인을 찾을 수 있다.

배포 환경에서 먼저 볼 것

배포 직후에는 metadata부터 확인하는 게 좋다. 그래야 환경 설정 문제인지 코드 문제인지 빠르게 판단할 수 있다.

• 먼저 확인: 응답 헤더와 meta 태그
• 비교할 값: 로컬 환경과 배포 환경의 차이
• 남길 기록: 명령어 출력, 응답 상태코드, 수정한 설정

HTML head 직접 확인

실제 페이지의 HTML을 받아서 보면 어디서 끊겼는지 한 눈에 보인다.

curl -s https://example.com | grep -Ei 'title|description|canonical|og:|twitter:'
npm run build

로컬에서는 Next.js 개발 서버로, 배포 환경에서는 실제 URL로 테스트해야 로컬과 운영의 차이를 확인할 수 있다.

빌드 로그 확인

배포할 때 빌드 로그가 명확한지 먼저 보자. 빌드 중에 경고나 오류가 있으면 후에 수정해도 결과가 바뀌지 않을 수 있다.

확인 순서:

1. 같은 조건에서 증상이 다시 나오는지 테스트한다
2. 로그나 응답에서 달라진 부분을 한 줄로 설명해본다
3. 공개 화면, 빌드 결과, 실제 요청 셋 중 하나로 최종 확인한다

결론

인증서나 메타 태그 문제를 다룰 때는 해결 자체보다 어떤 값이 달라졌는지 설명할 수 있는 상태가 더 중요하다. 관련 기록을 남겨두면 다음 문제를 훨씬 빠르게 처리할 수 있다.