Merge pull request #40 from DBB-Software/feat/PLATFORM-1377-next-image

feat: added support of next image route

Author: RomanBobrovskiy

src/build/next.ts

@@ -1,7 +1,7 @@
 import childProcess from 'node:child_process'
 import fs from 'node:fs'
 import path from 'node:path'
-import { type ProjectPackager, type ProjectSettings } from '../common/project'
+import { type ProjectPackager, type ProjectSettings, loadFile } from '../common/project'
 import loadConfig from '../commands/helpers/loadConfig'
 
 interface BuildOptions {
@@ -18,12 +18,12 @@ interface BuildAppOptions {
 
 export const OUTPUT_FOLDER = 'serverless-next'
 
-const setNextOptions = async (nextConfig: string, s3BucketName: string) => {
+const setNextOptions = async (nextConfigPath: string, s3BucketName: string) => {
   // set s3 bucket name for cache handler during build time
   process.env.STATIC_BUCKET_NAME = s3BucketName
 
   const cacheConfig = await loadConfig()
-  const currentConfig = await import(nextConfig).then((r) => r.default)
+  const currentConfig = await loadFile(nextConfigPath)
   const updatedConfig = {
     ...currentConfig,
     output: 'standalone',
@@ -34,20 +34,20 @@ const setNextOptions = async (nextConfig: string, s3BucketName: string) => {
     cacheHandler: require.resolve(path.join('..', 'cacheHandler', 'index.js'))
   }
 
-  const currentContent = fs.readFileSync(nextConfig, 'utf-8')
+  const currentContent = fs.readFileSync(nextConfigPath, 'utf-8')
 
   let updatedContent = `module.exports = ${JSON.stringify(updatedConfig, null, 4)};\n`
 
   // Check if the file has .mjs extension
-  if (nextConfig.endsWith('.mjs')) {
+  if (nextConfigPath.endsWith('.mjs')) {
     updatedContent = `export default ${JSON.stringify(updatedConfig, null, 4)};\n`
   }
 
-  fs.writeFileSync(nextConfig, updatedContent, 'utf-8')
+  fs.writeFileSync(nextConfigPath, updatedContent, 'utf-8')
 
   // Function to revert back to original content of file
   return () => {
-    fs.writeFileSync(nextConfig, currentContent, 'utf-8')
+    fs.writeFileSync(nextConfigPath, currentContent, 'utf-8')
   }
 }
 

src/cdk/constructs/CloudFrontDistribution.ts

@@ -13,19 +13,23 @@ interface CloudFrontPropsDistribution {
   requestEdgeFunction: cloudfront.experimental.EdgeFunction
   responseEdgeFunction: cloudfront.experimental.EdgeFunction
   cacheConfig: CacheConfig
+  imageTTL?: number
 }
 
+const OneDayCache = Duration.days(1)
 const OneMonthCache = Duration.days(30)
 const NoCache = Duration.seconds(0)
+
 const defaultNextQueries = ['_rsc']
 const defaultNextHeaders = ['Cache-Control']
+const imageQueries = ['w', 'h', 'url', 'q']
 export class CloudFrontDistribution extends Construct {
   public readonly cf: cloudfront.Distribution
 
   constructor(scope: Construct, id: string, props: CloudFrontPropsDistribution) {
     super(scope, id)
 
-    const { staticBucket, requestEdgeFunction, responseEdgeFunction, cacheConfig } = props
+    const { staticBucket, requestEdgeFunction, responseEdgeFunction, cacheConfig, ebAppDomain, imageTTL } = props
 
     const splitCachePolicy = new cloudfront.CachePolicy(this, 'SplitCachePolicy', {
       cachePolicyName: `${id}-SplitCachePolicy`,
@@ -53,7 +57,23 @@ export class CloudFrontDistribution extends Construct {
       minTtl: OneMonthCache
     })
 
+    const imageTTLValue = imageTTL ? Duration.seconds(imageTTL) : OneDayCache
+
+    const imageCachePolicy = new cloudfront.CachePolicy(this, 'ImageCachePolicy', {
+      cachePolicyName: `${id}-ImageCachePolicy`,
+      queryStringBehavior: cloudfront.CacheQueryStringBehavior.allowList(...imageQueries),
+      cookieBehavior: cloudfront.CacheCookieBehavior.none(),
+      headerBehavior: cloudfront.CacheHeaderBehavior.allowList(...defaultNextHeaders),
+      defaultTtl: imageTTLValue,
+      maxTtl: imageTTLValue,
+      minTtl: imageTTLValue
+    })
+
     const s3Origin = new origins.S3Origin(staticBucket)
+    const nextServerOrigin = new origins.HttpOrigin(ebAppDomain, {
+      protocolPolicy: cloudfront.OriginProtocolPolicy.HTTP_ONLY,
+      httpPort: 80
+    })
 
     this.cf = new cloudfront.Distribution(this, id, {
       defaultBehavior: {
@@ -82,6 +102,10 @@ export class CloudFrontDistribution extends Construct {
           ],
           cachePolicy: splitCachePolicy
         },
+        '/_next/image*': {
+          origin: nextServerOrigin,
+          cachePolicy: imageCachePolicy
+        },
         '/_next/*': {
           origin: s3Origin,
           cachePolicy: longCachePolicy

src/cdk/stacks/NextCloudfrontStack.ts

@@ -13,6 +13,7 @@ export interface NextCloudfrontStackProps extends StackProps {
   ebAppDomain: string
   buildOutputPath: string
   cacheConfig: CacheConfig
+  imageTTL?: number
 }
 
 export class NextCloudfrontStack extends Stack {
@@ -22,7 +23,7 @@ export class NextCloudfrontStack extends Stack {
 
   constructor(scope: Construct, id: string, props: NextCloudfrontStackProps) {
     super(scope, id, props)
-    const { nodejs, buildOutputPath, staticBucketName, ebAppDomain, region, cacheConfig } = props
+    const { nodejs, buildOutputPath, staticBucketName, ebAppDomain, region, cacheConfig, imageTTL } = props
 
     this.routingLambdaEdge = new RoutingLambdaEdge(this, `${id}-RoutingLambdaEdge`, {
       nodejs,
@@ -52,7 +53,8 @@ export class NextCloudfrontStack extends Stack {
       ebAppDomain,
       requestEdgeFunction: this.routingLambdaEdge.lambdaEdge,
       responseEdgeFunction: this.checkExpLambdaEdge.lambdaEdge,
-      cacheConfig
+      cacheConfig,
+      imageTTL
     })
 
     staticBucket.grantRead(this.routingLambdaEdge.lambdaEdge)

src/commands/deploy.ts

@@ -9,7 +9,7 @@ import { NextRenderServerStack, type NextRenderServerStackProps } from '../cdk/s
 import { NextCloudfrontStack, type NextCloudfrontStackProps } from '../cdk/stacks/NextCloudfrontStack'
 import { getAWSCredentials, uploadFolderToS3, uploadFileToS3, AWS_EDGE_REGION, emptyBucket } from '../common/aws'
 import { AppStack } from '../common/cdk'
-import { getProjectSettings } from '../common/project'
+import { getProjectSettings, loadFile } from '../common/project'
 import loadConfig from './helpers/loadConfig'
 
 export interface DeployConfig {
@@ -73,6 +73,8 @@ export const deploy = async (config: DeployConfig) => {
 
     const cacheConfig = await loadConfig()
 
+    const nextConfig = await loadFile(projectSettings.nextConfigPath)
+
     const outputPath = createOutputFolder()
 
     const clientAWSCredentials = {
@@ -130,6 +132,7 @@ export const deploy = async (config: DeployConfig) => {
         crossRegionReferences: true,
         region,
         cacheConfig,
+        imageTTL: nextConfig.imageTTL,
         env: {
           region: AWS_EDGE_REGION // required since Edge can be deployed only here.
         }

src/common/project.ts

@@ -53,3 +53,7 @@ export const getProjectSettings = (projectPath: string): ProjectSettings | undef
     currentPath = path.dirname(currentPath)
   }
 }
+
+export const loadFile = async (filePath: string) => {
+  return import(filePath).then((r) => r.default)
+}