ref(rollup): bundling redefined, correctly generate standalone (#29)

* refactor(rollup): properly bundle different entry points, upgrade to node18

* ref(layers): nextjs layer to be pre-build so it can be used by server and image handler

* doc: polished and updated documentation

* doc: improved description of the project

Co-authored-by: Jan Soukup <[email protected]>

Author: sladg

Diff for: .autorc

@@ -1,25 +1,35 @@
 # NextJS Lambda Utils
 
-This is a set of utils needed for deploying NextJS into AWS Lambda.
-It includes a wrapper for `next/server/image-optimizer` allowing to use S3.
-And includes CLI and custom server handler to integrate with ApiGw.
+This is a project allowing to deploy Next applications (standalone options turned on) to AWS Lambda without hassle.
+
+This is an alternative to existing Lambda@Edge implementation ([see](https://www.npmjs.com/package/@sls-next/lambda-at-edge)) as it has too many limitations (primarily inability to use env vars) and deployments take too long.
+
+This library uses Cloudfront, S3, ApiGateway and Lambdas to deploy easily in seconds (hotswap supported).
+
 
 - [NextJS Lambda Utils](#nextjs-lambda-utils)
+  - [TL;DR](#tldr)
   - [Usage](#usage)
     - [next.config.js](#nextconfigjs)
     - [Server handler](#server-handler)
     - [Image handler](#image-handler)
     - [Via CDK](#via-cdk)
-    - [Sharp](#sharp)
+    - [Sharp layer](#sharp-layer)
+    - [Next layer](#next-layer)
   - [Packaging](#packaging)
     - [Server handler](#server-handler-1)
     - [Static assets](#static-assets)
 - [Versioning](#versioning)
   - [Guess](#guess)
   - [Shipit](#shipit)
-- [TODO](#todo)
 - [Disclaimer](#disclaimer)
 
+## TL;DR
+- In your NextJS project, set output to standalone.
+- Run `npx @sladg/nextjs-lambda pack`
+- Prepare CDK ([see](#via-cdk))
+- Run `cdk deploy`
+
 ## Usage
 
 We need to create 2 lambdas in order to use NextJS. First one is handling pages/api rendering, second is solving image optimization.
@@ -43,72 +53,68 @@ See:
 
 ### Server handler
 
-```
-next build
+This is a Lambda entrypoint to handle non-asset requests. We need a way to start Next in lambda-friendly way and translate ApiGateway event into typical HTTP event. This is handled by server-handler, which sits alongside of next's `server.js` in standalone output.
 
-npx @sladg/nextjs-lambda pack
-```
+### Image handler
 
-Create new lambda function with NODE_16 runtime in AWS.
+Lambda consumes Api Gateway requests, so we need to create ApiGw proxy (v2) that will trigger Lambda.
 
-```
-const dependenciesLayer = new LayerVersion(this, 'DepsLayer', {
-        code: Code.fromAsset(`next.out/dependenciesLayer.zip`),
-    })
-
-const requestHandlerFn = new Function(this, 'LambdaFunction', {
-      code: Code.fromAsset(`next.out/code.zip`, { followSymlinks: SymlinkFollowMode.NEVER }),
-      runtime: Runtime.NODEJS_16_X,
-      handler: 'server-handler.handler',
-      layers: [dependenciesLayer],
-      memorySize: 512,
-      timeout: Duration.seconds(10),
-    })
-```
+Lambda is designed to serve `_next/image*` route in NextJS stack and replaces the default handler so we can optimize caching and memory limits for page renders and image optimization.
 
-### Image handler
+### Via CDK
 
-Create new lambda function with NODE_16 runtime in AWS.
+See `NextStandaloneStack` construct in `lib/construct.ts`.
 
+You can easily create `cdk/app.ts` and use following code:
 ```
-const sharpLayer: LayerVersion
-const assetsBucket: Bucket
-
-const imageHandlerZip = require.resolve('@sladg/nextjs-lambda/image-handler/zip')
-
-const imageOptimizerFn = new Function(this, 'LambdaFunction', {
-      code: Code.fromAsset(imageHandlerZip),
-      runtime: Runtime.NODEJS_16_X,
-      handler: 'image-handler.handler',
-      layers: [sharpLayer],
-      memorySize: 1024,
-      timeout: Duration.seconds(15),
-      environment: {
-        S3_BUCKET_SOURCE: assetsBucket.bucketName
-      }
-    })
-```
+#!/usr/bin/env node
+import 'source-map-support/register'
+import * as cdk from 'aws-cdk-lib'
+import * as path from 'path'
 
-Lambda consumes Api Gateway requests, so we need to create ApiGw proxy (v2) that will trigger Lambda.
+import { NextStandaloneStack } from '@sladg/nextjs-lambda'
 
-Lambda is designed to serve `_next/image*` route in NextJS stack and replaces the default handler so we can optimize caching and memory limits for page renders and image optimization.
+const assetsZipPath = path.resolve(__dirname, '../next.out/assetsLayer.zip')
+const codeZipPath = path.resolve(__dirname, '../next.out/code.zip')
+const dependenciesZipPath = path.resolve(__dirname, '../next.out/dependenciesLayer.zip')
 
-### Via CDK
+const app = new cdk.App()
 
-See `NextStandaloneLambda` construct in `lib/construct.ts`.
-This is a complete definition which consumes output of `pack` CLI command. It requires 3 zips (assets, dependencies and code) and exposes get methods for all resources to provide a way to set custom routes, set environment variables, etc.
+new NextStandaloneStack(app, 'StandaloneNextjsStack-2', {
+	assetsZipPath,
+	codeZipPath,
+	dependenciesZipPath,
+})
+```
+
+This imports pre-made construct, you only need to worry about paths to outputed zip files from CLI `pack` command.
+
+> More granular CDK construct coming soon.
 
 
-### Sharp
+### Sharp layer
 
 Besides handler (wrapper) itself, underlying NextJS also requires sharp binaries.
 To build those, we use `npm install` with some extra parametes. Then we zip all sharp dependencies and compress it to easily importable zip file.
 
 ```
-const code = require.resolve('@sladg/nextjs-lambda/sharp-layer')
+import { sharpLayerZipPath } from '@sladg/nextjs-lambda'
+
+const sharpLayer = new LayerVersion(this, 'SharpDependenciesLayer', {
+  code: Code.fromAsset(sharpLayerZipPath)
+})
+```
+
+### Next layer
+
+To provide both image and server handlers with all depdencies (next is using `require.resolve` inside, so it cannot be bundled standalone for now).
+
+We pre-package this layer so it can be included in Lambda without hassle.
+```
+import { nextLayerZipPath } from '@sladg/nextjs-lambda'
 
-const sharpLayer = new LayerVersion(this, 'SharpLayer', {
-  code: Code.fromAsset(code)
+const nextLayer = new LayerVersion(this, 'NextDependenciesLayer', {
+  code: Code.fromAsset(nextLayerZipPath)
 })
 ```
 
@@ -147,6 +153,8 @@ Cloudfront paths used:
 - `_next/*`
 - `assets/*`
 
+Keep in minda, Cloudfront does not allow for multiple regex patterns in single origin, so using extensions to distinguish image/server handlers is not doable.
+
 # Versioning
 
 This package exposes two CLI functions intended to deal with versioning your application and releasing.
@@ -164,15 +172,6 @@ Similar to guess command, however, it automatically tags a commit on current bra
 Simply call `@sladg/next-lambda shipit` on any branch and be done.
 
 
-# TODO
-
-- Explain scripts used for packaging Next app,
-- Add CDK examples on how to set it up,
-- Export CDK contruct for simple plug-n-play use,
-- Use lib/index.ts as single entry and export all paths/functions from it (including zip paths).
-- Consider using \*.svg, \*.png, \*.jpeg etc. as routing rule for Cloudfront to distinguish between assets and pages.
-- Add command for guessing version bumps from git commits & keywords, existing solutions are horendously huge, we just need a simple version bumping.
-
 # Disclaimer
 
 At this point, advanced features were not tested with this setup. This includes:
@@ -184,3 +183,5 @@ At this point, advanced features were not tested with this setup. This includes:
 - custom babel configuration.
 
 I am looking for advanced projects implementing those features, so we can test them out! Reach out to me!
+
+

Diff for: README.md

@@ -35,7 +35,7 @@ program
 	.option(
 		'--handlerPath',
 		'Path to custom handler to be used to handle ApiGw events. By default this is provided for you.',
-		path.resolve(scriptDir, './../server-handler/index.js'),
+		path.resolve(scriptDir, './server-handler.js'),
 	)
 	.option(
 		'--outputFolder',
@@ -110,6 +110,12 @@ program
 					path: '**/*',
 					ignore: ['**/node_modules/**', '*.zip'],
 				},
+				{
+					// Ensure hidden files are included.
+					isGlob: true,
+					cwd: standaloneFolder,
+					path: '.*/**/*',
+				},
 				{
 					isFile: true,
 					path: handlerPath,

Diff for: lib/cli.ts

@@ -6,8 +6,9 @@ import { Code, Function, LayerVersion, Runtime } from 'aws-cdk-lib/aws-lambda'
 import { Bucket, BucketAccessControl } from 'aws-cdk-lib/aws-s3'
 import { BucketDeployment, Source } from 'aws-cdk-lib/aws-s3-deployment'
 import { Construct } from 'constructs'
+import packageJson from '../package.json'
 
-import { imageHandlerZipPath, sharpLayerZipPath } from './consts'
+import { imageHandlerZipPath, sharpLayerZipPath, nextLayerZipPath } from './consts'
 
 interface NextConstructProps extends StackProps {
 	customServerHandler?: string
@@ -17,6 +18,7 @@ interface NextConstructProps extends StackProps {
 
 	imageHandlerZipPath?: string
 	sharpLayerZipPath?: string
+	nextLayerZipPath?: string
 	codeZipPath: string
 	dependenciesZipPath: string
 	assetsZipPath: string
@@ -37,10 +39,21 @@ export class NextStandaloneStack extends Stack {
 		})
 
 		const sharpLayer = new LayerVersion(this, 'SharpLayer', {
-			code: Code.fromAsset(props.sharpLayerZipPath ?? sharpLayerZipPath, { assetHash: 'static', assetHashType: AssetHashType.CUSTOM }),
+			code: Code.fromAsset(props.sharpLayerZipPath ?? sharpLayerZipPath, {
+				assetHash: `static-sharp-${packageJson.version}`,
+				assetHashType: AssetHashType.CUSTOM,
+			}),
+		})
+
+		const nextLayer = new LayerVersion(this, 'NextLayer', {
+			code: Code.fromAsset(props.nextLayerZipPath ?? nextLayerZipPath, {
+				assetHash: `static-next-${packageJson.version}`,
+				assetHashType: AssetHashType.CUSTOM,
+			}),
 		})
 
 		const assetsBucket = new Bucket(this, 'NextAssetsBucket', {
+			// @NOTE: Considering not having public ACL.
 			publicReadAccess: true,
 			autoDeleteObjects: true,
 			removalPolicy: RemovalPolicy.DESTROY,
@@ -50,7 +63,7 @@ export class NextStandaloneStack extends Stack {
 			code: Code.fromAsset(props.codeZipPath, { followSymlinks: SymlinkFollowMode.NEVER }),
 			runtime: Runtime.NODEJS_16_X,
 			handler: props.customServerHandler ?? 'handler.handler',
-			layers: [depsLayer],
+			layers: [depsLayer, nextLayer],
 			// No need for big memory as image handling is done elsewhere.
 			memorySize: 512,
 			timeout: Duration.seconds(15),
@@ -60,7 +73,7 @@ export class NextStandaloneStack extends Stack {
 			code: Code.fromAsset(props.imageHandlerZipPath ?? imageHandlerZipPath),
 			runtime: Runtime.NODEJS_16_X,
 			handler: props.customImageHandler ?? 'index.handler',
-			layers: [sharpLayer],
+			layers: [sharpLayer, nextLayer],
 			memorySize: 1024,
 			timeout: Duration.seconds(10),
 			environment: {

Diff for: lib/contruct.ts renamed to lib/construct.ts

@@ -1,5 +1,6 @@
-import packageJson from '../package.json'
+import path from 'path'
 
-export const sharpLayerZipPath = require.resolve(packageJson.name + './sharp-layer/zip')
-export const imageHandlerZipPath = require.resolve(packageJson.name + './image-handler/zip')
-export const serverHandlerZipPath = require.resolve(packageJson.name + './server-handler/zip')
+export const sharpLayerZipPath = path.resolve(__dirname, './sharp-layer.zip')
+export const imageHandlerZipPath = path.resolve(__dirname, './image-handler.zip')
+export const serverHandlerZipPath = path.resolve(__dirname, './server-handler.zip')
+export const nextLayerZipPath = path.resolve(__dirname, './next-layer.zip')

Diff for: lib/consts.ts

@@ -1,2 +1,5 @@
-export { NextStandaloneStack } from './contruct'
+export { NextStandaloneStack } from './construct'
 export { imageHandlerZipPath, serverHandlerZipPath, sharpLayerZipPath } from './consts'
+
+export { handler as serverHandler } from './standalone/server-handler'
+export { handler as imageHandler } from './standalone/image-handler'