add host image loader

packages/open-next/src/adapters/image-optimization-adapter.ts

@@ -8,7 +8,6 @@ import https from "node:https";
 import path from "node:path";
 import { Writable } from "node:stream";
 
-import { GetObjectCommand, S3Client } from "@aws-sdk/client-s3";
 import { loadBuildId, loadConfig } from "config/util.js";
 import { OpenNextNodeResponse, StreamCreator } from "http/openNextResponse.js";
 // @ts-ignore
@@ -19,16 +18,14 @@ import {
 } from "next/dist/server/image-optimizer";
 // @ts-ignore
 import type { NextUrlWithParsedQuery } from "next/dist/server/request-meta";
-import { ImageLoader, InternalEvent, InternalResult } from "types/open-next.js";
+import { InternalEvent, InternalResult } from "types/open-next.js";
 
 import { createGenericHandler } from "../core/createGenericHandler.js";
-import { awsLogger, debug, error } from "./logger.js";
+import { resolveImageLoader } from "../core/resolve.js";
+import { debug, error } from "./logger.js";
 import { optimizeImage } from "./plugins/image-optimization/image-optimization.js";
 import { setNodeEnv } from "./util.js";
 
-// Expected environment variables
-const { BUCKET_NAME, BUCKET_KEY_PREFIX } = process.env;
-
 setNodeEnv();
 const nextDir = path.join(__dirname, ".next");
 const config = loadConfig(nextDir);
@@ -42,7 +39,6 @@ const nextConfig = {
 };
 debug("Init config", {
   nextDir,
-  BUCKET_NAME,
   nextConfig,
 });
 
