opennextjs-azure 0.1.1 → 0.1.3

package/dist/deploy.js

@@ -4,7 +4,7 @@ import { fileURLToPath } from 'node:url';
 import { exec } from 'node:child_process';
 import { promisify } from 'node:util';
 import { build as build$1 } from '@opennextjs/aws/build.js';
-import fs$1 from 'node:fs';
+import fs$1, { existsSync } from 'node:fs';
 import readline from 'node:readline';
 
 const execAsync$3 = promisify(exec);
@@ -61,6 +61,42 @@ async function scaffoldProject(targetDir, options = {}) {
   });
   await execAsync$3("pnpm install", { cwd: targetDir });
   console.log("Dependencies installed\n");
+  const pagePath = path.join(targetDir, srcDir ? "src/app/page.tsx" : "app/page.tsx");
+  let pageContent = await fs.readFile(pagePath, "utf-8");
+  pageContent = pageContent.replace(
+    /<Image className="dark:invert" src="\/next\.svg" alt="Next\.js logo" width=\{180\} height=\{38\} priority \/>/,
+    `<div className="flex items-center gap-4">
+                    <Image className="dark:invert" src="/next.svg" alt="Next.js logo" width={180} height={38} priority />
+                    <span className="text-2xl text-gray-400 dark:text-gray-600">+</span>
+                    <Image src="/azure.png" alt="Azure logo" width={38} height={38} priority />
+                </div>`
+  );
+  pageContent = pageContent.replace(
+    /href="https:\/\/vercel\.com\/new[^"]*"/,
+    'href="https://github.com/zpg6/opennextjs-azure"'
+  );
+  pageContent = pageContent.replace(
+    /className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background/,
+    'className="rounded-full border border-solid border-blue-400 transition-colors flex items-center justify-center bg-blue-500/10'
+  );
+  pageContent = pageContent.replace(/hover:bg-\[#383838\] dark:hover:bg-\[#ccc\]/, "hover:bg-blue-500/20");
+  pageContent = pageContent.replace(
+    /<Image className="dark:invert" src="\/vercel\.svg" alt="Vercel logomark" width=\{20\} height=\{20\} \/>/,
+    '<Image src="/azure.png" alt="Azure logomark" width={20} height={20} />'
+  );
+  pageContent = pageContent.replace(/>Deploy now</, ">Deploy to Azure<");
+  await fs.writeFile(pagePath, pageContent);
+  const publicDir = path.join(targetDir, "public");
+  const azureLogoSource = path.join(
+    path.dirname(new URL(import.meta.url).pathname),
+    "../../examples/basic-app/public/azure.png"
+  );
+  const azureLogoDest = path.join(publicDir, "azure.png");
+  try {
+    await fs.copyFile(azureLogoSource, azureLogoDest);
+  } catch (error) {
+    console.warn("Warning: Could not copy Azure logo. You can add it manually to public/azure.png");
+  }
   console.log("Creating open-next.config.ts...");
   const openNextConfig = `// @ts-nocheck
 export default {
@@ -78,6 +114,17 @@ export default {
     middleware: {
         external: false,
     },
+    imageOptimization: {
+        loader: () => import("./node_modules/opennextjs-azure/dist/overrides/imageLoader/azure-blob.js").then(m => m.default),
+        override: {
+            wrapper: () => import("./node_modules/opennextjs-azure/dist/adapters/wrappers/azure-image-optimization.js").then(m => m.default),
+            converter: () => import("./node_modules/opennextjs-azure/dist/adapters/converters/azure-http.js").then(m => m.default),
+        },
+        install: {
+            packages: ["@img/sharp-linux-x64@0.33.5", "sharp@0.33.5"],
+            additionalArgs: "--force --ignore-scripts",
+        },
+    },
     buildOutputPath: ".",
     appPath: ".",
 };
@@ -166,6 +213,19 @@ function getAzureConfigTemplate() {
 `;
 }
 
+const colors$1 = {
+  green: "\x1B[32m",
+  red: "\x1B[31m",
+  yellow: "\x1B[33m",
+  reset: "\x1B[0m"
+};
+function greenCheck() {
+  return `${colors$1.green}\u2713${colors$1.reset}`;
+}
+function redX() {
+  return `${colors$1.red}\u2717${colors$1.reset}`;
+}
+
 const execAsync$2 = promisify(exec);
 async function prepareFunctions() {
   const functionsDir = path.join(process.cwd(), ".open-next/server-functions/default");
@@ -240,8 +300,49 @@ async function prepareFunctions() {
     entryPoint: "handler"
   };
   await fs.writeFile(path.join(functionDir, "function.json"), JSON.stringify(functionJson, null, 2));
-  console.log("Azure Functions metadata created");
-  console.log("\nInstalling minimal runtime dependencies...");
+  const imageOptDir = path.join(process.cwd(), ".open-next/image-optimization-function");
+  try {
+    await fs.access(imageOptDir);
+    console.log("  Adding image optimization function...");
+    const imageFunctionDir = path.join(functionsDir, "image-optimization");
+    await fs.mkdir(imageFunctionDir, { recursive: true });
+    const imageFunctionJson = {
+      bindings: [
+        {
+          authLevel: "anonymous",
+          type: "httpTrigger",
+          direction: "in",
+          name: "req",
+          methods: ["get", "head"],
+          route: "_next/image"
+        },
+        {
+          type: "http",
+          direction: "out",
+          name: "res"
+        }
+      ],
+      scriptFile: "../index-image.mjs",
+      entryPoint: "handler"
+    };
+    await fs.writeFile(path.join(imageFunctionDir, "function.json"), JSON.stringify(imageFunctionJson, null, 2));
+    await fs.copyFile(path.join(imageOptDir, "index.mjs"), path.join(functionsDir, "index-image.mjs"));
+    await fs.cp(path.join(imageOptDir, ".next"), path.join(functionsDir, ".next"), {
+      recursive: true,
+      force: false
+    });
+    try {
+      await fs.copyFile(
+        path.join(imageOptDir, "open-next.config.mjs"),
+        path.join(functionsDir, "open-next.config.mjs")
+      );
+    } catch {
+    }
+    console.log(`  ${greenCheck()} Image optimization function added`);
+  } catch {
+  }
+  console.log(`  ${greenCheck()} Azure Functions metadata created`);
+  console.log("Installing minimal runtime dependencies...");
   try {
     const originalPackageJson = JSON.parse(await fs.readFile(path.join(functionsDir, "package.json"), "utf-8"));
     const minimalPackageJson = {
@@ -260,22 +361,33 @@ async function prepareFunctions() {
     await execAsync$2("npm install --production --no-package-lock --loglevel=error", {
       cwd: functionsDir
     });
-    console.log("Runtime dependencies installed\n");
+    console.log(`  ${greenCheck()} Runtime dependencies installed`);
   } catch (error) {
     console.error("Failed to install dependencies:", error.message);
     throw error;
   }
+  const imageOptDir2 = path.join(process.cwd(), ".open-next/image-optimization-function");
+  try {
+    await fs.access(imageOptDir2);
+    console.log("Installing Sharp with Linux x64 binaries for image optimization...");
+    await execAsync$2(
+      "npm install --force sharp@0.33.5 @img/sharp-linux-x64@0.33.5 @img/sharp-libvips-linux-x64@1.0.4",
+      { cwd: functionsDir }
+    );
+    console.log(`  ${greenCheck()} Sharp with Linux x64 binaries installed`);
+  } catch (error) {
+  }
 }
 
 async function build(configPath) {
-  console.log("Building Next.js app for Azure...\n");
+  console.log("Building Next.js app for Azure...");
   const baseDir = process.cwd();
   const userConfigPath = configPath || "open-next.config.ts";
   const absoluteUserConfigPath = path.join(baseDir, userConfigPath);
   let resolvedConfigPath = userConfigPath;
   let tempConfigPath = null;
   if (!fs$1.existsSync(absoluteUserConfigPath)) {
-    console.log("No open-next.config.ts found, using default Azure configuration\n");
+    console.log("No open-next.config.ts found, using default Azure configuration");
     const { createRequire } = await import('node:module');
     const require = createRequire(import.meta.url);
     const packagePath = path.dirname(require.resolve("opennextjs-azure/package.json"));
@@ -313,18 +425,17 @@ export default {
     if (fs$1.existsSync(openNextPath)) {
       console.log("Cleaning previous build output...");
       fs$1.rmSync(openNextPath, { recursive: true, force: true });
-      console.log("Previous build cleaned\n");
+      console.log(`  ${greenCheck()} Previous build cleaned`);
     }
     console.log("Running OpenNext build...");
     const externals = ["@opennextjs/aws"].join(",");
     await build$1(resolvedConfigPath, externals);
-    console.log("OpenNext build complete\n");
     await prepareFunctions();
     console.log("Build completed successfully!");
-    console.log("\nOutput: .open-next/");
+    console.log("Output: .open-next/");
     console.log("  \u251C\u2500\u2500 server-functions/default  (Azure Functions app)");
-    console.log("  \u2514\u2500\u2500 assets                    (Static files)\n");
-    console.log("Next: opennextjs-azure deploy\n");
+    console.log("  \u2514\u2500\u2500 assets                    (Static files)");
+    console.log("Next: opennextjs-azure deploy");
   } catch (error) {
     console.error("Build failed:", error);
     process.exit(1);
@@ -350,8 +461,7 @@ async function deploy$1(options) {
     environment = "dev",
     skipInfrastructure = false
   } = options;
-  console.log(`Deploying ${appName} to Azure (${environment} environment)
-`);
+  console.log(`Deploying ${appName} to Azure (${environment} environment)`);
   try {
     await checkAzureCLI();
     await checkAzureLogin();
@@ -369,8 +479,7 @@ async function deploy$1(options) {
       console.log("Provisioning Azure infrastructure...");
       console.log(`  Resource Group: ${resourceGroup}`);
       console.log(`  Location: ${location}`);
-      console.log(`  Environment: ${environment}
-`);
+      console.log(`  Environment: ${environment}`);
       deploymentOutputs = await provisionInfrastructure({
         appName,
         resourceGroup,
@@ -378,20 +487,17 @@ async function deploy$1(options) {
         environment,
         applicationInsights: options.applicationInsights ?? false
       });
-      console.log(`${colors.green}\u2713${colors.reset} Infrastructure ready
-`);
+      console.log(`  ${greenCheck()} Infrastructure ready`);
     } else {
-      console.log("Skipping infrastructure provisioning\n");
+      console.log("Skipping infrastructure provisioning");
     }
     console.log("Uploading static assets...");
     await uploadStaticAssets(appName, resourceGroup);
-    console.log(`${colors.green}\u2713${colors.reset} Assets uploaded
-`);
+    console.log(`  ${greenCheck()} Assets uploaded`);
     console.log("Deploying Function App...");
     const functionAppName = deploymentOutputs?.functionApp || `${appName}-func-${environment}`;
     await deployFunctionApp(functionAppName, resourceGroup);
-    console.log(`${colors.green}\u2713${colors.reset} Function App deployed
-`);
+    console.log(`  ${greenCheck()} Function App deployed`);
     await performPostflightChecks(
       resourceGroup,
       functionAppName,
@@ -401,7 +507,7 @@ async function deploy$1(options) {
     );
   } catch (error) {
     console.error(`
-${colors.red}\u2717${colors.reset} Deployment failed: ${error.message}`);
+${redX()} Deployment failed: ${error.message}`);
     process.exit(1);
   }
 }
@@ -421,7 +527,13 @@ async function checkAzureLogin() {
   }
 }
 async function checkRequiredProviders(applicationInsights) {
-  const requiredProviders = ["Microsoft.Web", "Microsoft.Storage", "Microsoft.Compute", "Microsoft.Quota"];
+  const requiredProviders = [
+    "Microsoft.Web",
+    "Microsoft.Storage",
+    "Microsoft.Compute",
+    "Microsoft.Quota",
+    "Microsoft.ServiceLinker"
+  ];
   if (applicationInsights) {
     requiredProviders.push("Microsoft.AlertsManagement");
   }
@@ -432,9 +544,9 @@ async function checkRequiredProviders(applicationInsights) {
     );
     const state = stdout.trim();
     if (state !== "Registered") {
-      console.log(`  Registering ${provider}...`);
+      console.log(`Registering ${provider}...`);
       await execAsync$1(`az provider register --namespace ${provider} --wait`);
-      console.log(`  ${colors.green}\u2713${colors.reset} ${provider} registered`);
+      console.log(`  ${greenCheck()} ${provider} registered`);
     }
   }
 }
@@ -459,21 +571,16 @@ async function checkQuotaAvailability(location, environment) {
     };
     const requiredSku = skuMap[environment];
     if (requiredSku.quota === 0) {
-      console.error(
-        `
-${colors.red}\u2717${colors.reset} Quota Error: No quota available for ${environment} environment`
-      );
+      console.error(`
+${redX()} Quota Error: No quota available for ${environment} environment`);
       console.error(`  Required: ${requiredSku.name}`);
-      console.error(`  Current Limit: ${requiredSku.quota}
-`);
+      console.error(`  Current Limit: ${requiredSku.quota}`);
       if (y1Limit > 0 && environment !== "dev") {
         console.log(`  Suggestion: Deploy to dev environment instead (has quota: ${y1Limit})`);
-        console.log(`  Command: opennextjs-azure deploy --environment dev
-`);
+        console.log(`  Command: opennextjs-azure deploy --environment dev`);
       } else if (ep1Limit > 0 && environment === "dev") {
         console.log(`  Suggestion: Deploy to prod environment instead (has quota: ${ep1Limit})`);
-        console.log(`  Command: opennextjs-azure deploy --environment prod
-`);
+        console.log(`  Command: opennextjs-azure deploy --environment prod`);
       } else {
         console.log(`  To request quota increase:`);
         console.log(
@@ -486,7 +593,7 @@ ${colors.red}\u2717${colors.reset} Quota Error: No quota available for ${environ
       }
       throw new Error(`No ${requiredSku.type} quota available for ${environment} environment in ${location}`);
     }
-    console.log(`  ${colors.green}\u2713${colors.reset} ${requiredSku.name}: ${requiredSku.quota} instances available`);
+    console.log(`  ${greenCheck()} ${requiredSku.name}: ${requiredSku.quota} instances available`);
     if (environment === "dev" && ep1Limit > 0) {
       console.log(
         `  Premium tier also available (${ep1Limit} instances) - use --environment prod for better performance`
@@ -511,7 +618,8 @@ async function checkAzureSubscriptionPermissions() {
     if (account.State !== "Enabled") {
       throw new Error(`Subscription "${account.Name}" is not enabled (state: ${account.State})`);
     }
-    console.log(`  ${colors.green}\u2713${colors.reset} Subscription: ${account.Name} (${account.State})`);
+    console.log(`  ${greenCheck()} Subscription: ${account.Name} (${account.State})
+`);
   } catch (error) {
     throw new Error(`Failed to verify subscription permissions: ${error.message}`);
   }
@@ -532,13 +640,14 @@ async function checkLocation(location) {
 Available regions: ${available.trim().split("\n").slice(0, 10).join(", ")}`
       );
     }
-    console.log(`  ${colors.green}\u2713${colors.reset} Region: ${locations[0].DisplayName} (${location})`);
+    console.log(`  ${greenCheck()} Region: ${locations[0].DisplayName} (${location})`);
   } catch (error) {
     if (error.message.includes("Invalid location")) {
       throw error;
     }
     console.warn(
-      `  ${colors.yellow}Warning:${colors.reset} Could not validate location (continuing anyway): ${error.message}`
+      `  ${colors.yellow}Warning:${colors.reset} Could not validate location (continuing anyway): ${error.message}
+`
     );
   }
 }
@@ -562,7 +671,7 @@ Run 'opennextjs-azure build' to regenerate`
       );
     }
   }
-  console.log(`  ${colors.green}\u2713${colors.reset} Build output structure valid`);
+  console.log(`  ${greenCheck()} Build output structure valid`);
 }
 async function checkExistingInfrastructure(appName, resourceGroup, environment) {
   console.log("Checking existing infrastructure...");
@@ -593,10 +702,10 @@ async function checkExistingInfrastructure(appName, resourceGroup, environment)
       "Cannot skip infrastructure provisioning - required resources missing:\n" + errors.map((e) => `   \u2022 ${e}`).join("\n") + "\n\nRun without --skip-infrastructure to provision resources first."
     );
   }
-  console.log(`  ${colors.green}\u2713${colors.reset} All required infrastructure exists`);
+  console.log(`  ${greenCheck()} All required infrastructure exists`);
 }
 async function performPostflightChecks(resourceGroup, functionAppName, location, environment, applicationInsights) {
-  console.log("Performing post-deployment verification...\n");
+  console.log("Performing post-deployment verification...");
   try {
     const { stdout: subIdStdout } = await execAsync$1("az account show --query id -o tsv");
     const subscriptionId = subIdStdout.trim();
@@ -615,19 +724,19 @@ async function performPostflightChecks(resourceGroup, functionAppName, location,
     const functionUrl = `https://${funcApp.DefaultHostName}`;
     const assetsUrl = `https://${storage.Name}.blob.core.windows.net/assets`;
     const portalUrl = `https://portal.azure.com/#@/resource/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}`;
+    console.log("\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550");
+    console.log(`${greenCheck()} Deployment Complete!`);
     console.log("\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550");
-    console.log(`${colors.green}\u2713${colors.reset} Deployment Complete!`);
-    console.log("\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550");
-    console.log("\nApplication:");
+    console.log("Application:");
     console.log(`  App URL:          ${functionUrl}`);
     console.log(`  Assets URL:       ${assetsUrl}`);
     console.log(`  Status:           ${funcApp.State}`);
     console.log(`  Type:             ${funcApp.Kind}`);
-    console.log("\nInfrastructure:");
+    console.log("Infrastructure:");
     console.log(`  Resource Group:   ${resourceGroup}`);
     console.log(`  Region:           ${location}`);
     console.log(`  Environment:      ${environment}`);
-    console.log("\nConfiguration:");
+    console.log("Configuration:");
     console.log(`  App Service Plan: ${plan.Tier} (${plan.Sku})`);
     console.log(`  Storage Account:  ${storage.Name} (${storage.Sku})`);
     console.log(`  Capacity:         ${plan.Capacity || 1} instance(s)`);
@@ -642,9 +751,7 @@ async function performPostflightChecks(resourceGroup, functionAppName, location,
       }
     }
     console.log("\nQuick Actions:");
-    console.log(
-      `  View logs:        az functionapp log tail --name ${functionAppName} --resource-group ${resourceGroup}`
-    );
+    console.log(`  View logs:        npx opennextjs-azure@latest tail`);
     console.log(`  Open in portal:   ${portalUrl}`);
     console.log("\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n");
     if (funcApp.State !== "Running") {
@@ -658,7 +765,7 @@ async function performPostflightChecks(resourceGroup, functionAppName, location,
       `${colors.yellow}Warning:${colors.reset} Could not retrieve all deployment details: ${error.message}`
     );
     console.log(`
-${colors.green}\u2713${colors.reset} Deployment completed, but some post-flight checks failed.`);
+${greenCheck()} Deployment completed, but some post-flight checks failed.`);
     console.log(`  View resources: az resource list --resource-group ${resourceGroup} -o table
 `);
   }
@@ -682,15 +789,36 @@ async function provisionInfrastructure(options) {
   );
   return JSON.parse(stdout);
 }
+async function patchCSSForBlobStorage(assetsPath) {
+  const cssPath = path.join(assetsPath, "_next/static/css");
+  if (!existsSync(cssPath)) {
+    return;
+  }
+  const files = await fs.readdir(cssPath);
+  const cssFiles = files.filter((f) => f.endsWith(".css"));
+  for (const file of cssFiles) {
+    const filePath = path.join(cssPath, file);
+    let content = await fs.readFile(filePath, "utf-8");
+    content = content.replace(/url\(\s*(['"]?)(\/_next\/static\/media\/[^'")\s]+)\1\s*\)/g, "url($1/assets$2$1)");
+    await fs.writeFile(filePath, content, "utf-8");
+  }
+}
 async function uploadStaticAssets(appName, resourceGroup) {
   const assetsPath = path.join(process.cwd(), ".open-next/assets");
+  await patchCSSForBlobStorage(assetsPath);
   const { stdout } = await execAsync$1(
     `az storage account list --resource-group ${resourceGroup} --query "[0].name" -o tsv`
   );
   const storageAccountName = stdout.trim();
   await execAsync$1(
-    `az storage blob upload-batch       --account-name ${storageAccountName}       --destination assets       --source ${assetsPath}       --overwrite`
+    `az storage blob upload-batch       --account-name ${storageAccountName}       --destination assets       --source ${assetsPath}       --content-cache-control "public, max-age=0, must-revalidate"       --overwrite`
   );
+  const nextStaticPath = path.join(assetsPath, "_next/static");
+  if (existsSync(nextStaticPath)) {
+    await execAsync$1(
+      `az storage blob upload-batch         --account-name ${storageAccountName}         --destination assets         --source ${nextStaticPath}         --destination-path _next/static         --content-cache-control "public, max-age=31536000, immutable"         --overwrite`
+    );
+  }
 }
 async function deployFunctionApp(functionAppName, resourceGroup) {
   const functionsPath = path.join(process.cwd(), ".open-next/server-functions/default");
@@ -832,4 +960,4 @@ async function getResourceGroupLocation(resourceGroup) {
   }
 }
 
-export { build as b, deploy as d, init as i };
+export { build as b, deploy as d, greenCheck as g, init as i, promptForInput as p, redX as r };

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-export { A as AzureConfig, a as AzureDeploymentTarget, d as defineAzureConfig } from './shared/opennextjs-azure.d619537c.mjs';
+export { A as AzureConfig, a as AzureDeploymentTarget, d as defineAzureConfig } from './shared/opennextjs-azure.279bd73d.mjs';
 export { default as azureBlobCache } from './overrides/incrementalCache/azure-blob.mjs';
 export { default as azureTableTagCache } from './overrides/tagCache/azure-table.mjs';
 export { default as azureQueueRevalidation } from './overrides/queue/azure-queue.mjs';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { A as AzureConfig, a as AzureDeploymentTarget, d as defineAzureConfig } from './shared/opennextjs-azure.d619537c.js';
+export { A as AzureConfig, a as AzureDeploymentTarget, d as defineAzureConfig } from './shared/opennextjs-azure.279bd73d.js';
 export { default as azureBlobCache } from './overrides/incrementalCache/azure-blob.js';
 export { default as azureTableTagCache } from './overrides/tagCache/azure-table.js';
 export { default as azureQueueRevalidation } from './overrides/queue/azure-queue.js';

package/dist/infrastructure/main.bicep

@@ -96,6 +96,14 @@ resource storageAccount 'Microsoft.Storage/storageAccounts@2023-01-01' = {
         publicAccess: 'Blob'
       }
     }
+
+    // Container for optimized images (public CDN access)
+    resource optimizedImagesContainer 'containers' = {
+      name: 'optimized-images'
+      properties: {
+        publicAccess: 'Blob'
+      }
+    }
   }
 
   // Table service for tag cache
@@ -194,6 +202,10 @@ resource functionApp 'Microsoft.Web/sites@2023-01-01' = {
           name: 'AZURE_QUEUE_NAME'
           value: queueName
         }
+        {
+          name: 'AZURE_IMAGE_OPTIMIZATION_CACHE'
+          value: 'true'
+        }
         {
           name: 'NODE_ENV'
           value: 'production'

package/dist/overrides/imageLoader/azure-blob.d.mts

@@ -0,0 +1,5 @@
+import { ImageLoader } from '@opennextjs/aws/types/overrides.js';
+
+declare const azureBlobImageLoader: ImageLoader;
+
+export { azureBlobImageLoader as default };

package/dist/overrides/imageLoader/azure-blob.d.ts

@@ -0,0 +1,5 @@
+import { ImageLoader } from '@opennextjs/aws/types/overrides.js';
+
+declare const azureBlobImageLoader: ImageLoader;
+
+export { azureBlobImageLoader as default };

package/dist/overrides/imageLoader/azure-blob.js

@@ -0,0 +1,37 @@
+import { Readable } from 'node:stream';
+
+const { AZURE_STORAGE_ACCOUNT_NAME } = process.env;
+const azureBlobImageLoader = {
+  name: "azure-blob",
+  load: async (key) => {
+    if (!AZURE_STORAGE_ACCOUNT_NAME) {
+      throw new Error("AZURE_STORAGE_ACCOUNT_NAME must be defined");
+    }
+    const cleanKey = key.replace(/^\//, "");
+    const blobUrl = `https://${AZURE_STORAGE_ACCOUNT_NAME}.blob.core.windows.net/assets/${cleanKey}`;
+    try {
+      const response = await fetch(blobUrl);
+      if (response.status === 404) {
+        throw new Error(`Image not found in blob storage: ${cleanKey}`);
+      }
+      if (!response.ok) {
+        throw new Error(`Failed to fetch image. Status: ${response.status}`);
+      }
+      if (!response.body) {
+        throw new Error("No body in fetch response");
+      }
+      const arrayBuffer = await response.arrayBuffer();
+      const buffer = Buffer.from(arrayBuffer);
+      const body = Readable.from(buffer);
+      return {
+        body,
+        contentType: response.headers.get("content-type") ?? void 0,
+        cacheControl: response.headers.get("cache-control") ?? void 0
+      };
+    } catch (error) {
+      throw new Error(`Failed to load image from Azure Blob: ${error.message}`);
+    }
+  }
+};
+
+export { azureBlobImageLoader as default };

package/dist/overrides/imageOptimization/azure-cached.d.mts

@@ -0,0 +1,6 @@
+import { InternalEvent, InternalResult } from '@opennextjs/aws/types/open-next.js';
+import { OpenNextHandler } from '@opennextjs/aws/types/overrides.js';
+
+declare function createCachedImageOptimizationHandler(defaultHandler: OpenNextHandler<InternalEvent, InternalResult>): OpenNextHandler<InternalEvent, InternalResult>;
+
+export { createCachedImageOptimizationHandler };

package/dist/overrides/imageOptimization/azure-cached.d.ts

@@ -0,0 +1,6 @@
+import { InternalEvent, InternalResult } from '@opennextjs/aws/types/open-next.js';
+import { OpenNextHandler } from '@opennextjs/aws/types/overrides.js';
+
+declare function createCachedImageOptimizationHandler(defaultHandler: OpenNextHandler<InternalEvent, InternalResult>): OpenNextHandler<InternalEvent, InternalResult>;
+
+export { createCachedImageOptimizationHandler };