使用 Front Door CDN 在 Azure 应用服务上运行 imgproxy 容器

了解如何在 Azure 上运行您自己的 imgproxy 实例。

不久前，我发布了有关如何使 imgproxy 与 Optimizely CMS 应用程序配合使用的文章，但直到现在我才有了合适的案例来使用它。

我建议首先阅读上面的文章，了解如何在本地运行以及如何使用 C# 构建图像 URL。

为了简单起见，我选择使用 Azure 应用服务来实现此托管场景。 这是工作日志：

添加新资源，搜索并选择容器的 Web 应用程序。

将层设置为 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 放。

编辑后重新启动应用程序。

应用服务应检测到容器正在使用端口 8080，如果您使用应用服务 *.azurewebsites.net URL，您现在应该会看到带有 imgproxy 徽标的页面。

要尝试一下，您可以使用第一篇文章中的一些代码，并使用 *.azurewebsites.net URL，而不是从您设置的 URL 中提取图像 IMGPROXY_ALLOWED_SOURCES。

对于Optimizely CMS； 添加 EPiServer.Cdn支持项目 并设置 OverrideHost 到 *.azurewebsites.net URL。

使用 Azure Front Door 测试图像缓存

如果您想要一种无需代码的方式来缓存转换后的图像； 转至网络并在可选入站服务下添加 Front Door 资源。

检查您的 imgproxy 实例是否可以通过 *.azurefd.net 名称运行。

请注意以下内容 请求标头 启用缓存时不会转发到源：

• 内容长度
• 传输编码
• 接受
• 接受字符集
• 接受语言

这使事情变得复杂，并且确实使前门成为一个糟糕的选择 代理服务器，即使用相同的 URL 并检查 Accept 发送最佳接受格式的标头值。

如果您使用当前配置停在此处，您将获得缓存在 Front Door 的 CDN 中的图像 URL，但每个响应都将是 AVIF。

HTTP/2 200

如果不接受 AVIF，至少可以发送 WEBP，但会打开攻击面，这样的设置是添加一条规则：如果 Accept 标头不包含“image/avif”，覆盖 Origin 组并将缓存设置为禁用。

此规则也可以适用于 JPG 而不是 WEBP，您将直接从 imgproxy 获得响应，其中 Accept 标头已评估。

如果您发现配置前门的更好方法，请发送信息。 我现在决定继续使用 Front Door，但只使用 AVIF，因为浏览器支持变得非常好。

展望未来，我可能会用更可配置的缓存反向代理资源替换 Front Door。