@@ -64,7 +60,14 @@ export async function defaultHandler(
   const { headers, query: queryString } = event;
 
   try {
-    // const headers = normalizeHeaderKeysToLowercase(rawHeaders);
+    // Set the HOST environment variable to the host header if it is not set
+    // If it is set it is assumed to be set by the user and should be used instead
+    // It might be useful for cases where the user wants to use a different host than the one in the request
+    // It could even allow to have multiple hosts for the image optimization by setting the HOST environment variable in the wrapper for example
+    if (!process.env.HOST) {
+      const headersHost = headers["x-forwarded-host"] || headers["host"];
+      process.env.HOST = headersHost;
+    }
 
     const imageParams = validateImageParams(
       headers,
@@ -101,20 +104,6 @@ export async function defaultHandler(
 // Helper functions //
 //////////////////////
 
-// function normalizeHeaderKeysToLowercase(headers: APIGatewayProxyEventHeaders) {
-//   // Make header keys lowercase to ensure integrity
-//   return Object.entries(headers).reduce(
-//     (acc, [key, value]) => ({ ...acc, [key.toLowerCase()]: value }),
-//     {} as APIGatewayProxyEventHeaders,
-//   );
-// }
-
-function ensureBucketExists() {
-  if (!BUCKET_NAME) {
-    throw new Error("Bucket name must be defined!");
-  }
-}
-
 function validateImageParams(
   headers: OutgoingHttpHeaders,
   query?: InternalEvent["query"],
@@ -218,36 +207,9 @@ function buildFailureResponse(
   };
 }
 
-const resolveLoader = () => {
-  const openNextParams = globalThis.openNextConfig.imageOptimization;
-  if (typeof openNextParams?.loader === "function") {
-    return openNextParams.loader();
-  } else {
-    const s3Client = new S3Client({ logger: awsLogger });
-    return Promise.resolve<ImageLoader>({
-      name: "s3",
-      // @ts-ignore
-      load: async (key: string) => {
-        ensureBucketExists();
-        const keyPrefix = BUCKET_KEY_PREFIX?.replace(/^\/|\/$/g, "");
-        const response = await s3Client.send(
-          new GetObjectCommand({
-            Bucket: BUCKET_NAME,
-            Key: keyPrefix
-              ? keyPrefix + "/" + key.replace(/^\//, "")
-              : key.replace(/^\//, ""),
-          }),
-        );
-        return {
-          body: response.Body,
-          contentType: response.ContentType,
-          cacheControl: response.CacheControl,
-        };
-      },
-    });
-  }
-};
-const loader = await resolveLoader();
+const loader = await resolveImageLoader(
+  globalThis.openNextConfig.imageOptimization?.loader ?? "s3",
+);
 
 async function downloadHandler(
   _req: IncomingMessage,

packages/open-next/src/build.ts

@@ -324,6 +324,7 @@ async function createImageOptimizationBundle(config: OpenNextConfig) {
       overrides: {
         converter: config.imageOptimization?.override?.converter,
         wrapper: config.imageOptimization?.override?.wrapper,
+        imageLoader: config.imageOptimization?.loader,
       },
     }),
   ];

packages/open-next/src/converters/edge.ts

@@ -72,7 +72,12 @@ const converter: Converter<
         },
       });
 
-      const cfCache = result.isISR ? { cacheEverything: true } : {};
+      const cfCache =
+        (result.isISR ||
+          result.internalEvent.rawPath.startsWith("/_next/image")) &&
+        process.env.DISABLE_CACHE !== "true"
+          ? { cacheEverything: true }
+          : {};
 
       return fetch(req, {
         // This is a hack to make sure that the response is cached by Cloudflare

packages/open-next/src/core/resolve.ts

@@ -2,8 +2,10 @@ import {
   BaseEventOrResult,
   Converter,
   DefaultOverrideOptions,
+  ImageLoader,
   InternalEvent,
   InternalResult,
+  LazyLoadedOverride,
   OverrideOptions,
   Wrapper,
 } from "types/open-next.js";
@@ -88,3 +90,19 @@ export async function resolveIncrementalCache(
     return m_1.default;
   }
 }
+
+/**
+ * @param imageLoader
+ * @returns
+ * @__PURE__
+ */
+export async function resolveImageLoader(
+  imageLoader: LazyLoadedOverride<ImageLoader> | string,
+) {
+  if (typeof imageLoader === "function") {
+    return imageLoader();
+  } else {
+    const m_1 = await import("../overrides/imageLoader/s3.js");
+    return m_1.default;
+  }
+}

packages/open-next/src/http/openNextResponse.ts

@@ -91,8 +91,10 @@ export class OpenNextNodeResponse extends Transform implements ServerResponse {
       if (!this.headersSent) {
         this.flushHeaders();
       }
+      // In some cases we might not have a store i.e. for example in the image optimization function
+      // We may want to reconsider this in the future, it might be intersting to have access to this store everywhere
       globalThis.__als
-        .getStore()
+        ?.getStore()
         ?.pendingPromiseRunner.add(onEnd(this.headers));
       const bodyLength = this.body.length;
       this.streamCreator?.onFinish(bodyLength);

packages/open-next/src/overrides/imageLoader/host.ts

@@ -0,0 +1,35 @@
+import { Readable } from "node:stream";
+import { ReadableStream } from "node:stream/web";
+
+import { ImageLoader } from "types/open-next";
+import { FatalError } from "utils/error";
+
+const hostLoader: ImageLoader = {
+  name: "host",
+  load: async (key: string) => {
+    const host = process.env.HOST;
+    if (!host) {
+      throw new FatalError("Host must be defined!");
+    }
+    const url = `https://${host}${key}`;
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new FatalError(`Failed to fetch image from ${url}`);
+    }
+    if (!response.body) {
+      throw new FatalError("No body in response");
+    }
+    const body = Readable.fromWeb(response.body as ReadableStream<Uint8Array>);
+    const contentType = response.headers.get("content-type") ?? "image/jpeg";
+    const cacheControl =
+      response.headers.get("cache-control") ??
+      "private, max-age=0, must-revalidate";
+    return {
+      body,
+      contentType,
+      cacheControl,
+    };
+  },
+};
+
+export default hostLoader;

packages/open-next/src/overrides/imageLoader/s3.ts

@@ -0,0 +1,46 @@
+import { Readable } from "node:stream";
+
+import { GetObjectCommand, S3Client } from "@aws-sdk/client-s3";
+import { ImageLoader } from "types/open-next";
+import { FatalError } from "utils/error";
+
+import { awsLogger } from "../../adapters/logger";
+
+const { BUCKET_NAME, BUCKET_KEY_PREFIX } = process.env;
+
+function ensureBucketExists() {
+  if (!BUCKET_NAME) {
+    throw new Error("Bucket name must be defined!");
+  }
+}
+
+const s3Loader: ImageLoader = {
+  name: "s3",
+  load: async (key: string) => {
+    const s3Client = new S3Client({ logger: awsLogger });
+
+    ensureBucketExists();
+    const keyPrefix = BUCKET_KEY_PREFIX?.replace(/^\/|\/$/g, "");
+    const response = await s3Client.send(
+      new GetObjectCommand({
+        Bucket: BUCKET_NAME,
+        Key: keyPrefix
+          ? keyPrefix + "/" + key.replace(/^\//, "")
+          : key.replace(/^\//, ""),
+      }),
+    );
+    const body = response.Body as Readable | undefined;
+
+    if (!body) {
+      throw new FatalError("No body in S3 response");
+    }
+
+    return {
+      body: body,
+      contentType: response.ContentType,
+      cacheControl: response.CacheControl,
+    };
+  },
+};
+
+export default s3Loader;

packages/open-next/src/plugins/resolve.ts

@@ -3,6 +3,8 @@ import { readFileSync } from "node:fs";
 import { Plugin } from "esbuild";
 import type {
   DefaultOverrideOptions,
+  ImageLoader,
+  IncludedImageLoader,
   LazyLoadedOverride,
   OverrideOptions,
 } from "types/open-next";
@@ -16,6 +18,7 @@ export interface IPluginSettings {
     tagCache?: OverrideOptions["tagCache"];
     queue?: OverrideOptions["queue"];
     incrementalCache?: OverrideOptions["incrementalCache"];
+    imageLoader?: LazyLoadedOverride<ImageLoader> | IncludedImageLoader;
   };
   fnName?: string;
 }
@@ -43,6 +46,7 @@ export function openNextResolvePlugin({
       logger.debug(`OpenNext Resolve plugin for ${fnName}`);
       build.onLoad({ filter: /core\/resolve.js/g }, async (args) => {
         let contents = readFileSync(args.path, "utf-8");
+        //TODO: refactor this. Every override should be at the same place so we can generate this dynamically
         if (overrides?.wrapper) {
           contents = contents.replace(
             "../wrappers/aws-lambda.js",
@@ -85,6 +89,15 @@ export function openNextResolvePlugin({
             )}.js`,
           );
         }
+        if (overrides?.imageLoader) {
+          contents = contents.replace(
+            "../overrides/imageLoader/s3.js",
+            `../overrides/imageLoader/${getOverrideOrDefault(
+              overrides.imageLoader,
+              "s3",
+            )}.js`,
+          );
+        }
         return {
           contents,
         };

packages/open-next/src/types/open-next.ts

@@ -120,6 +120,8 @@ export type IncludedIncrementalCache = "s3" | "s3-lite";
 
 export type IncludedTagCache = "dynamodb" | "dynamodb-lite";
 
+export type IncludedImageLoader = "s3" | "host";
+
 export interface DefaultOverrideOptions<
   E extends BaseEventOrResult = InternalEvent,
   R extends BaseEventOrResult = InternalResult,
@@ -287,7 +289,11 @@ export interface OpenNextConfig {
    * Supports only node runtime
    */
   imageOptimization?: DefaultFunctionOptions & {
-    loader?: "s3" | LazyLoadedOverride<ImageLoader>;
+    /**
+     * The image loader is used to load the image from the source.
+     * @default "s3"
+     */
+    loader?: IncludedImageLoader | LazyLoadedOverride<ImageLoader>;
     /**
      * @default "arm64"
      */