Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

이미지 썸네일 생성에 관하여 (thumbor)

2,716 views

Published on

Published in: Technology
  • Be the first to comment

이미지 썸네일 생성에 관하여 (thumbor)

  1. 1. 이미지 썸네일 생성에 관해서 @river 변용훈 1 / 19
  2. 2. 이미지 더 중요해 지다. 이미지 품질 , 네트웍 트래픽 모바일 사용자 반응형 이미지 레티나 디스플레이 글로벌 서비스 고려 우리나라의 네트웍 상황은 특별한 경우다. CDN은 비싸다 2 / 19
  3. 3. thumbnail 3 / 19
  4. 4. # 99designs # 미리생성   PHP 웹 어플안에 이미지 처리 로직이 섞여 있다. 구조가 복잡하다. 미리 정해놓은 크기의 이미지만 가능. 출처: 99designs.com blog 4 / 19
  5. 5. # 99designs # 변경후 이미지 처리 분리 ‑> 전용 서버 ‑> 공통으로 사용 가능 다양한 이미지 크기에 대응 가능 HDD의 효율적 사용 원보만 잘 관리하면 된다. 출처: 99designs.com blog 5 / 19
  6. 6. http://thumbor.org/ https://github.com/thumbor/thumbor 6 / 19
  7. 7. # thumbor 이미지 처리 서버 이미지 캐싱 서버 Restful URL 제공 python tornado 웹서버 내장 http://<thumbor-server> /300x200 /smart /s.glbimg.com/bb/f/original/2011/03/24/picture.jpg 7 / 19
  8. 8. # 기능 # resize http://www.google.fr/images/srpr/logo11w.png (538x190) http://is1.ecplaza.app/unsafe/200x/www.google.fr/images/srpr/logo11w.png (200x71) http://is1.ecplaza.app/unsafe/200x200/www.google.fr/images/srpr/logo11w.png (200x200) 8 / 19
  9. 9. # 기능 # resize # filter .../unsafe/filters:brightness(10):contrast(30)/http://... .../unsafe/filters:grayscale()/http://... .../filters:watermark(test.jpg,‑10,‑10,30)/http://... 9 / 19
  10. 10. # 기능 # resize # filter # facial detect .../unsafe/debug/smart/https://... .../unsafe/500x100/smart/https://... 10 / 19
  11. 11. # 기능 # resize # filter # facial detect # feature detect .../unsafe/debug/smart/https://... .../unsafe/300x300/smart/https://... 11 / 19
  12. 12. # 기능 # resize # filter # facial detect # feature detect # 이미지 최적 화 브라우저  webp 지원 여부 감지. 지원하면  webp형식으로 이 미지 생성 jpegtran,  pngcrush 등을 이용한 이미지 최적화 12 / 19
  13. 13. 시스템 구성 13 / 19
  14. 14. # 저장소 storage와  result storage expire 설정 가능 14 / 19
  15. 15. # 시스템 구성 # supervisord 프로그램을 데몬 형태로 돌림 프로세스 모니터링 스케일링 thumbor를 가동하기 위해 사용 [program:thumbor] command=/usr/bin/thumbor --ip=127.0.0.1 --port=800%(process_num)s --conf=/etc/thumbor.conf process_name=thumbor800%(process_num)s numprocs=4 autostart=true autorestart=true startretries=3 stopsignal=TERM ; Output logs for each of our processes stdout_logfile=/var/log/thumbor800%(process_num)s.stdout.log stdout_logfile_maxbytes=1MB stdout_logfile_backups=10 stderr_logfile=/var/log/thumbor800%(process_num)s.stderr.log stderr_logfile_maxbytes=1MB stderr_logfile_backups=10 15 / 19
  16. 16. # 시스템 구성 # supervisord # nginx (varnish) upstream thumbor { server 127.0.0.1:8000; server 127.0.0.1:8001; server 127.0.0.1:8002; server 127.0.0.1:8003; } server { listen 80; server_name is1.ecplaza.com; location / { proxy_set_header X-Real-IP $remote_addr; proxy_set_header HOST $http_host; proxy_set_header X-NginX-Proxy true; proxy_pass http://thumbor; proxy_redirect off; } } 16 / 19
  17. 17. 보안 아무나  URL 조작을 통해서 서비스를 이용하면 안된다. SECURITY_KEY,  HMAC-SHA1 http://thumbor/unsafe/300x200/smart/path/to/image.jpg http://thumbor/1234567890123456789012345678/300x200/smart/path/to/image.jpg 17 / 19
  18. 18. 라이브러리URL 생성 지원 목적 PHP Phumbor Phumbor for Laravel Java Pollexor 18 / 19
  19. 19. 결론 도입하고 매우 만족 ㅎㅎ 19 / 19

×