※ こちらはミツモアAdvent Calendar 2021の1日目の記事です。
こんにちは、ミツモアCTOの柄澤（@fmy）です。今回は、去年の8月に画像変換サービスである imgix を導入した話を紹介いたします。
ミツモアは「確定申告めんどくさい・・・」「子供の卒業式の記念に写真を撮りたいな」といった生活のあらゆるシーンであなたにぴったりの専門家を無料で探せるサービスですので、ぜひ気軽に使ってみてください。
imgix導入前の問題点
ミツモアは初期の頃から自前の画像変換サーバを用意しておりました。AWSに配置したEC2にてnginxが動いており、ngx_http_image_filter_module を用いて、アクセス時にキャッシュがない場合、オンデマンドでS3の画像の変換、圧縮、回転などを実施しておりました。ただこの自前サーバのままではビジネス要求を満たせないことが明らかになりつつありました。
WepPへの変換ができない
弊社の画像は基本的に全てS3に保管されており、そのほとんどがjpgとなっています。当時ちょうどSafariがWebPに対応するということになり、WebPでサーブする要求が高まってきておりました。しかし、ngx_http_image_filter_module は基本的に画像を変形するツールであり、jpgからWebPへの変換などは対応しておりません。WebPを配信するためにはこの変換サーバとは別に、事前の変換を行う必要がありました。
パフォーマンスとスケールの問題
トラフィックの増加により、リクエストが詰まってしまう問題が発生し始めました。たくさんの画像を持つページにアクセスされた場合に、どの画像もキャッシュがない場合、画像変換サーバに同時にリクエストが来てしまい、リクエストが滞留してしまう状況になっていました。この問題に対してEC2をスケールアウトさせてどんどん台数を増やすことにより暫定的な対応をしておりました。
しかし、このような瞬間的なCPUリソースが必要なのに対し、リクエストを常時起動のEC2で受け持つというのがコストパフォーマンスに合わないと感じるようになりました。
また、上記のように時折問題が発生する自前画像変換サーバをメンテナンスするコストは無視できずエンジニアの時間を圧迫しつつありました。
移行先の調査
上記のように自前の画像変換サーバになんらかの抜本的改善が必要になったわけですがその改善方法には様々なものが考えられます。ngx_http_image_filter_module ではなくsmall_light や ImageMagick を使った自前変換を行う手法、Lambda などを用いて画像変換を事前に行う手法などもありました。
しかし開発コストとメンテナンスコストを考えると外部のサービスを利用するのがミツモアの現状においては一番良い判断だと考えました。そこで外部サービスの選定を行うことにしました。調査にあたり求める機能は以下の通りに設定しました。
- 画像の圧縮効率
- 現状の環境からの移行コストが少ない
- WebPなどの次世代フォーマットの自動検出
- メリットに見合う価格
上記の観点でimgixのほか、Cloudinary, Image Resizer, Fastly Image Optimizerなどを比較検討しました。
1の圧縮効率で言うとどれも大差ない状況となりました。
2の移行コストに関して言うとCloudinaryは画像をCloudinaryにアップロードする必要があり、S3からのsync機能があるにせよ二重にストレージ課金が発生してしまう事が懸念となりました。imgixはS3に置いてあるをbackendとしてそのまま使えるのが大きな魅力と感じました。
3の次世代フォーマットの自動検出でいうとimgixとCloudinaryはともに対応していましたがImage Resizerは対応していませんでした。
価格面も考慮し総合的判断した結果、imgixが一番良いと言う結論になり導入を進めることになりました。
導入自体はとても簡単で、画像URLを組み立てる関数の修正を行うPull Request1つでほぼ完了となり、後方互換性を持たせつつ安全にリリースする事ができました。
imgix移行後
自前の画像変換サーバのような詰まりもなくメンテナンスも不要で、安定した画像配信が可能になりました。実際にWebPでの配信が開始されたことでSEOにとっても良い効果が見られました。
また imgixの細やかな画像カスタマイズ機能（ Rendering API | imgix Documentation ） を用いて、様々なパターンの画像加工ができるようになり、開発の柔軟性も上がりました。
顔検出機能
ミツモアのカメラマンカテゴリーでは人物ポートレート画像を表示させる事があるのですがサムネイルのサイズによっては顔がはみ出してしまう問題がありました。どのサイズにおいても顔が画角に収まるようにするのには事前の画像クロップで対応することは難しく解決方法を検討しておりました。
imgixを検討している際にこの顔検出機能があることを知りました。実際にimgixの顔検出を利用した表示が以下です。
PDFのサムネ画像生成
imgixはPDFのjpg化も行う事ができ、今までPDFのサムネを表示できていなかった部分をサムネ表示させる事ができるようになりました。
Fastlyのダウンに伴う障害
基本的には安定稼働しておりますが、2021年6月に発生したfastlyの障害に伴い、imgixも同時にダウンしてしまいました。
この際には自前の画像変換サーバを再度起動しトラフィックを受けるように切り替えました。ともにS3をbackendとした画像変換で後方互換性を持たせた移行になっていたので素早く切り戻しをする事ができました。
まとめ
imgixの導入から1年以上経ってからの記事になってしまいましたが、導入によってエンジニアが安定性が増し、プロダクトにフォーカスできるようになりました。
ミツモアの開発部では、エンジニアがプロダクトの磨き上げに集中できるような環境を整えられるよう、日々新たなツールや技術の検討を行なっております。
現在、事業拡大を進めておりエンジニア・デザイナー・PdMを積極採用中です。ぜひWantedlyのリンクからカジュアル面談をしましょう。Meetyでもお待ちしております。
