I tried creating a demo for VueJS SSR using Lambda@Edge and using AWS CDK v2. The code is below
import { CfnOutput, Duration, RemovalPolicy, Stack, StackProps } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { Bucket } from 'aws-cdk-lib/aws-s3';
import { BucketDeployment, Source } from 'aws-cdk-lib/aws-s3-deployment'
import { CloudFrontWebDistribution, LambdaEdgeEventType, OriginAccessIdentity } from 'aws-cdk-lib/aws-cloudfront';
import { Code, Function, Runtime } from 'aws-cdk-lib/aws-lambda';
import { EdgeFunction } from 'aws-cdk-lib/aws-cloudfront/lib/experimental';
export class SsrStack extends Stack {
constructor(scope: Construct, id: string, props?: StackProps) {
super(scope, id, props);
const bucket = new Bucket(this, 'DeploymentsBucket', {
websiteIndexDocument: "index.html",
websiteErrorDocument: "index.html",
publicReadAccess: false,
//only for demo not to use in production
removalPolicy: RemovalPolicy.DESTROY,
});
//
new BucketDeployment(this, "App", {
sources: [Source.asset("../../web/dist/")],
destinationBucket: bucket
});
//
const originAccessIdentity = new OriginAccessIdentity(
this,
'DeploymentsOriginAccessIdentity',
);
bucket.grantRead(originAccessIdentity);
const ssrEdgeFunction = new EdgeFunction(this, "ssrHandler", {
runtime: Runtime.NODEJS_14_X,
code: Code.fromAsset("../../lambda/ssr-at-edge/"),
memorySize: 128,
timeout: Duration.seconds(5),
handler: "index.handler"
});
const distribution = new CloudFrontWebDistribution(
this,
'DeploymentsDistribution',
{
originConfigs: [
{
s3OriginSource: {
s3BucketSource: bucket,
originAccessIdentity: originAccessIdentity
},
behaviors: [
{
isDefaultBehavior: true,
lambdaFunctionAssociations: [
{
eventType: LambdaEdgeEventType.ORIGIN_REQUEST,
lambdaFunction: ssrEdgeFunction.currentVersion,
}
]
}
]
}
],
errorConfigurations: [
{
errorCode: 403,
responseCode: 200,
responsePagePath: '/index.html',
errorCachingMinTtl: 0,
},
{
errorCode: 404,
responseCode: 200,
responsePagePath: '/index.html',
errorCachingMinTtl: 0,
}
]
}
);
new CfnOutput(this, 'CloudFrontURL', { value: distribution.distributionDomainName });
}
}
However when I tried deploying it shows something like this
Package subpath './aws-cloudfront/lib/experimental' is not defined by "exports" in /Users/petrabarus/Projects/kodingbarengpetra/vue-lambda-ssr/deployments/cdk/node_modules/aws-cdk-lib/package.json
Here's the content of the package.json
{
"name": "ssr-at-edge",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest --verbose",
"build": "tsc",
"watch": "tsc -w",
"start": "npm run build -- -w"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@types/aws-lambda": "^8.10.89",
"@types/node": "^17.0.5",
"ts-node": "^10.4.0",
"typescript": "^4.5.4"
},
"dependencies": {
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14"
}
}
Is there anything I miss?