Front Door CDN を使用して Azure App Service で imgproxy コンテナーを実行する

Azure 上で独自の imgproxy インスタンスを実行する方法を見てみましょう。

少し前に投稿しました imgproxy を Optimizely CMS アプリで動作させる しかし、それを使用するのにぴったりのケースを手に入れたのは今になって初めてでした。

まず上記の投稿を読んで、ローカルで実行する方法と、C# を使用して画像 URL を構築する方法を確認することをお勧めします。

シンプルにするために、このホスティング シナリオでは Azure App Service を使用することにしました。 作業のログは次のとおりです。

新しいリソースを追加し、Web App for Containers を検索して選択します。

層を Linux Basic (B1) に設定します。

レジストリとイメージのオプションが表示される場合。 Docker Hubを選択し、イメージ/タグを次のように設定します。 darthsim/imgproxy:v3.24-amd64。

環境変数を編集します。最初のブログ投稿のコードの一部を使用できるようにするための高度な編集は次のようになります。

[
    {
      "name": "DOCKER_REGISTRY_SERVER_PASSWORD",
      "value": "",
      "slotSetting": false
    },
    {
      "name": "DOCKER_REGISTRY_SERVER_URL",
      "value": "https://index.docker.io",
      "slotSetting": false
    },
    {
      "name": "DOCKER_REGISTRY_SERVER_USERNAME",
      "value": "",
      "slotSetting": false
    },
    {
      "name": "IMGPROXY_ALLOWED_SOURCES",
      "value": "https://your-images-served-from-here.com/",
      "slotSetting": false
    },
    {
      "name": "IMGPROXY_ENABLE_AVIF_DETECTION",
      "value": "true",
      "slotSetting": false
    },
    {
      "name": "IMGPROXY_ENABLE_WEBP_DETECTION",
      "value": "true",
      "slotSetting": false
    },
    {
      "name": "IMGPROXY_ENFORCE_AVIF",
      "value": "true",
      "slotSetting": false
    },
    {
      "name": "IMGPROXY_ENFORCE_WEBP",
      "value": "true",
      "slotSetting": false
    },
    {
      "name": "IMGPROXY_FORMAT_QUALITY",
      "value": "jpeg=95,avif=75,webp=85",
      "slotSetting": false
    },
    {
      "name": "IMGPROXY_KEY",
      "value": "333636303563363065726464",
      "slotSetting": false
    },
    {
      "name": "IMGPROXY_SALT",
      "value": "33393737643963656473",
      "slotSetting": false
    },
    {
      "name": "WEBSITES_ENABLE_APP_SERVICE_STORAGE",
      "value": "false",
      "slotSetting": false
    }
]

最初のブログ投稿と比較すると、ここではスキップしていることがわかります IMGPROXY_SECRET そして代わりに IMGPROXY_ALLOWED_SOURCES セット。

編集後はアプリを再起動してください。

App Service は、コンテナーがポート 8080 を使用していることを検出する必要があります。また、アプリ サービス *.azurewebsites.net URL を使用している場合は、imgproxy ロゴのあるページが表示されるはずです。

これを試すには、最初の投稿のコードを使用し、http://localhost:8080 の代わりに *.azurewebsites.net URL を使用し、次のように設定した URL から画像をプルします。 IMGPROXY_ALLOWED_SOURCES。

Optimizely CMS の場合。 を追加します EPiServer.CdnSupport プロジェクト そしてセット OverrideHost *.azurewebsites.net URL に追加します。

また、このプロジェクトの URL 作成メソッドを imgproxy の URL をカスタマイズする場所としても使用します。

Azure Front Door を使用したイメージのキャッシュのテスト

コードを使わずに変換された画像をキャッシュする方法が必要な場合。[ネットワーク]に移動し、[オプションの受信サービス]の下に Front Door リソースを追加します。

imgproxy インスタンスが *.azurefd.net 名を通じて機能することを確認します。

以下のことに注意してください リクエストヘッダー キャッシュが有効な場合はオリジンに転送されません。

• コンテンツの長さ
• 転送エンコーディング
• 受け入れる
• Accept-Charset
• 受け入れ言語

これは事態を複雑にし、Front Door は本当に悪い選択肢になります。 imgproxy、同一の URL を使用して、 Accept ヘッダー値を使用して、最も受け入れられる形式で送信します。

現在の構成でここで停止すると、Front Door の CDN にキャッシュされた画像 URL が取得されますが、すべての応答は AVIF になります。

HTTP/2 200

AVIF を受け入れない場合に少なくとも WEBP を送信するためには機能しますが、攻撃対象領域を開く設定は、次のようなルールを追加することです。 Accept ヘッダーに「image/avif」が含まれていない場合は、Origin グループをオーバーライドして、Caching を Disabled に設定します。

このルールは、WEBP ではなく JPG に対しても複製でき、imgproxy から直接応答を取得します。 Accept ヘッダーが評価されます。

Front Door を構成するより良い方法を見つけた場合は、情報を送信してください。 ブラウザーのサポートが非常に充実しているため、現時点では Front Door を使い続けることにしましたが、AVIF のみを取得することにしました。

今後は、おそらく Front Door を、より構成可能なキャッシュ リバース プロキシ リソースに置き換えることになるでしょう。