https://xetown.com/point_contents/1146351

lazyload 애드온은 웹서버의 트래픽을 분산시키기 위한 것이 주 목적입니다.

따라서 외부에서 이미지를 불러오는 경우에는 lazyload 가 전혀 의미가 없습니다.

 

저도 이번에 이미지서버 작업을 했습니다.

제가 하는 방식은 웹지기님이나 다른 분들이 사용하는 이미지캐싱방식이 아니라 아예 분리된 이미지서버를 이용합니다.

rsync를 기반으로한 lsyncd로 두서버의 이미지폴더를 실시간으로 동기화 시키고 있습니다.

일부이미지만 가지고 있는 것이 아니라 files/attach 폴더의 모든 화일을 다 가지고 있습니다.

당초 목적은 원격백업이 주 목적이었습니다.

로그화일을 열어놓고 이미지를 업로드하면 실시간으로 이미지서버에 파일이 전송되는 것을 확인할 수 있습니다.

중간에 링크가 끊어지더라도 링크가 연결되면 다시 동기화가 이루어집니다.

따라서 썸네일을 제외한 첨부화일 전체를 이미지서버에서 가져옵니다.

 

물론 이미지서버가 살아있는지 체크해서 반응이 없으면 내부이미지를 뿌려주게 되어 있어서 연결이 안되거나 서버가 다운되었을 상황에 대한 걱정은 덜었습니다.

 

문제는 이 경우에는 lazyload가 전혀 의미가 없어서 내부이미지에만 lazyload가 동작하게 만들었습니다.

배포된 lazyload 애드온을 아예 이미지서버 애드온에 집어넣었습니다.

K-20190226-412994.png

 

karma

profile
imageprocess, 통합검색확장모듈
아빠팬더곰은 영원한 초보
  • profile
    제가 지금 이 글에서 무엇을 눈여겨 봐야 하는건가요 ?
    저는 이미지를 캐시하는 캐시서버를 운영하지만 lazyload 를 사용한다면 페이지가 열릴때 더미 이미지만 먼저 열릴것을 기대해서 페이지 로딩속도에 도움이 되는 자료라 기대를 했습니다.

    그런데 지금 배포해주신 애드온이 외부이미지는 동작이 안되는 것이라는건가요 ?
  • profile profile
    한마디로 외부이미지는 트래픽은 이미 분산되어있고 DOM에 포함되어있지 않아서 속도개선에 아무 영향을 미치지 못합니다.
  • profile profile

    아예 불러오지 않는 것과 페이지를 여는 속도는 같다는 것이네요.
    네트워크에서 보면 저희는 본문의 이미지가(캐시서버쪽의) 다른 본서버의 요소(이미지등) 보다 먼저 뜹니다.

    트래픽을 줄이려는 목적은 절대 아니구요.

     

    저희 캐시서버에서 

    access-control-allow-origin:
    https://domain.com

     

    이런것을 처리해주고 있어 본서버와 똑같은 로드를 하는건 아닐까요 ?

    어찌 되었던 저희도 사용해 보려고 했는데 저희가 사용하는 다른 것과 문제가 발생하는 듯 한 상황입니다.

    외부이미지도(처음 올려주신 파일만 사용해봤습니다만..) 동작은 하는 것은 확인했습니다.

     

    다만 사이즈가 정해진 이미지만 정상 작동하고 사이즈가 정해지지 않는 대부분의 이미지들이 더미 이미지 없이 사라졌다가 나타나는게 문가 됩니다.

     

    자료 댓글에도 남겨드렸지만 가시영역 밖의 이미지들도 원이미지 사이즈 만큼의 더미를 출력해주지 않는다면 문제가 되는것은 여전하구요.

     

    뭐 이런 복잡한 사정의 사이트까지 고려해서 배포하기는 어렵다는 것은 인식합니다.

    사용해보려다가 발생하는 상황에 관해 확인이 필요해 댓글로 문의를 드린 것이고 적합하지 않다면 사용을 하지 않아도 될 것 같습니다.

     

    제가 예상하는 것과 달리 저희 캐시서버에 불러오는 이미지가 속도에 1도 영향을 안준다면 말씀하신대로 사용하면 안되겠죠.

  • profile
    1.0으로 업데이트를 해도 위의 설정창은 안나오는데 맞는건가요?
  • profile profile
    예 아예 외부이미지는 설정과 상관없이 작동 안하게 했습니다.
  • ?
    이미지 서버가 살아있는지 어떻게 체크하시나요..??
    cron으로 주기적으로 php 실행해서 직접 뭔가 날려서 체크하는거 말곤 당장 생각나는게 없는데 말이죠..
  • ? profile
     function remoteFileExists($url)
            {
                    $curl = curl_init($url);
                    curl_setopt($curl, CURLOPT_NOBODY, true);
                    return curl_exec($curl);
            }

    처음에는 별도의 이미지파일을 넣고 테스트했었는데

    걍 index.php나 .htacees를 체크해도 잘 되더군요.

     

    이미지서버의 apache를 stop하고 하면 내부이미지를  잘 불러옵니다.

  • profile
    그리고 저희는 사정상 사용이 어렵긴 하지만 다른 분들을 위해 피드백을 드리는 차원으로.....

    <img alt="첫 미용했어요! : D1D9F904-F50B-4419-B000-D63ACA98B900.jpeg" class="am-image-edit-ready" src="//img.domain.com/files/attach/images/112/860/142/002/78b91cfaafe3e107be82254864102959.jpeg" title="첫 미용했어요!! : D1D9F904-F50B-4419-B000-D63ACA98B900.jpeg">

    이렇게 class가 들어간 이미지라서 그런지 이미지가 출력되지 않는 경우도 있네요.

    에디터자동완성모듈의 경우 이미지 편집기능이 있어 저런 class가 들어가게 됩니다.

    @구름이 님 께서 아마 이런 부분때문에 class 관련 요청을 드린게 아닌가 하는 추측이....
  • profile profile
    새로 올린 파일에서는 클라스는 건드리지 않게 했습니다. 물론 class="예전거" class="lazyload" 식으로 class 구문에 2개가 되는 것은 어쩔 수 없구요.
  • profile profile
    외부이미지는 안되게 고치셨다고 하니 테스트는 어렵겠네요.
    class="예전거 lazyload" 이렇게 해야 하지 않을까요 ?
  • profile profile
    삽질을 줄이는 차원에서 게으른 탓이지요..ㅎㅎ
  • profile

    이애드온은 무슨애드온이나요 ?

    4362b699a89eaaa3f703a1f8d1b42016.png

  • profile profile
    이것은 배포된 프로그램이 아닙니다.
  • profile profile
    네 ㅠㅠ(가지고싶은애드온이네요)