Thumbor を使用すると、必要に応じて画像のサイズ変更、圧縮、変換を無料で行うことができます。
Image CDN を使用すると、画像の外観とパフォーマンスを簡単に動的に最適化できます。ほとんどの画像 CDN とは異なり、Thumbor はオープンソースで、無料で画像のサイズ変更、圧縮、変換を行えます。本番環境での使用に適しています。Wikipedia と Square ではどちらも Thumbor を使用しています。
このガイドでは、Thumbor を独自サーバーにインストールする方法について説明します。インストールが完了すると、Thumbor を API として使用して画像を変換できるようになります。
はじめに
Ubuntu 16.04 を実行している VM に Thumbor をインストールします。Ubuntu 16.04 は非常に一般的なイメージであり、以下の手順は任意のクラウド プロバイダで動作することを目的としています。VM の作成は、ローカルマシンに Thumbor をインストールするよりも手間がかかるように思えるかもしれませんが、VM の作成にかかる時間はわずか数分しかかからず、Thumbor をローカルマシンに正しくインストールするのに何時間も何日もかかることがありません。Thumbor は簡単に使用できますが、インストールが難しいことはよく知られていますが、この手順では簡単に実装できます。依存関係をすぐにダウンロードできる場合は、5 ~ 10 分でインストールを完了できます。
前提条件
この投稿は、Google Cloud、AWS、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 Cloud、AWS、Azure をご覧ください。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 に表示されます。