サーバー上の画像のサイズ変更に関する最近の記事に従って、IISにImageResizerを実装した経験を共有することにしました。 もちろん、簡単なレビューを書くのは退屈すぎますが、私たちは単にモジュールを紹介するだけにとどまりませんでした。
そのため、ImageResizer + クラウドを操作するためのCloud Bundleプラグインのセットを自由に使用できました。
残念ながら、このソリューションを実装したプロジェクトに名前を付けることはできませんが、その本質を概説することはできます。 これらは、北米に焦点を当てたニュースポータルです。 このサイトには記事とビデオがあります。
記事はデータベースに保存され、エディターは記事にタイトル画像を添付できます。 イメージはAmazon S3に保存されます。 ご存知のように、エディターは小さいものと大きいものの両方の画像をアップロードでき、元の画像を失うことはできません。
動画ファイルは、 BrightCoveのクラウドベースの動画ストレージにアップロード、処理、保存されます 。 ビデオをストレージにアップロードした後、あらゆる方法で処理され、異なる形式の複数のストリームに変換され、ビデオのサムネイルが自動的に選択されます。
当然、これはすべてクラウドで行われるため、画像はクラウドに保存され、挿入用の直接リンクが取得されます。 ただし、ここでも画像が必要なサイズに対応するとは限りません。
合計で、Amazon S3に一連の画像、BrightCoveに一連の画像、および必要なサイズに調整済みの素早いレンダリングに必要なすべての画像があります。 さらに、サイトのさまざまな部分でさまざまなサイズの画像を使用できます。 同時に、 キャッシュ用のプラグインのセットはありませんでしたが、CloudFrontがありました。
奇妙なことに、彼の記事の同志のビットマップは、多くの方法があるため、画像のサイズを正確に変更する方法については言及していませんでした フレームを引き伸ばして顔を引き伸ばし、比率を維持し、空いているスペースを色で塗りつぶすことができます。 比率を維持し、エッジをトリミングできます。 このモジュールは、フィルターの適用など、他の不要なryushekokの束も許可します。 その結果、あるプロジェクトではcssのストレッチと同じようにストレッチを開始し、別のプロジェクトでは色で塗りつぶしました。
標準スクリプト
デフォルトでは、画像とIISは同じサーバーに配置され、リンクにパラメーターを追加するだけでサイズ変更が実行されるとボックスから想定されます。
/image.jpg?height=200&width=300
または
/image.jpg?h=200&w=300
。
素晴らしいですが、Amazon S3から画像を取得するにはどうすればよいですか？
S3リーダー
ここでは、Cloud Bundleプラグインスイートの最初であるS3 Readerが役立ちます。 単純なweb.config設定を使用すると、次の形式のリンクを使用できます。
/s3/bucket/folder/image.jpg?h=200&w=300
RemoteReaderプラグイン
OK、S3から写真を提供できるようになりましたが、S3は非常に人気のあるものです。完全にサードパーティのサーバーはどうでしょうか。 これにより、 RemoteReaderプラグインが有効になります 。 それほど単純ではありません。 最終リンクの形式は次のとおりです。
/remote.jpg.ashx?w=200&height=300&urlb64=45b45c4a2099b...&hmac=a2099ba2099b
。
remote.jpg.ashxがリンクをインターセプトするモジュールのエンドポイントである場合、urlb64パラメーターは、HMAC SHA-256を使用して暗号化されていないリモートイメージサーバーへのエンドリンクです。 このリンクは特別な方法で生成されます：
RemoteReaderPlugin.Current.CreateSignedUrl("http://remote.com/image.jpg");
クラウドフロント
わかりました、私達は主要なタスクに対処しました。 ここで、何らかの方法で結果をキャッシュする必要があります。そうしないと、すべてがすぐに機能しません。
キャッシングプラグインはありませんが、CloudFrontカスタムオリジンなどの魔法のようなものがあります。 ドメインを指す新しいCloudFrontディストリビューションを作成しました。 これで、フォーマットリンクができました。
htt://my-distribution-name.cloudfront.com/remote.jpg.ashx?w=200&height=300&urlb64=45b45c4a2099b...&hmac=a2099ba2099b
そして
htt://my-distribution-name.cloudfront.com/s3/bucket/folder/image.jpg?h=200&w=300
しかし今、私たちのサイトはhttps://my-distribution-name.cloudfront.comで開き始め、クラウドフロントを詰まらせています。 次に、写真用のセクションをすばやく追加しました。 リンクからCloudFront
htt://my-distribution-name.cloudfront.com/s3/bucket/folder/image.jpg?h=200&w=300
にリクエストをリダイレクトし始めました
htt://my-site.com/images/s3/bucket/folder/image.jpg?h=200&w=300
すべてが正常に機能するように見えますが、CloudFrontは容赦なく長いパラメーターをカットし、大量のエラーが発生し、画像を開けないことが判明しました。 ここでは、 CloudFrontプラグインが役に立ちました。これにより、リンクを次の形式に変換できました。
htt://my-distribution-name.cloudfront.com/remote.jpg.ashx;w=200;height=300;urlb64=45b45c4a2099b...;hmac=a2099ba2099b
そして
htt://my-distribution-name.cloudfront.com/s3/bucket/folder/image.jpg;h=200;w=300
ショートリンク
これらはすべてうまくいきましたが、エンジニアリングはさらに進みました。 必要のない画像解像度を誰かが生成し始めたらどうなりますか？ 増加の最大サイズはもちろん制限されますが、それでもDDOS Webサイトを使用でき、受信したイメージは世界中の数百のCloudFrontサーバーに配信されます。 そしてもちろん、リンクの長さはひどいです。 次に、短いリンクの機能を実装することにしました。
リンクを生成するときに、フォームの結果の長いリンクをデータベースに追加します。
/remote.jpg.ashx;w=200;height=300;urlb64=45b45c4a2099b...;hmac=a2099ba2099b
テーブルでそのIDを取得します。 レイアウトでは、フォーマットリンクを吐き出します。
htt://my-distribution-name.cloudfront.com/42
CloudFrontからの連絡先：
htt://my-site.com/i/42
リクエストをインターセプトし、データベースからキー42でロングリンクを選択し、サーバーコードで自分自身にHttpRequestを作成し、ImageResizerがそれをインターセプトし、それに応じて作業の結果を取得します。 CloudFrontは受信したイメージをサーバーに保存し、次のキャッシュ無効化までこのリクエストを受信しなくなりました。
最後のタッチは、追加のドメインを使用して、リンクのひどいCloudFrontプレフィックスを隠します。これはランダムな数字と文字のセットで、あまり美しくはありません。
その結果、ユーザーの最終的なリンクは次のとおりです。
htt://short.com/42
同時に、画像はキャッシュされ、ユーザーに最も近いサーバーから簡単にアクセスできます。邪悪なハッカーは独立してサイズを変更できません.DDOSにモジュールがあるため、短いリンクがあり、最も重要なのは、適切なサイズのすべての写真がその場所で美しく見えることです。
おわりに
結論として、プラグインは素晴らしい動作をし、さまざまな設定とプラグインをあらゆる機会に備え、予期しない状況の場合にデバッグモードを備えていると言いたいと思います。 作者は問題に対処するときに責任を負い、見つかったバグの代価を払うようです。 もちろん、モジュールは有料ですが、それだけの価値があります。