Ghost

[Ghost] 6. 왜 제 블로그에 이미지가 안나오죠?

나용진

2024년 3월 13일 • 5 min read

안녕하세요, 서비스기획자 이용이 입니다.

만약 저를(아니면 누군가를) 따라 AWS에서 Lightsail을 통해 Ghost 블로그를 만드셨나요? 그런데 글은 잘 보이는데 이미지가 나오지 않나요? 그렇다면 크롬이든 다른 브라우저에서든 F12 를 눌러 봅시다. 아래 화면처럼 뜰 겁니다.

개발자도구에서 위쪽을 보시면 여러 메뉴들이 보일겁니다. 그 메뉴에서 Console(아니면 한글로 콘솔이라고 적혀있을겁니다.)을 선택한 뒤 나오는 메시지를 확인해 보세요. 그 중에서 빨간 글씨로 Mixed Content: 어쩌구저쩌구가 있나요? 글자가 빨간 것을 보니 그게 문제라는 이야기인데, 왜 이런 문제가 생긴 걸까요?

Mixed Content가 뭐길래?

Mixed Content, 혼합 콘텐츠란 간단히 말씀드리면 http 연결로 제공되는 콘텐츠와 https 연결로 제공되는 콘텐츠가 섞이는 상태입니다. 크롬을 비롯한 대부분의 브라우저는 이러한 연결을 안전하지 않다고 판단합니다. 당연한 이야기지만, 보안이 있다고 하여 열었는데 내부에 보안이 되지 않은 콘텐츠가 섞여있으면 위험하니깐요. 그래서 표시가 되지 않는거죠.

그치만... 우리의 content는 죄가 없는걸?

하지만 우리가 올리는 이미지나 미리보기는 죄가 없잖아요? 그렇기때문에 풀어줘야 합니다. 풀어주기 위해서는 인스턴트에 직접 접속해서 수정해야 합니다. 이전에 Lightsail로 들어가서 Ghost를 직접 설정해 준 적이 있죠? 이번에도 마찬가지로 Lightsail로 들어가 Ghost가 실행되고 있는 인스턴스의 SSH client를 실행해봅니다. 그리고 다음 순서대로 차근차근 해봅시다.

Ghost 동작 멈추기

우리가 기계를 고치려면 일단 멈추거나 꺼야죠. Ghost도 마찬가지로 종료해줍시다. 다음 명령어를 입력해서 말이죠.

sudo /opt/bitnami/ctlscript.sh stop

Ghost config 파일 수정하기

Ghost를 멈추고나서 수리를 합시다. 우선 내부에 있는 URL 정보부터 수정해야합니다. 보통 이런 정보는 config라는 파일에 저장해놓습니다. config는 구성을 뜻하는 영어단어 Configuration의 약자로 말 그대로 시스템에 대한 구성을 파일 형식으로 저장해놓은 것을 말합니다. 다음 명령어를 한 줄 한 줄 따라쳐주세요.

cd /opt/bitnami/ghost ##config 파일이 있는 위치로 이동합니다.
sudo chmod 777 config.production.json ##config 파일을 수정합니다.  
ghost config url "https://yourdomain.im" ##https 접속을 기본으로 하도록 수정합니다.

httpd-app.conf 파일 수정하기

이 부분이 조금 어렵습니다. 왜냐면 여러분이 평생 쓸 일이 없는 vim이라는 걸 써야하거든요. vim은 리눅스에 기본적으로 내장된 텍스트 에디터입니다. 윈도우의 메모장이라고 생각하셔도 좋아요. 문제는 얘는 메모장처럼 동작하지 않는다는 점이죠. 그래서 하나하나 잘 따라하셔야합니다.

우리는 bncert-tool을 이용해서 SSL 인증서를 획득했기 때문에 해당 내용이 저장된 httpd-app.conf 파일을 열어주면 됩니다.

  cd /opt/bitnami/apps/letsencrypt/conf #httpd-app.conf 파일이 있는 곳으로 이동합니다.
  sudo vim httpd-app.conf #vim 에디터로 httpd-app.conf 파일을 실행합니다.

이상한 글자가 마구 뜨나요? Vim 사용법을 전부 알려드리기는 어렵고 간단하게 하면 이렇습니다. 현재 타자를 쳤을 때 글자가 쳐지지 않으면 일반모드에 계신겁니다. 여기서 a를 누르면 입력모드가 됩니다. 아래에 – INSERT – 라고 뜨시죠? 여기서 화살표를 눌러 맨 위로 가줍니다. 그리고 이렇게 입력해주세요.

RequestHeader set X-Forwarded-Proto "https" #대소문자 구분해 주세요
<Directory "opt/bitnami/app/letsencrypt/.well-known"> #여기 위에 작성해주면 맞아요
  ...
</Directory>

그 다음 이대로 쳐서 빠져 나오면 끝입니다.

:wq

끝입니다. 이제 다 했어요!

Ghost 재시작

자, 이제 마지막으로 변경된 설정을 적용하기 위해 Ghost를 재시작해줍니다.

  sudo /opt/bitnami/ctlscript.sh start

재시작한 뒤 Ghost 블로그를 다시 한번 켜보세요. 이미지가 정상적으로 뜨시나요? 그러면 이제 블로그를 더 재미있게 즐기시는 일만 남았군요. 다음에도 Ghost 블로그 관련된 글로 돌아오겠습니다. 빠염!

참고