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

이미지 썸네일 생성에 관해서@river 변용훈

1 / 19

ñ미지 ½ �요ÿ 지다.이미지 품질 , 네트웍 트래픽

모�ù 사용자

�Ρ ñ미지

v티þ �스�vñ

dÊþ �¸스 고�

우리þéÕ �트웍 상õ½ 특별ç 경우다.

CDN½ ¸싸다

2 / 19

thumbnail

3 / 19

# 99designs

# 미리생¨

PHP  웹 어�Ã에 ñ미지 처리 Ê직ñ �여 있다.

Ïî가 복잡ã다.

미리 �ÿú½ ò�Õ ñ미지만 가능.

출처: 99designs.com blog

4 / 19

# 99designs

# 변경후

ñ미지 처리 ÷리 ‑> �용 �ö ‑> 공통¹Ê 사용 가능

다양ç ñ미지 ò�에 iΠ가능

HDDÕ 효¥� 사용

원보만 잘 c리ãä �다.

출처: 99designs.com blog

5 / 19

http://thumbor.org/

https://github.com/thumbor/thumbor

6 / 19

# thumbor ñ미지 처리 �ö

ñ미지 캐싱 �ö

Restful URL �공

python

tornado  웹�ö 내장

http://<thumbor-server>

/300x200

/smart

/s.glbimg.com/bb/f/original/2011/03/24/picture.jpg

7 / 19

# �능

# 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

# �능

# resize

# filter

.../unsafe/filters:brightness(10):contrast(30)/http://...

.../unsafe/filters:grayscale()/http://....../filters:watermark(test.jpg,‑10,‑10,30)/http://...

9 / 19

# �능

# resize

# filter

# facialdetect

.../unsafe/debug/smart/https://...

.../unsafe/500x100/smart/https://...

10 / 19

# �능

# resize

# filter

# facialdetect

# featuredetect

.../unsafe/debug/smart/https://...

.../unsafe/300x300/smart/https://...

11 / 19

# �능

# resize

# filter

# facialdetect

# featuredetect

# ñ미지 ß�à

�é우~ webp  지원 여ó 감지. 지원ãä webp¡식¹Ê ñ미지 생¨

jpegtran , pngcrush  등Á ñ용ç ñ미지 ß�à

12 / 19

시스템 구성

13 / 19

# ~장소 storage¼ result storage

expire  �� 가능

14 / 19

# 시스ã Ï¨

#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

# 시스ã Ï¨

#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

보안아무나  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

éñ�러리URL 생¨ 지원 목�

PHP

Phumbor

Phumbor for Laravel

Java

Pollexor

18 / 19

결론도입ã고 매우 만ï ㅎㅎ

19 / 19