WordPress│CDN│Cloudinaryの使い方

画像の削除・復元に関する説明を見直しました。以下の管理画面画像は導入当時の記録で、現行UIとは異なる場合があります。料金・利用枠の記述は今回の更新対象外で、現行条件の確認は行っていません。

CDNという言葉を聞いたことがあるでしょうか？

Content Delivery Network（コンテンツデリバリーネットワーク）と呼ばれていて、

例えば画像や動画、コード等を別の専用サーバーに置いて、

サイトの表示を高速化したりサーバーのストレージ容量を節約できたりします。

今回は画像特化のCDNのCloudinary（クラウディナリー）をWordPressで使う検証をしてみましたので、その備忘録になります。

WordPressでのCloudinary（クラウディナリー）の概要

Cloudinaryで初めに知っておきたいことを簡潔に記載しておきます。

料金

基本的に無料です。

ただし月額25クレジット以上を消費した場合は、有料プランに切り替える必要があります。

1クレジットというのは下記の条件になります。

ちなみにDashbordの下にクレジットを無料で増やす方法が記載されています。

WordPressでのCloudinary（クラウディナリー）の使い方

Cloudinaryのプラグインをインストールして、アカウント登録、APIキーを入れて連携するだけです。

専用プラグイン「Cloudinary」のインストール

WordPressでCloudinaryと検索して、プラグインをインストールしましょう。

Cloudinaryのアカウント作成

管理画面メニューにCloudinaryのメニュが―できているのでクリック。

まずはSignupのボタンを押して、アカウントを作成しましょう。

Cloudinaryのサイトに呼びます。

右上からアカウントの登録。

メールかGoogleアカウント、GitHubのアカウントで登録できます。

アカウント作成後、サイトにアクセスすると２つのアンケートに答えましょう。

管理画面が表示されたら、登録完了です。

CloudinaryとWordPressの連携

Cloudinaryの管理画面が確認できたら、DashbordメニューからAPIキーをコピーします。

WordPressにもどり、先ほどコピーしたAPIキーを登録します。

Cloudinaryにログインしていれば②に進めます。

最後に鍵のアイコンを押して、おすすめ設定をONにして連携完了です。

以上です。

Cloudinaryの設定

Cloudinaryは様々な設定ができます。

同期・削除の動作はプラグインのバージョンと設定に依存します。設定名だけからバックアップが確保されているとは判断できません。

メディアを削除する前に、Cloudinary側への削除の連動と原本の保存先を確認してください。

原本の独立したバックアップを確保し、検証用画像で同期と復元を試してから運用設定を決めます。

CDN側だけ画像を保存する

日本のサーバー（平均ストレージ容量 300GB）違って、海外サーバー（平均ストレージ容量 8GB）はストレージ容量が数GBと極端に少ない場合があります。

サイトのストレージ容量を圧迫するのは基本的には画像だと思いますので、CDNを使うのは有効です。

ストレージの設定変更

公式資料では、General SettingsのMedia Library Sync Settingsで保存先を選択します。Cloudinary onlyはWordPress側の既存ファイルを除去するため、切り替え前にサイト全体のバックアップを確保してください。

保存先の選択と、メディア削除の連動は別に確認します。設定を変えたことだけを根拠に、WordPressの原本を削除しないでください。

Cloudinaryの同期

Cloudinaryの同期、アップロードが完了していれば、メディアのファイルURLがCloudinaryに変更されています。

CloudinaryのURLで表示できても、ローカル原本が不要になったとは限りません。FTPからuploadsを手作業で削除する方法は使用せず、利用中の公式プラグインが提供するオフロード手順と復元手順を確認します。

管理画面のメディアライブラリには記録のデータだけ残っています。
こちらは消さないようにしましょう。

Cloudinaryの注意点

実際に使ってみての注意点です。

画像ファイルを元に戻したい時

Cloudinaryを停止する場合、ローカルの画像がないと停止時に画像が表示されなくなります。

Cloudinary and WordPressへ戻し、メディアをWordPressへ手動で同期してから停止します。設定変更だけで復元完了とはせず、原本が戻ったことを確認してください。

復元後に原本と派生画像のファイル・URLを確認し、検証環境でCloudinaryを停止して代表ページの画像が表示されることを確認します。欠損があれば停止を進めず、バックアップから復元してください。

無料枠の25GB以上を使うとどうなるのか？

実際に画像数とアクセス数の多いサイトで試してみたところ、転送量が多くなり165%を使ってしまったところで警告メールが届きました。

Cloudinaryはかなりの高速化が見込めるものの、画像の転送量が多いサイトだと無料枠で納めるのは厳しいです。

まとめ

CDN「Cloudinary」の月の無料枠を利用すると、ストレージ容量の圧迫を解消できるかもしれません。

また、実際に使ってみて、かなりの高速化になった結果をサーチコンソールで確認できました。

CDNのサーバーの置き場所の距離も重要です。

日本だけで完結するサイトの場合はかえって表示が遅くなる可能性がもあります。

気になった方は是非ためしてみてください。

ちなみに月25GB以上の容量を使ってしまう場合はCloudflareのCDNをおすすめします。

こちらは画像だけでなく、ページ全体をキャッシュするサービス（無料）になります。

現在の操作と制約はCloudinary公式のWordPressプラグイン資料を参照してください。今回、本番でのオフロード、原本削除、復元、プラグイン停止は実行していません。