3

How do you set a default root object for subdirectories for a statically hosted website on Cloudfront?

This is a known issue but what I want to know is, how to set up the lambda in CDK. I have used the solution below but when I access the site I get a 503 response

The CloudFront function returned an invalid value: response.statusCode is missing

Testing this in the AWS console is successful so why wouldn't it work on the hosted site?

redirect handler

function handler(event) {
  var request = event.request;
  var uri = request.uri;

  // Check whether the URI is missing a file name.
  if (uri.endsWith('/')) {
    request.uri += 'index.html';
  }
  // Check whether the URI is missing a file extension.
  else if (!uri.includes('.')) {
    request.uri += '/index.html';
  }
  return request;
}

cloudfront setup

myFunction = new Function(this, 'ViewerResponseFunction', {
          functionName: 'RedirectURIFunction',
          code: FunctionCode.fromFile({filePath: myFilePath}).render(),
          comment: "Comment about the function"
    });

originConfigs: [
  {
    s3OriginSource: {
      s3BucketSource: myBucket,
      originAccessIdentity: myOAI,
    },
    behaviors: [{
      functionAssociations: [{
         function: myCfnFunction,
         eventType: FunctionEventType.VIEWER_RESPONSE
      }],
      isDefaultBehavior: true
    }]
]}
  • 1
    For anyone else facing this issue, the problem was that I had ```FunctionEventType.VIEWER_RESPONSE``` instead of ```REQUEST``` –  Jan 17 '22 at 10:31

1 Answers1

0

From the restrictions page of Lambda@Edge

The Lambda function must be in the US East (N. Virginia) Region.

Your code will be still executed in the closest in the closest Edge location to the user, but the function itself must be located in us-east-1.

Based on your usecase (which seems to be a simple url redirect) you might want to consider using the newer CloudFront Functions feature, which is faster and more lightweight. This documentation page has a good comparison table.

Edit:

I haven't used CloudFront functions before, but looking at the CDK documentation and your link, I can suggest a few changes.

    myFunction = new Function(this, 'ViewerResponseFunction', {
          functionName: 'RedirectURIFunction',
          code: FunctionCode.fromFile({filePath: myFilePath}).render(),
          comment: "Comment about the function"
    });
originConfigs: [
  {
    s3OriginSource: {
      s3BucketSource: myBucket,
      originAccessIdentity: myOAI,
    },
    behaviors: [{
      functionAssociations: [{
         function: myFunction,
         eventType: FunctionEventType.VIEWER_REQUEST
      }],
      isDefaultBehavior: true
    }]
]}
Kaustubh Khavnekar
  • 2,553
  • 2
  • 14
  • How can I do this with CDK? I followed this example but once I deployed CDK I still have the same index problem. https://wp-kyoto.net/en/create-aws-cloudfront-function-by-using-aws-cdk/ –  Jan 16 '22 at 16:47
  • Can you edit your question to add the code with which you are facing issues? – Kaustubh Khavnekar Jan 16 '22 at 17:07
  • I have updated my answer to fix a few issues I spotted – Kaustubh Khavnekar Jan 16 '22 at 17:43
  • Yeah so the documentation on this function requires a lambda edge function. So what I need to know is, how to specify the region for the lambda edge function? –  Jan 16 '22 at 18:41
  • `aws_cdk.aws_cloudfront.Function` or `aws_cdk.aws_cloudfront.CfnFunction` both create a CloudFront function. `aws_cdk.aws_cloudfront.EdgeLambda` creates a Lambda@Edge function. In your question you are trying to create a CloudFront function. Which one do you want to use? – Kaustubh Khavnekar Jan 16 '22 at 18:53
  • I have updated the question with my current solution. I am getting 503 with the suggested changes –  Jan 16 '22 at 19:44