<div id="readability-page-1" class="page"><article>

    <header>

        <section>
            <a href="https://mongmori.com/tag/programming/">프로그래밍</a>
        </section>

        

        <p>개발자도구를 확인해보니 Mixed Content 오류가 뜬다. 나처럼 자체적으로 인스톨한 Ghost 환경에 SSL을 설정한 후 동일한 문제를 겪는 유저를 위해 기록을 남긴다.</p>

        <section>
                <ul>
                    <li>
                        <a href="/author/mongmori/">
                            <img src="https://mongmori.com/content/images/size/w100/2021/05/mad-men.png" alt="Mongmori">
                        </a>
                    </li>
                </ul>
                <div>
                    
                    <p><time datetime="2021-05-16">2021년 5월 16일</time>
                        <span><span>•</span> 4 min read</span>
                    </p>
                </div>
            </section>

        <figure>
            <img sizes="(min-width: 1400px) 1400px, 92vw" src="https://images.unsplash.com/photo-1532003885409-ed84d334f6cc?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxMTc3M3wwfDF8c2VhcmNofDR8fDQwNHxlbnwwfHx8fDE2MjExNjAyNjk&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=2000" alt="Ghost에 SSL 설정 후 이미지 엑박 되는 문제 해결">
        </figure>
    </header>

    <section>
        <p><a href="../free-https-lets-encrypt-ssl-super-quick-setup/">앞선 글</a>에서 아주 쉽게 SSL을 설정했다고 좋아했었는데 즉시 문제가 생겨버렸다. 포스트 내의 이미지들이 모두 엑박으로 나오는 것. 개발자도구를 확인해보니 Mixed Content 오류가 뜬다. 나처럼 자체적으로 인스톨한 Ghost 환경에 SSL을 설정한 후 동일한 문제를 겪는 유저를 위해 기록을 남긴다.</p><h2 id="%ED%98%84%EC%83%81">현상</h2><ul><li>&lt;img&gt; 태그로 서버에 저장된 이미지를 불러오는 리퀘스트를 브라우저가 막는다. (blocked by client)</li><li>이에 따라 페이지 내에 이미지가 존재해야 하는 위치에 엑박이 뜬다.</li></ul><h2 id="%EC%9B%90%EC%9D%B8">원인</h2><ul><li>개발자도구로 확인했듯이 Mixed Content 오류.</li><li>SSL을 설정했으므로 이제 HTTPS로 통신하여 컨텐츠를 받아오고 있는데, 난데 없이 이미지를 HTTP로 요청을 하니까 이 리퀘스트를 막는 것.</li><li>같은 도메인 안에서 일어난 일이므로 CORS(Cross-Origin Resource Sharing) 문제는 아니다.</li></ul><p>Ghost로 글을 쓰면서 서버에 있는 이미지를 링크하면 무조건 HTTP로 강제되고 있었다. 커스텀 HTML을 만들고 거기에 HTTPS로 명시해서 링크 했는데도 HTTP로 강제 수정되는 대환장파티를 겪으면서 멘탈이 무너졌다. SSL을 버려야 하나 라는 생각이 스멀스멀 올라올때쯤 폭풍 검색으로 해결책을 찾았다.</p><figure><img src="https://mongmori.com/content/images/2021/05/gvsc.png" alt="" loading="lazy" width="480" height="722"><figcaption>싹다 날려버릴까 하다가, 출처: 개비스콘짤 생성기(https://gvsc.rajephon.dev/)</figcaption></figure><h2 id="%ED%95%B4%EA%B2%B0">해결</h2><p>Ghost를 <em><u>처음 설치</u>할 때 사이트 <u>도메인을 입력</u></em>하는 과정이 있다. 이 때 프로토콜도 함께 입력하게 되는데, 초기니까 HTTP로 입력을 했었지. 그 값을 바꿔줘야 한다. Ghost 어드민 페이지에서는 이 설정을 못바꾸고 서버에 관리자로 로그인한 다음 변경해줘야 함. <a href="https://forum.ghost.org/t/mixed-content-warning/1131">Ghost 포럼</a>(Thanks vikaspotluri123!)에서 찾은 내용을 한 단계씩 풀어서 설명해본다.</p><ul><li>일단 서버에 루트계정으로 들어간다.</li><li>그 다음 Ghost 관리자 계정으로 전환한다. Ghost 설치할때 CLI도 같이 설치 했을 것이다. 안했으면 낭패.</li></ul><p>커맨드 라인에서 아래 명령어를 치면 고스트 관리자가 된다.</p>
<pre><code>sudo -i -u ghost-mgr
</code></pre>
<ul><li>그 다음 Ghost가 인스톨된 디렉토리로 이동한다. 왜냐하면 Ghost 설정을 바꾸려면 그게 설치된 곳에서 해야 하니까.</li><li>어디인지 기억 안날 것이다. 그래서 이미지를 하나 첨부한다.</li></ul><figure><img src="https://mongmori.com/content/images/2021/05/ghost-install.jpg" alt="" loading="lazy" width="1282" height="609" sizes="(min-width: 1200px) 1200px"><figcaption>친절하게 이미지까지 첨부했다</figcaption></figure><ul><li>위 이미지는 Ghost 개발자 문서다. 인스톨 할때 '<code>/var/www/sitename</code> 과 같이 디렉토리를 만들어라'라고 안내를 하고 있는 부분. 저 가이드 보고 정상적으로 설치를 했다면, 이제 당신의 기억을 더듬어서 디렉토리를 찾아보자.</li><li>내 사이트의 경우 ghost 디렉토리에 설치되어 있다. 다시 말해 <code>/var/www/ghost</code>에 있다는 얘기. 그쪽 디렉토리로 잘 이동한다.</li><li>마지막으로 해당 디렉토리 내에서 설정값을 바꾸는 명령어를 치고 Ghost를 재부팅 해주면 된다.</li></ul><pre><code>ghost config url https://your_ghost_site.com &amp;&amp; ghost restart
</code></pre>
<ul><li>위 명령어에서 <code>your_ghost_site.com</code> 부분을 각자 사이트의 주소로 치환하면 된다. 막 생각 없이 복붙하면 안된다. 나는 <code>mongmori.com</code>으로 넣었다. 아래는 바뀌기 전과 바뀐 후의 상태.</li></ul><figure><img src="https://mongmori.com/content/images/2021/05/ghost-configuration-1.jpg" alt="" loading="lazy" width="1195" height="755"><figcaption>중간에 커맨드라인 명령어 삽질이 포인트</figcaption></figure><p>설정을 바꾸고 사이트를 둘러보니 모든 이미지가 HTTPS로 요청되면서 엑박이 사라졌다. 엄청난 시간 낭비와 함께한 즐거운 일요일도 이제는 안녕.</p>
    </section>

    


</article></div>

Mongmori

mongmori

앞선 글에서 아주 쉽게 SSL을 설정했다고 좋아했었는데 즉시 문제가 생겨버렸다. 포스트 내의 이미지들이 모두 엑박으로 나오는 것. 개발자도구를 확인해보니 Mixed Content 오류가 뜬다. 나처럼 자체적으로 인스톨한 Ghost 환경에 SSL을 설정한 후 동일한 문제를 겪는 유저를 위해 기록을 남긴다.
현상
<img> 태그로 서버에 저장된 이미지를 불러오는 리퀘스트를 브라우저가 막는다. (blocked by client)
이에 따라 페이지 내에 이미지가 존재해야 하는 위치에 엑박이 뜬다.
원인
개발자도구로 확인했듯이 Mixed Content 오류.
SSL을 설정했으므로 이제 HTTPS로 통신하여 컨텐츠를 받아오고 있는데, 난데 없이 이미지를 HTTP로 요청을 하니까 이 리퀘스트를 막는 것.
같은 도메인 안에서 일어난 일이므로 CORS(Cross-Origin Resource Sharing) 문제는 아니다.
Ghost로 글을 쓰면서 서버에 있는 이미지를 링크하면 무조건 HTTP로 강제되고 있었다. 커스텀 HTML을 만들고 거기에 HTTPS로 명시해서 링크 했는데도 HTTP로 강제 수정되는 대환장파티를 겪으면서 멘탈이 무너졌다. SSL을 버려야 하나 라는 생각이 스멀스멀 올라올때쯤 폭풍 검색으로 해결책을 찾았다.
해결
Ghost를 처음 설치할 때 사이트 도메인을 입력하는 과정이 있다. 이 때 프로토콜도 함께 입력하게 되는데, 초기니까 HTTP로 입력을 했었지. 그 값을 바꿔줘야 한다. Ghost 어드민 페이지에서는 이 설정을 못바꾸고 서버에 관리자로 로그인한 다음 변경해줘야 함. Ghost 포럼(Thanks vikaspotluri123!)에서 찾은 내용을 한 단계씩 풀어서 설명해본다.
일단 서버에 루트계정으로 들어간다.
그 다음 Ghost 관리자 계정으로 전환한다. Ghost 설치할때 CLI도 같이 설치 했을 것이다. 안했으면 낭패.
커맨드 라인에서 아래 명령어를 치면 고스트 관리자가 된다.
sudo -i -u ghost-mgr
그 다음 Ghost가 인스톨된 디렉토리로 이동한다. 왜냐하면 Ghost 설정을 바꾸려면 그게 설치된 곳에서 해야 하니까.
어디인지 기억 안날 것이다. 그래서 이미지를 하나 첨부한다.
위 이미지는 Ghost 개발자 문서다. 인스톨 할때 '/var/www/sitename 과 같이 디렉토리를 만들어라'라고 안내를 하고 있는 부분. 저 가이드 보고 정상적으로 설치를 했다면, 이제 당신의 기억을 더듬어서 디렉토리를 찾아보자.
내 사이트의 경우 ghost 디렉토리에 설치되어 있다. 다시 말해 /var/www/ghost에 있다는 얘기. 그쪽 디렉토리로 잘 이동한다.
마지막으로 해당 디렉토리 내에서 설정값을 바꾸는 명령어를 치고 Ghost를 재부팅 해주면 된다.
ghost config url https://your_ghost_site.com && ghost restart
위 명령어에서 your_ghost_site.com 부분을 각자 사이트의 주소로 치환하면 된다. 막 생각 없이 복붙하면 안된다. 나는 mongmori.com으로 넣었다. 아래는 바뀌기 전과 바뀐 후의 상태.
설정을 바꾸고 사이트를 둘러보니 모든 이미지가 HTTPS로 요청되면서 엑박이 사라졌다. 엄청난 시간 낭비와 함께한 즐거운 일요일도 이제는 안녕.

Ghost에 SSL 설정 후 이미지 엑박 되는 문제 해결

댓글