Wrong status of header X-Cache: Miss from cloudfront

[itsTeknas]

i implemented this for a simple api in serverless + aws lambda with caching enabled

i can confirm the responses are cached because there are no lambda execution logs for subsequent hits. But in the response, the header X-Cache says "Miss from cloudfront"

config file:

service: survey-responce-endpoint

plugins:
  - serverless-api-gateway-caching
  - serverless-domain-manager

custom:
  customDomain:
    domainName: survey.staging.endpoint.martechsurveys.in
    basePath: 'survey'
    stage: ${self:provider.stage}
    createRoute53Record: true
  apiGatewayCaching:
    enabled: true

provider:
  name: aws
  profile: martech
  runtime: nodejs10.x
  region: ap-south-1
  memorySize: 512
  stage: ${opt:stage, 'development'}
  role: arn:aws:iam::xxxxx
  logRetentionInDays: 7
  environment:
    NODE_ENV: ${opt:stage, 'development'}

functions:

  get_survey:
    handler: handler.getSurvey
    timeout: 5
    memorySize: 128
    reservedConcurrency: 50
    events:
      - http:
          path: get_survey
          method: get
          cors: true
          caching:
            enabled: true
            ttlInSeconds: 300 # 5 mins
            cacheKeyParameters:
              - name: request.querystring.surveyId

handler:

module.exports.getSurvey = async event => {
  return {
        statusCode: 200,
        headers: {
          "Content-Type": "application/json",
          "Cache-Control": "public, max-age=300, s-maxage=300",
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Credentials': true,
        },
        body: JSON.stringify({"hello":"world"}),
      };
};

don't know if this has anything to do with this plugin or a quirk of cloudfront.

[DianaIonita]

Hi @itsTeknas,

This plugin enables caching at the API Gateway level. CloudFront sits in front of that:

CloudFront has its own caching at edge locations around the world, which you can read more about here. The header X-Cache tells you whether the response came from the CloudFront cache.

To figure out whether you're getting a response from the API Gateway cache, you can also add a date into your response and check whether it stays the same with subsequent requests:

module.exports.getSurvey = async event => {
  return {
        statusCode: 200,
        headers: {
          // the other headers
          'My-Custom-Date-Header': new Date()
        },
        body: JSON.stringify({"hello":"world"}),
      };
};

[itsTeknas]

Hey, thanks for the clarification :) So we're not using CloudFront Cache but using ApiGW cache is it ?

Is there a way to use and configure CloudFront cache also ? I believe you do create a cloudfront distribution.

[DianaIonita]

This plugin does not create a CloudFront distribution, it just enables API Gateway caching, and that creates a cache cluster. I've not used any plugins that configure CloudFront, but there probably are some out there.