一键用Coolify部署next-image-transformation4步上线图片优化服务的生产环境指南附域名白名单配置【免费下载链接】next-image-transformationDrop-in replacement for Vercels Nextjs image optimization service. Cloud version 项目地址: https://gitcode.com/gh_mirrors/ne/next-image-transformationnext-image-transformation 是一个开源、可自托管的图片优化服务作为 Vercel 官方 Image Optimization 的直接替代品drop-in replacement。它由两部分组成一个用 Bun 编写的 API 层负责把请求转换成 Imgproxy 格式以及强大的 Imgproxy 图像处理引擎可按需实时完成缩放、裁剪和格式转换。通过 Coolify 的官方模板你可以一键在 4 步内把它部署到生产环境并自带域名白名单ALLOWED_REMOTE_DOMAINS安全配置。 核心功能一览部署前先了解这个图片优化服务能做什么能力说明实时缩放通过width查询参数按需调整图片宽度实时裁剪通过height查询参数按比例裁剪质量控制通过quality参数调整压缩质量默认 75现代格式自动检测并输出 WebP / AVIF显著减小图片体积安全白名单通过域名白名单控制允许处理哪些远程图片底层架构可在 docker-compose.yaml 中查看api服务Bun端口 3000依赖imgproxy服务健康检查通过后启动并内置/health健康检查接口方便容器编排监控。⚡ 4步一键部署Coolify 生产环境上线步骤Coolify 内置了Next.js Image Transformation官方模板无需手写 Docker 配置。只需 4 步第 1 步登录 Coolify 实例登录你的 Coolify 自托管实例或官方云端控制台进入服务管理页面。第 2 步选择 Next.js Image Transformation 模板点击「新建服务New Service」在服务模板列表中选择Next.js Image Transformation模板模板会自动创建 API 与 Imgproxy 两个容器并配好依赖关系。第 3 步可选配置域名白名单在环境变量中设置ALLOWED_REMOTE_DOMAINS为你的图片域名例如ALLOWED_REMOTE_DOMAINSexample.com,cdn.example.com 默认值为*即允许任意域名的图片被处理。生产环境强烈建议收紧为白名单防止服务被滥用作图片代理。第 4 步绑定域名并部署为你的Next Image Transformation服务绑定一个子域名如img.example.com点击部署即可上线。部署完成后访问https://img.example.com/health返回OK即表示服务正常。️ 域名白名单配置详解白名单逻辑在 index.js 的resize()函数中实现规则简单直观分隔符多个域名用英文逗号分隔精确匹配example.com只允许该域名通配符匹配*.example.com允许所有子域名如cdn.example.com、a.b.example.com拒绝行为不在白名单中的域名会直接返回403状态码三种典型配置场景场景配置值本地开发先跑起来*保持默认单一图片源cdn.example.com主站 子域图片example.com,*.example.com 在你的 Next.js 应用中接入服务上线后只需 3 个小改动即可把 Next.js 的图片优化流量切换到自建服务在next.config.js中启用自定义 loadermodule.exports { images: { loader: custom, loaderFile: ./loader.js, }, }在项目根目录创建loader.js核心逻辑是把你的Next应用域名作为前缀、图片优化服务域名作为目标拼出/image/路径?widthxqualityy形式的请求地址完整示例见 README.md。访问页面Next.js 的Image组件即会自动通过你的图片优化服务加载图片无需修改任何业务代码。 不用 CoolifyDocker Compose 也能一键跑如果你没有 Coolify 环境项目同样提供了生产级 docker-compose.yamldocker compose up -dAPI 服务默认暴露 3000 端口。Imgproxy 配置了 WebP/AVIF 自动检测、渐进式 JPEG 与 ETag 缓存详见 docker-compose.yaml 中的IMGPROXY_*环境变量。本地开发可用 docker-compose-dev.yaml它会把 Imgproxy 映射到 8888 端口API 在开发模式下会自动指向localhost:8888见 index.js。容器镜像基于oven/bun:alpine构建见 Dockerfile体积小巧、启动飞快。✅ 部署验证清单上线后建议按以下清单快速自检访问/health返回OK用白名单域名构造/image/https://cdn.example.com/a.jpg?width500请求确认返回缩放后的图片用非白名单域名请求确认返回403响应头Server字段应为NextImageTransformation查看请求耗时与流量确认 WebP/AVIF 已生效写在最后借助 Coolify 模板next-image-transformation 图片优化服务从克隆仓库到生产上线总共只需 4 步选模板 → 配白名单 → 绑域名 → 点部署。配合域名白名单和现代图片格式自动转换你就能以极低的成本把 Vercel 级的图片优化能力完全掌握在自己手里。✨【免费下载链接】next-image-transformationDrop-in replacement for Vercels Nextjs image optimization service. Cloud version 项目地址: https://gitcode.com/gh_mirrors/ne/next-image-transformation创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考