Tweet
Tweet

Slide 1

Slide 1 text

pixiv/go-thumber に ImageMagickをつなげた話 2017/03/14(Tue) “よや” Go言語 GoImagick ImageMagick

Slide 2

Slide 2 text

はじめに —  pixiv/go-thumber をネタにした Go言語 と ImageMagick の話 ◦  Pixiv さんの業務と直接関係ない話でごめ んなさい

Slide 3

Slide 3 text

もくじ —  pixiv/go-thumber について —  go-thumber + ImageMagick —  GoImagick について —  ImageMagick 使用上の注意 —  画像プロキシ使用上の注意

Slide 4

Slide 4 text

pixiv/go-thumber とは —  https://github.com/pixiv/go-thumber by Google翻訳

Slide 5

Slide 5 text

go-thumber 資料 by pixiv —  サムネイルマスタとgo-thumber ◦  https://speakerdeck.com/harukasan/use- thumbnail-master-with-go-thumber

Slide 6

Slide 6 text

go-thumber の使い所 —  端末によって解像密度が違う (retina とか) ◦  Storage に全サイズの画像を置きたいか？ Storage に(大きめの) 画像がひとつあれば User の欲しいサイズ の画像を都度作る

Slide 7

Slide 7 text

go-thumber の構造 —  go の net/http + swscale(ffmpeg) + libjpeg go-thumber thumberd go package net/http ffmpeg libswscale thumbnail libjpeg jpeg swscale mkthum cgo cgo HTTPプロキシ 縮小/拡大 JPEG入出力

Slide 8

Slide 8 text

go-thumber で物足りないとこ —  案件によっては機能が足りない ◦  JPEGのみで、PNG, GIFが使えない ◦  画像合成とかできない (ロゴとか) ◦  文字入れできない (著作権表示とか) Gopher

Slide 9

Slide 9 text

go-thumber 改造案 —  辛い！ (YUV とか JPEG 決め打ちの作りなので尚更) go-thumber thumberd go package net/http ffmpeg libswscale thumbnail libjpeg jpeg swscale mkthum png gif libpng giflib libavfilter avfilter cgo cgo cgo cgo cgo 画像合成, 文字入れ 縮小/拡大

Slide 10

Slide 10 text

ImageMagick でOK (1/2) —  画像を処理したいメソッドが大体揃っ ている ◦  リサイズ ◦  フィルタ ◦  画像合成 ◦  文字入れ Gopher

Slide 11

Slide 11 text

ImageMagick で OK (2/2) —  メジャーな画像フォーマットからマイ ナーなものまで100種類以上に対応して る —  http://www.imagemagick.org/script/ formats.php png jpeg gif inline sixel webp svg pdf 超メジャー 最近の キワモノ系 (Webの base64画像と か) ベクター画像 dcm 医療系 (DICOM等) 古いの sun

Slide 12

Slide 12 text

Go で ImageMagick を使うには —  公式サイトを見る ◦  http://imagemagick.org/script/api.php#go —  MagickWand と MagickCore の Go バ インディング ◦  GoImagick はMagickCore の定義を取り入 れるけど、関数は MagickWand だけ使う

Slide 13

Slide 13 text

GoImagick とは —  https://github.com/gographics/imagick —  MagickWand API (C言語)の Go バイン ディング (thin ラッパー) ◦  Go 言語で ImageMagick の機能が大体使える

Slide 14

Slide 14 text

go-thumber + ImageMagick GoImagick でつなげる yoya-thumber thumberd go package net/http GoImagick imagick thumbnail ImageMagick MagickWand cgo

Slide 15

Slide 15 text

yoya-thumber —  https://github.com/smartnews/yoya- thumber —  Yoya-thumberのOSS公開に寄せて ◦  http://developer.smartnews.com/blog/ 2016/12/19/yoya-thumber/ —  yoya-thumber と go-thumber ◦  http://blog.awm.jp/2017/01/01/yoya-thumber/

Slide 16

Slide 16 text

動作サンプル go-thumber と同じよ うなパラメータ

Slide 17

Slide 17 text

ImageMagick の注意点 —  沢山の画像形式に対応しすぎ ◦  脆弱性が入り易い (マイナーな形式は危険 ◦  形式を絞る必要がある —  処理が重たい ◦  画像データ全部をメモリ展開する ◦  文字入れはじめの1回目がめっちゃ重たい

Slide 18

Slide 18 text

ImageMagick security policy —  Policy.xml で拒否する形式を指定 ◦  ブラックリスト形式でした (過去形) —  漏れがあるかも。。 —  バージョンアップで新しい形式が増え たら？

Slide 19

Slide 19 text

Yoya-thumber では —  バイナリみて知らない形式を排除 https://github.com/smartnews/yoya-thumber/blob/master/thumbnail/ thumbnail_magick.go#L182

Slide 20

Slide 20 text

ImageMagick security policy改良 ◦  ImageMagick 6.9.7-7 で仕様追加 –  ホワイトリスト形式

Slide 21

Slide 21 text

GIF アニメ辛い —  ImageMagick は全コマをメモリに展開 するので、すぐメモリ不足になる —  仕方ないので、ImageMagick に GIF バ イナリを渡す前に、バイナリを編集し て１コマのGIFアニメにする。

Slide 22

Slide 22 text

GIFアニメは１枚のみ(力づく) https://github.com/smartnews/yoya-thumber/blob/master/thumbnail/ thumbnail_magick.go#L232

Slide 23

Slide 23 text

画像 Proxy の注意点 —  サーバを素のまま晒すと危険 —  というか、F5 しなくても普通に死ぬ。 thumberd Client F5連打 CPU が死ぬ！

Slide 24

Slide 24 text

Reverse proxy —  キャッシュを仕込む (F5 耐性) サーバ nginx thumberd reverse proxy 8000 80 80,443 upstream Client

Slide 25

Slide 25 text

更に forward proxy —  サイズ違いでアクセスし直さない サーバ nginx thumberd reverse proxy nginx forward proxy 8000 80 80,443 3128 upstream Client

Slide 26

Slide 26 text

はじめの一歩が辛い問題 —  URL 公開した時の①発めは cache が 効かない問題 サーバ nginx thumberd Client 絶賛 処理中 やっぱり CPU が死ぬ！

Slide 27

Slide 27 text

Nginx proxy_cache_lock —  処理中の URL アクセスは待たせる！ サーバ nginx thumberd Client 絶賛 処理中

Slide 28

Slide 28 text

ImageProxy as A Service —  画像プロキシのクラウドサービス ◦  面倒ならそういうのを使った方が楽 —  https://www.sakura.ad.jp/services/ imageflux/

Slide 29

Slide 29 text

ImageFlux

Slide 30

Slide 30 text

まとめ —  go-thumber 改造楽しい —  GoImagick 結構いいよ —  Reverse proxy 大事 —  Nginx proxy_cache_lock すごい —  ImageFlux みたいなクラウドサービス もあるよ