EatSmartシステム部ブログ

ウェブサイトの開発や運営に関する情報です。

ImageFluxの導入について

イートスマートでは複数のサービスを運営していますが、各サービスで画像を扱う際に、オリジナル画像から独自でサムネイル画像を作成しています。 その場合、サイトリニューアル時に、速度低下やディスク使用量、ディスクI/O負荷等の懸念がありました。 それらを解消する為に、CDNでキャッシュし、画像の加工を柔軟に扱う目的で、今回ImageFluxを導入することにしました。

CDNとは

コンテンツ・デリバリー・ネットワーク(Contents Delivery Network)の略で、ウェブコンテンツを配信するのに最適化されたネットワークのことを意味します。 Webサイトにある画像や動画・CSSなどの静的コンテンツを、Webサイトが管理されている「サーバー」とは、別の(CDN)サーバーにキャッシュし、そのサーバーで代わりに配信することで負荷分散され、Webサイトの表示速度向上が見込めます。

ImageFluxとは

ImageFluxとは、オリジナル画像をベースに画像の拡大・縮小/切り抜き/フォーマット変換等を、URLパラメータ指定することで生成してキャッシュし、代わりに配信してれるクラウドサービスです。

www.sakura.ad.jp

導入の目的

  • サイトリニューアルを行う際、画像サイズの変更等を容易行える

  • サイト速度向上が見込める

  • サムネイル画像を独自で持たないことで、ディスク使用量の削減が見込める

  • (サムネイル画像を作成しない事で)サーバーのディスクI/O負荷を軽減できる 等

導入して分かったこと(2018/9/20時点)

  • 画像は、JPEGPNG、GIFに対応

  • 拡張子と画像形式が一致していない場合の扱い
    画像判別には拡張子を利用しておらず、対応画像(JPEGPNG、GIF)であれば問題ないそうです。
    ※拡張子が無くても問題なし

  • 対応外(BMP等)の画像について
    対応外の画像が入力された場合、ステータスコード500を返すそうです。
    ※対応外の画像は、ImageFluxを通さない対処が必要です。

  • ImageFluxでSSL通信を採用する場合、独自ドメインのみ対応

  • WebPの対応ブラウザは ChromeOperaの2種類で、どちらもiOSへは未対応とのことでした。
    ChromeAndroid)、Android ブラウザへは対応

導入手順

導入手順について簡単に記載します。

  1. 契約書の記載、送付

  2. SSL証明書発行
    SSL証明書ですが、Let's Encryptは(3ヶ月更新の為)運用負荷が掛かりNGでとのことでした。結果、JPRSドメイン認証型(972円/1年)を採用しました。

  3. SSL証明送付
    発行した証明書をImageFlux担当者に送付して、ImageFlux側で証明書を設定してもらいます。

  4. ImageFluxアカウント発行
    ImageFlux側の作業が完了するとアカウントが発行されます。
    ※ImageFlux+SSLを採用した場合、発行迄に5営業日程掛ります。

  5. オリジン設定
    ImageFluxの管理コンソールにログインして、オリジンサーバーの追加を行います。
    ※オリジンサーバーを追加すると、ImageFlux側のドメインが発行されます。

  6. DNS設定
    DNSに、5)で発行されたImageFluxのドメイン(CNAME)を設定します

今回は導入迄ですが、導入結果について改めて報告できたらと思います。