Adds ability to use images from public folder (#6)

Author: ofhouse

.vscode/launch.json

@@ -22,6 +22,7 @@
         "--inspect-brk",
         "${workspaceRoot}/node_modules/.bin/jest",
         "--runInBand",
+        "--testTimeout=60000",
         "${file}"
       ],
       "console": "integratedTerminal",

README.md

@@ -18,6 +18,78 @@ This module is currently under active development.
 
 ## Usage
 
+### 1. Deploy the module to AWS
+
+Initialize the module by creating a `main.tf` file with the following content (you can place the file in the same directory where your Next.js project is located):
+
+```tf
+# main.tf
+
+terraform {
+  required_providers {
+    aws = {
+      source  = "hashicorp/aws"
+      version = "~> 3.0"
+    }
+  }
+}
+
+# Main AWS region where the resources should be created in
+# Should be close to where your Next.js deployment is located
+provider "aws" {
+  region = "us-east-1"
+}
+
+module "next_image_optimizer" {
+  source = "dealmore/next-js-image-optimization/aws"
+
+  domains = ["example.com", "sub.example.com"]
+}
+
+output "domain" {
+  value = module.next_image_optimizer.cloudfront_domain_name
+}
+```
+
+Then run Terraform to deploy the image optimiziation module to your AWS account:
+
+```sh
+terraform init  # Only needed on the first time running Terraform
+
+terraform plan  # (Optional) See what resources Terraform will create
+terraform apply # Deploy the image optimizer module to your AWS account
+```
+
+After Terraform has successfully created all resources in your AWS account, you should see the following output on the terminal:
+
+```sh
+> Apply complete!
+>
+> Outputs:
+>
+> domain = "<distribution-id>.cloudfront.net"
+```
+
+You should save the `<distribution-id>.cloudfront.net` output somewhere since you need it in the next step.
+
+### 2. Adjust Next.js config
+
+In your Next.js project, open or create the `next.config.js` file and add the following lines (Remember to replace `<distribution-id>` with the output from the previous step):
+
+```diff
+// next.config.js
+
+module.exports = {
++  images: {
++    path: 'https://<distribution-id>.cloudfront.net/_next/image'
++  },
+}
+```
+
+## Examples
+
+- [Next.js + Vercel](https://github.com/dealmore/terraform-aws-next-js-image-optimization/tree/main/examples/with-next-js) - Use the image optimizer together with a Next.js app deployed on Vercel.
+
 ## Versioning
 
 We internally rely on the Next.js image optimizer, so every version we publish follows the versioning schema of the [Next.js package](https://www.npmjs.com/package/next).

examples/with-next-js/README.md

@@ -56,16 +56,18 @@ After Terraform has successfully created all resources in your AWS account, you
 > domain = "<distribution-id>.cloudfront.net"
 ```
 
-You should save the `<distribution-id>.cloudfront.net` output somewhere since you will need it in the next step.
+You should save the `<distribution-id>.cloudfront.net` output somewhere since you need it in the next step.
 
 ## 2. Adjust Next.js config
 
 In your Next.js project, open or create the `next.config.js` file and add the following lines (Remember to replace `<distribution-id>` with the output from the previous step):
 
 ```diff
+// next.config.js
+
 module.exports = {
 +  images: {
-+    path: 'https://<distribution-id>.cloudfront.net/_next/image/'
++    path: 'https://<distribution-id>.cloudfront.net/_next/image'
 +  },
 }
 ```
@@ -85,4 +87,4 @@ vercel
 ---
 
 Now you are all set!  
-You can now visit your Next.js app in browser and the assets should be delivered by the CloudFront distribution.
+You can now visit your Next.js app in browser and the images should be delivered by the CloudFront distribution.

examples/with-next-js/next.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   images: {
     domains: ['assets.vercel.com'],
-    path: 'https://<distribution-id>.cloudfront.net/_next/image/',
+    path: 'https://<distribution-id>.cloudfront.net/_next/image',
   },
 };

lib/handler.ts

@@ -10,6 +10,7 @@ import {
 import { Writable } from 'stream';
 
 import { imageOptimizer } from './image-optimizer';
+import { normalizeHeaders } from './normalized-headers';
 
 let domains = [];
 try {
@@ -28,7 +29,7 @@ export async function handler(
   event: APIGatewayProxyEventV2
 ): Promise<APIGatewayProxyStructuredResultV2> {
   const reqMock: any = {
-    headers: event.headers,
+    headers: normalizeHeaders(event.headers),
     method: event.requestContext.http.method,
     url: `/?${event.rawQueryString}`,
   };

lib/image-optimizer.ts

@@ -2,7 +2,6 @@ import { IncomingMessage, ServerResponse } from 'http';
 import { imageOptimizer as nextImageOptimizer } from 'next/dist/next-server/server/image-optimizer';
 import { ImageConfig } from 'next/dist/next-server/server/image-config';
 import nodeFetch, { RequestInfo, RequestInit } from 'node-fetch';
-
 import { UrlWithParsedQuery } from 'url';
 import Server from 'next/dist/next-server/server/next-server';
 
@@ -34,8 +33,41 @@ async function imageOptimizer(
       images: imageConfig,
     },
     distDir: '/tmp',
-    getRequestHandler: () => () => {
-      // TODO
+    getRequestHandler: () => async (
+      { headers }: IncomingMessage,
+      res: ServerResponse,
+      url: UrlWithParsedQuery
+    ) => {
+      // TODO: When deployed together with Terraform Next.js we can use
+      // AWS SDK here to fetch the image directly from S3 instead of
+      // using node - fetch
+
+      if (headers.referer) {
+        let upstreamBuffer: Buffer;
+        let upstreamType: string | null;
+
+        const { referer } = headers;
+        const trimmedReferer = referer.endsWith('/')
+          ? referer.substring(0, referer.length - 1)
+          : referer;
+        const origin = `${trimmedReferer}${url.href}`;
+        const upstreamRes = await nodeFetch(origin);
+
+        if (!upstreamRes.ok) {
+          throw new Error(`Could not fetch image from ${origin}`);
+        }
+
+        res.statusCode = upstreamRes.status;
+        upstreamBuffer = Buffer.from(await upstreamRes.arrayBuffer());
+        upstreamType = upstreamRes.headers.get('Content-Type');
+        originCacheControl = upstreamRes.headers.get('Cache-Control');
+
+        if (upstreamType) {
+          res.setHeader('Content-Type', upstreamType);
+        }
+
+        res.end(upstreamBuffer);
+      }
     },
   } as unknown) as Server;
 

lib/normalized-headers.ts

@@ -0,0 +1,14 @@
+import { IncomingHttpHeaders } from 'http';
+
+/**
+ * Normalizes the headers from API Gateway 2.0 format
+ */
+export function normalizeHeaders(headers: Record<string, string>) {
+  const _headers: IncomingHttpHeaders = {};
+
+  for (const [key, value] of Object.entries(headers)) {
+    _headers[key.toLocaleLowerCase()] = value;
+  }
+
+  return _headers;
+}

main.tf

@@ -64,7 +64,7 @@ module "api_gateway" {
   create_api_domain_name = false
 
   integrations = {
-    "GET /_next/image" = {
+    "GET /_next/{proxy+}" = {
       lambda_arn             = module.image_optimizer.this_lambda_function_arn
       payload_format_version = "2.0"
       timeout_milliseconds   = var.lambda_timeout * 1000

package.json

@@ -13,7 +13,7 @@
     "test:e2e": "jest --testTimeout=60000 e2e.*"
   },
   "devDependencies": {
-    "@dealmore/sammy": "^1.0.0",
+    "@dealmore/sammy": "^1.1.0",
     "@types/jest": "^26.0.20",
     "@types/mime": "^2.0.3",
     "@types/node": "^12.0.0",