Thumbor を無料で使用して、オンデマンドで画像のサイズ変更、圧縮、変換を行うことができます。
Image CDN を使用すると、画像の美しさとパフォーマンスを簡単に動的に最適化できます。ほとんどの画像 CDN とは異なり、Thumbor はオープンソースであり、画像のサイズ変更、圧縮、変換に無料で使用できます。本番環境での使用には適しており、Wikipedia と Square はどちらも Thumbor を使用しています。
このガイドでは、独自のサーバーに Thumbor をインストールする方法について説明します。インストールが完了すると、画像を変換するための API として Thumbor を使用できます。
はじめに
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 は、Linux オペレーティング システム用の「システムおよびサービス マネージャー」です。systemd
を使用すると、サービス(プロセス)を実行するタイミングを簡単に構成できます。
VM の起動時に Thumbor を自動的に起動するように systemd
を設定します。VM が再起動されると、Thumbor プロセスも自動的に再起動されます。これは、ユーザーの介入に依存して 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 を「有効」にします。つまり、Thumbor が起動時に自動的に起動します。
sudo systemctl enable thumbor.service
status
コマンドを実行して、systemd
が正常に構成されていることを確認します。
systemctl status thumbor.service
systemd
を使用するように thumbor.service が正常に設定されると、有効かつアクティブであることを示すステータスが表示されます。