설치하고 모든 것을 끝낸뒤에 슬슬 글을 하나 올려본게 저번 글인데 이상하게 웹 브라우저에서 안전하지 않다는 메세지가 보였습니다. 분명히 Nginx에서도 리디렉션을 설정해놓은 기억이 있었고요. 이미지의 소스가 HTTPS가 아닌 HTTP 스키마를 사용한다는 문제였습니다. 실제로는 리디렉션이 되었지만 단편적으로는 HTTP 301이 반환된 셈이므로 HTTP 프로토콜이나 마찬가지라고 할 수 있죠.


원인 찾기

고치기 전에 Nginx 쪽 리디렉션 문제는 아니라는 것을 확신했습니다. 모든 페이지에 HTTPS 연결이 제공되었고 시크릿 탭에서도 올바르게 리디렉션되었으니깐요. 그렇다면 Ghost 앱에서 무언가 잘못 인식되고 있다는 뜻이 됩니다.

Ghost 앱은 Nginx와 HTTP 프로토콜로 통신하고 실제 사용자와 Nginx 사이에 HTTPS 프로토콜을 사용하게 되는데 DOM 컨텐츠의 내용은 변경되지 않기 때문입니다.

문제 해결

Ghost 구성의 url 파라메터 변경

Ghost 앱의 구성에는 url 파라메터가 있습니다. 아마 이것을 기준으로 DOM에 출력되는 내용이 달라지는 것이 아닐까 했습니다.

Nginx Proxy 설정 업데이트

하지만 실제로는 엄청난 리디렉션을 얻었습니다. 그 이유는 위에서 말했듯이 Ghost 앱과 Nginx 사이의 프로토콜이 HTTP이기 때문이겠죠. Nginx는 분명 Ghost 앱이 호스트되고 있는 localhost:2368에서 데이터를 넘겨줍니다. 그렇다면 사용자가 https://b2.seia.io로 접속하더라도 실제 요청은 내부적으로 http://localhost:2368로 이어지게 되는 것이죠.

Ghost 앱은 localhost:2368이라는 주소를 잘못된 주소로 인식하고 리디렉션 시킵니다. 리디렉션 헤더가 다시 한 번 Nginx를 거쳐 사용자에게 전달됨으로써 Ghost 앱에게 잘못된 정보를 줍니다.

이를 해결하기 위해서 2가지 옵션이 필요했습니다.

  1. Nginx에서 사용자가 HTTPS 상태임을 알려주는 헤더
  2. Nginx에서 요청 URL을 임의로 변경하지 않도록 설정
location / {
  ...
  
  proxy_set_header X-Forwarded-Proto https;
  proxy_redirection off;
}

이렇게 모든 이미지가 처음부터 HTTPS 상에서 로드되는 것을 확인할 수 있었습니다. 끝입니다.