S3 から Cloudinary への自動アップロードで即時に画像変換する

Ito ma

2019.07.27

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Guten Tag、ベルリンの伊藤です。

Cloudinary の画像変換を利用したい、でも既に別で画像管理している、すると大規模な移行が必要になるの？そんな時、Auto-Upload 機能を使い、外部のリソースURLのパスを紐づけるマッピング設定を行うことで、即時に自動アップロード・画像変換を行うことができます。

例えば、（公式ブログから引用）、下記のような外部リソースURLがある場合、

http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg

このパスプレフィックス http://upload.wikimedia.org/wikipedia/と Cloudinary 上のフォルダ remote_media を紐づけるマッピング設定を行うことで、画像自体をアップロードや移行しなくとも、Cloudinaryのプレフィックスと合体した下記URLにアクセスすると、

https://res.cloudinary.com/demo/image/upload/remote_media/commons/2/26/YellowLabradorLooking_new.jpg

自動的にその Cloudinary 側の remote_media/ パス配下に元の画像がアップロードされます！もちろん、自由にパラメータを加えれば URLによる即時の画像変換も可能です。

同様にして、S3バケットのリソースを紐づけることもできます 。プライベートバケットにはちょっとした設定が必要になるので、本ブログで紹介していきます。

自動アップロード

まず、先ほどの例をキャプチャとともに確認していきます。

マッピング設定

右上の設定アイコンを選択し、「Auto upload mapping」に下記のように入力し、Saveをクリック。（※フォルダは、2階層のito-testをCloudinaryのMedia Library内にあらかじめ作成しています）

設定すると、下にマッピングされたURLの例が表示されます。この下線部分を使用します。

なお、この時点では、ito-test/ito-test フォルダは空です。

確認

早速、元の画像URLからプレフィックスを除いた commons/2/26/YellowLabradorLooking_new.jpg を先ほどの URL とくっつけて、アクセスしてみると...

出ました、わんちゃん！

Cloudinary の Media Library にも追加されています。

あとは、Cloudinary 伝家の宝刀、画像変換です。

Automatically uploaded and cropped Wikimedia image

例えば、こちらはサイズ・画質調整や丸く切り抜きのパラメータを加えた例ですが、このようにパラメータを追加してURLにアクセスするだけで、即時に変換された画像を表示させられます。

https://res.cloudinary.com/CLOUD-NAME/image/upload/w_300,h_300,c_crop,g_north_west,r_max,e_sharpen/e_saturation:70/ito-test/ito-test/commons/2/26/YellowLabradorLooking_new.jpg

S3 プライベートバケットとの連携

パブリックアクセスが可能なバケットの場合には、S3のURLを使用して前述の方法で設定可能ですが、そうでない場合は下記の流れでアクセス許可の設定を行います。

対象のS3バケットに .wellknown/cloudinary/[CLOUD-NAME] という空ファイルを用意
対象のS3バケットにバケットポリシーを設定

※CLOUD-NAMEとは、Cloudinaryアカウントのクラウド名で、Cloudinary管理画面のダッシュボードから確認できます。

1. 空ファイルの用意

以下のようにローカルでクラウド名の空ファイルを作成し、mi-190726というバケットにプレフィックス .wellknown/cloudinary/ 付きでアップロードします。

$ touch CLOUD-NAME
$ aws s3 cp CLOUD-NAME s3://mi-190726/.wellknown/cloudinary/
upload: ./CLOUD-NAME to s3://mi-190726/.wellknown/cloudinary/CLOUD-NAME

コンソールから確認すると、下記のような感じです。

これによって、Cloudinaryの特定アカウントが本バケットからのアップロード許可を持つことを示します。複数のCloudinaryアカウントで同じバケットに対して紐づけたい場合には、各アカウント分のファイルを用意すればOKです。

2. バケットポリシー設定

次に、バケットの権限設定で、ドキュメントに記載の通りバケットポリシーを貼り付けます。BUCKETNAMEの部分はバケット名に修正して、変更を保存します。

マッピング設定

先ほどと同様に、Cloudinaryの設定からプレフィックスのマッピング設定を追加します。

プレフィックスにはS3のオブジェクトURLではなく、s3://[bucket-name]/[prefix] の形式で入力します。（※フォルダは、Cloudinary内のito-test配下に空のanimal-testをあらかじめ作成しています）

確認

このS3プライベートバケットに配置したオブジェクトURL https://mi-190726.s3-eu-west-1.amazonaws.com/animal-v1/animal.jpg は直接アクセスすると Access Denied となることを確認しています。

では、animal.jpg を先ほどの URL とくっつけて、アクセスしてみると...

出ました、白鳥の親子！

もちろん、Cloudinary の Media Library を確認すると ito-test/animal-test 配下にこの画像が格納されていることが確認でき、変換もお好みの通り。

画像以外の場合

この自動アップロードは画像や動画以外のどのようなリソースにも対応しており、その場合はURLに raw を指定します。

例）

https://res.cloudinary.com/CLOUD-NAME/raw/upload/ito-test/animal-test/kino_ticket.pdf
https://res.cloudinary.com/CLOUD-NAME/raw/upload/ito-test/animal-test/Cloudinary_partner_form.xlsx

先ほどのバケットにPDFやExcelファイルを格納したところ、上記のURLで取得できるようになりました。もちろん、Media Libraryにも追加されています。

補足

自動アップロードのドキュメントによると、CloudinaryのURLリクエスト時にフォルダにアセットが存在しない場合には、自動的にアセットがアップロードされますが、以降は通常のCloudinaryのアセットと同様にアップロードされたものに対して変換・配信されます。

the media assets are automatically retrieved from the mapped URL if they are not already uploaded to the folder, and are available for further manipulation, management and CDN delivery like any other asset uploaded to Cloudinary. (中略) After an asset has been auto-uploaded from the remote location, all requests for the asset will reference the asset stored in your Cloudinary account.

つまり、URLの対象パスにファイルがある限り、一度アップロードされると、マッピング元の画像を再度参照して更新することはありません。そのためS3バケット側の画像で更新があったとしても、Cloudinary側の画像が自動的に更新されるわけではないことにご注意ください。

逆にファイルがなければ画像は再び自動アップロードされます。

先の白鳥の画像に加えて、下記のような検証を行ってみました。

異なるバージョンパス・同じファイル名として、S3バケットの s3://mi-190726/animal-v2/animal.jpg に別の画像をアップロード
マッピング設定のURL prefixをs3://mi-190726/animal-v1/ → s3://mi-190726/animal-v2/ に変更して保存
同じURL（~/ito-test/animal-test/animal.jpg）にアクセス

すると、既にCloudinary内で ito-test/animal-test/animal.jpg が存在するため、上記のマッピング設定を変更しても画像は白鳥さんのままです。

ここでMedia Libraryの白鳥さんの画像を削除して再度アクセスすると、v2の画像が表示されました！

（※既にアクセス済みのURLパスは、CDNのキャッシュが残っており古い画像が表示されます。ここでは変換パラメータを追加して異なるURLパスでアクセスしています。）