Configure Cloudformation to have requests to GET /subdirectory serve /subdirectory/index.html using Cloudfront & S3

Question

I have a Cloudformation template that sets up a AWS::CloudFront::Distribution & AWS::S3::Bucket. Unfortunately, requests to GET /subdirectory respond with a 403. How can I configure the Cloudformation template to have GET /subdirectory serve /subdirectory/index.html?

My Cloudfront configuration looks like:

  CloudFrontDistribution:
    Type: 'AWS::CloudFront::Distribution'
    Properties:
      DistributionConfig:
        Aliases:
          - !FindInMap [Domain, !Ref Stage, Domain]
        ViewerCertificate:
          AcmCertificateArn: !Ref Cert
          SslSupportMethod: sni-only
        CustomErrorResponses:
        - ErrorCode: 403 # not found
          ResponseCode: 404
          ResponsePagePath: !Ref ErrorPagePath
        DefaultCacheBehavior:
          AllowedMethods:
          - GET
          - HEAD
          - OPTIONS
          CachedMethods:
          - GET
          - HEAD
          - OPTIONS
          Compress: true
          DefaultTTL: 3600 # in seconds
          ForwardedValues:
            Cookies:
              Forward: none
            QueryString: false
          MaxTTL: 86400 # in seconds
          MinTTL: 60 # in seconds
          TargetOriginId: s3origin
          ViewerProtocolPolicy: redirect-to-https
        DefaultRootObject: !Ref DefaultRootObject
        Enabled: true
        HttpVersion: http2
        Origins:
        - DomainName: !GetAtt 'S3Bucket.DomainName'
          Id: s3origin
          S3OriginConfig:
            OriginAccessIdentity: !Sub 'origin-access-identity/cloudfront/${CloudFrontOriginAccessIdentity}'
        PriceClass: 'PriceClass_All'

Everything works except requests to GET /subdirectory.

I also tried:

        - DomainName: !GetAtt 'S3Bucket.RegionalDomainName'
          Id: s3origin
          S3OriginConfig:
            OriginProtocolPolicy: http-only

However I received the error Property TemplateURL cannot be empty. on the AWS::CloudFormation::Stack.

Answer 1

Please check this docs, you can find an example like:

'use strict';

 const querystring = require('querystring');

 exports.handler = (event, context, callback) => {
     const request = event.Records[0].cf.request;

     /**
      * Reads query string to check if S3 origin should be used, and
      * if true, sets S3 origin properties.
      */

     const params = querystring.parse(request.querystring);

     if (params['useS3Origin']) {
         if (params['useS3Origin'] === 'true') {
             const s3DomainName = 'my-bucket.s3.amazonaws.com';

             /* Set S3 origin fields */
             request.origin = {
                 s3: {
                     domainName: s3DomainName,
                     region: '',
                     authMethod: 'none',
                     path: '',
                     customHeaders: {}
                 }
             };
             request.headers['host'] = [{ key: 'host', value: s3DomainName}];
         }
     }

    callback(null, request);
};

You could change this to point correct path using the query string from the request.

Check this to set up CloudFormation, there is an example on how to set up the trigger

Resources:
    CFDistribution:
        Type: AWS::CloudFront::Distribution
        Properties:
          DistributionConfig:
            Enabled: 'true'
            Comment: !Sub '${Stage} - CI/CD for Lambda@Edge'
            Aliases:
              - !FindInMap [AliasMap, !Ref Stage, Alias]
            Origins:
              -
                Id: MyOrigin
                DomainName: aws.amazon.com
                CustomOriginConfig:
                  HTTPPort: 80
                  OriginProtocolPolicy: match-viewer
            DefaultCacheBehavior:
              TargetOriginId: MyOrigin
              LambdaFunctionAssociations:
                - 
                  EventType: origin-request
                  LambdaFunctionARN: !Ref LambdaEdgeFunctionSample.Version