fix(construct.awscdk.cloudfront-url-redirect): resolve cloudfront-js-v1 compatibility issues, use separate blog origin in web stack

packages/construct/awscdk/cloudfront-url-rewrite/src/handler.cfn-function.ts

@@ -36,12 +36,15 @@ export class HandlerLambdaCloudFrontFunction extends cloudfront.Function {
 		props: HandlerLambdaCloudFrontFunctionProps,
 	) {
 		const filePath = path.join(__dirname, '../dist/handler.function.mjs')
-		const content = fs
+		let content = fs
 			.readFileSync(filePath, 'utf8')
 			.replace('<FROM_HOSTNAME>', props.fromHostname)
 			.replace('<TO_HOSTNAME>', props.toHostname)
 			.replace('<REDIRECT_URI_PATTERN>', props.redirectUriPattern)
 			.replace('<TARGET_URI_PATTERN>', props.targetUriPattern)
+		const lines = content.split('\n')
+		// trim function export, which is not supported or expected by cloudfront js
+		content = lines.slice(0, -5).join('\n')
 		super(scope, id, {
 			comment: 'src/handler.lambda.ts',
 			...props,

packages/construct/awscdk/cloudfront-url-rewrite/src/handler.function.ts

@@ -5,12 +5,21 @@ const REDIRECT_URI_PATTERN = new RegExp('<REDIRECT_URI_PATTERN>', 'g')
 const TO_HOSTNAME = '<TO_HOSTNAME>'
 const TARGET_URI_PATTERN = '<TARGET_URI_PATTERN>'
 
+/**
+ * cloudfront-js supports a limited subset of javascript/ecma features.
+ */
 // eslint-disable-next-line @typescript-eslint/require-await,@typescript-eslint/no-unused-vars
-export async function handler(event: CloudFrontFunctionsEvent) {
-	const { request } = event
-	const { headers, uri } = request
+function handler(event: CloudFrontFunctionsEvent) {
+	const request = event.request
+	const headers = request.headers
+	const uri = request.uri
+
+	const hostParams = headers.host
+	let host = ''
+	if (hostParams && hostParams.value) {
+		host = hostParams.value
+	}
 
-	const host = headers.host?.value
 	if (!host || host !== FROM_HOSTNAME) {
 		return request
 	}
@@ -25,3 +34,5 @@ export async function handler(event: CloudFrontFunctionsEvent) {
 		},
 	}
 }
+
+export default handler

packages/stacks/web/src/web.ts

@@ -3,6 +3,7 @@ import { CloudFrontUrlRewrite } from '@crisiscleanup/construct.awscdk.cloudfront
 import { Duration, Stack, type StackProps } from 'aws-cdk-lib'
 import * as acm from 'aws-cdk-lib/aws-certificatemanager'
 import * as cloudfront from 'aws-cdk-lib/aws-cloudfront'
+import * as origins from 'aws-cdk-lib/aws-cloudfront-origins'
 import * as route53 from 'aws-cdk-lib/aws-route53'
 import * as route53Targets from 'aws-cdk-lib/aws-route53-targets'
 import type { Construct } from 'constructs'
@@ -114,12 +115,15 @@ export class CrisisCleanupWeb extends Stack {
 		}
 
 		if (props.enableBlogRedirect) {
+			const blogOrigin = new origins.HttpOrigin('blog.' + props.domainName)
 			new CloudFrontUrlRewrite(this, id + '-BlogRedirect', {
 				distribution: this.website.cloudFrontDistribution,
 				fromHostname: `blog.${props.domainName}`,
 				toHostname: props.fqdn,
-				redirectUriPattern: '^/d{4}/d{2}/(.*).html',
+				redirectUriPattern: '^/\\\\d{4}/\\\\d{2}/(.*)\\\\.html$',
 				targetUriPattern: '/blog/post/$1',
+				behaviorPath: '/*/*/*.html',
+				origin: blogOrigin,
 			})
 			if (this.zone) {
 				new route53.ARecord(this, id + '-alias-record-blog', {