Thumbor 画像 CDN をインストールする方法

Thumbor を使用すると、必要に応じて画像のサイズ変更、圧縮、変換を無料で行うことができます。

Katie Hempenius
Katie Hempenius

Image CDN を使用すると、画像の外観とパフォーマンスを簡単に動的に最適化できます。ほとんどの画像 CDN とは異なり、Thumbor はオープンソースで、無料で画像のサイズ変更、圧縮、変換を行えます。本番環境での使用に適しています。WikipediaSquare ではどちらも Thumbor を使用しています。

このガイドでは、Thumbor を独自サーバーにインストールする方法について説明します。インストールが完了すると、Thumbor を API として使用して画像を変換できるようになります。

はじめに

Ubuntu 16.04 を実行している VM に Thumbor をインストールします。Ubuntu 16.04 は非常に一般的なイメージであり、以下の手順は任意のクラウド プロバイダで動作することを目的としています。VM の作成は、ローカルマシンに Thumbor をインストールするよりも手間がかかるように思えるかもしれませんが、VM の作成にかかる時間はわずか数分しかかからず、Thumbor をローカルマシンに正しくインストールするのに何時間も何日もかかることがありません。Thumbor は簡単に使用できますが、インストールが難しいことはよく知られていますが、この手順では簡単に実装できます。依存関係をすぐにダウンロードできる場合は、5 ~ 10 分でインストールを完了できます。

前提条件

この投稿は、Google CloudAWS、Azure などのクラウド プラットフォームで Ubuntu 16.04 LTS VM を作成する方法と、コマンドライン ツールを使用して VM を設定する方法を理解していることを前提としています。

Thumbor 依存関係をインストールする

インストール済みの Ubuntu パッケージを更新してアップグレードします。

sudo apt-get update -y && sudo apt-get upgrade -y

Python 用のパッケージ マネージャーである pip をインストールします。後で、pip を使用して Thumbor をインストールします。

sudo apt-get install -y python-pip

Thumbor の依存関係をインストールします。Thumbor のドキュメントにはこれらの依存関係が明示的に記載されていませんが、これらがないと Thumbor は正常にインストールできません。

# ssl packages
sudo apt-get install -y libcurl4-openssl-dev libssl-dev
# computer vision packages
sudo apt-get install -y python-opencv libopencv-dev
# image format packages
sudo apt-get install -y libjpeg-dev libpng-dev libwebp-dev webp

Thumbor をインストール

pip を使用して Thumbor をインストールします。

sudo pip install thumbor

Thumbor が正常にインストールされた場合は、以下のように動作します。

thumbor --help

サムバーを実行

Thumbor を実行します。デバッグ ロギングは必須ではありませんが、利用を開始する際に役立ちます。

thumbor --log-level debug

Thumbor を実行しています。

ファイアウォール ポートがオープン状態

デフォルトでは、Thumbor はポート 8888 で実行されます。VM の IP アドレスが 12.123.12.122 の場合、ウェブブラウザ(http://12.123.12.123:8888/.../$IMAGE)から Thumbor にアクセスします。

ただし、これはおそらく(まだ)うまく機能しません。クラウド プロバイダは通常、受信トラフィックを受け入れる前にファイアウォール ポートを明示的に開く必要があるからです。

ファイアウォールを更新して、ポート 8888 を公開する。詳しい手順については、Google CloudAWSAzure をご覧ください。Google Cloud では、まず VM に静的 IP アドレスを割り当ててから、外部 HTTP 接続を許可する必要があります。

試してみる

Thumbor にアクセスできるようになり、使用できるようになりました。次の URL にアクセスしてお試しください。

http://YOUR_VIRTUAL_MACHINE:8888/unsafe/100x100/https://web.dev/install-thumbor/hero.jpg

この URL では HTTP を使用していることに注意してください。Thumbor はデフォルトで HTTP を使用しますが、HTTPS を使用するように構成することもできます。

幅 100 ピクセル、高さ 100 ピクセルの画像が表示されます。Thumbor は URL 文字列で指定された画像 hero.jpg とサイズを取得し、結果を提供しました。URL 文字列(例:https://web.dev/install-thumbor/hero.jpg など)を、他の画像(例:https://your-site.com/cat.jpg など)に変換され、Thumbor によってその画像のサイズも変更されます。

Thumbor API の使用方法の詳細については、Thumbor で画像を最適化するをご覧ください。特に、Thumbor 構成ファイルの設定についてご検討ください。

付録: Systemd の構成

このステップでは、VM が再起動された後も Thumbor プロセスの実行を継続する方法について説明します。この手順は本番環境サイトでは重要ですが、Thumbor をいじるだけの場合は省略できます。

Systemd は「システムおよびサービス マネージャー」使用できます。systemd を使用すると、サービス(プロセス)を実行するタイミングを簡単に構成できます。

VM の起動時に Thumbor を自動的に起動するように systemd を構成します。VM を再起動すると、Thumbor プロセスも自動的に再起動します。この方法は、ユーザーの介入に頼るよりもはるかに信頼性が高くなります。

/lib/systemd/system ディレクトリに移動します。 このディレクトリには、systemd のサービス ファイルが含まれています。

cd /lib/systemd/system

スーパーユーザーとして、thumbor.service ファイルを作成します。

sudo touch thumbor.service

任意のテキスト エディタ(Ubuntu には vim と nano がプリインストールされていますが、別のエディタをインストールすることもできます)を使用して、thumbor.service に次の構成を追加します。この構成では、ネットワークが利用可能になると /usr/local/bin/thumbor(Thumbor バイナリ)が実行され、障害発生時に Thumbor が再起動されます。

[Unit]

Description=Service for Thumbor image CDN

Documentation=https://thumbor.readthedocs.io/en/latest/

After=network.target

[Service]

ExecStart=/usr/local/bin/thumbor

Restart=on-failure

[Install]

WantedBy=multi-user.target

systemctl は、systemd の管理に使用するユーティリティです。start コマンドを使用して Thumbor を起動します。

sudo systemctl start thumbor.service

次に [有効化]をクリックしますサムネイル。つまり、起動時に Thumbor が自動的に起動します。

sudo systemctl enable thumbor.service

status コマンドを実行して、systemd が正常に構成されていることを確認します。

systemctl status thumbor.service

systemd を使用するように thumbor.service が正常に設定されていれば、有効かつアクティブであることが status に表示されます。

Thumbor のステータスを表示する Systemctl