{"id":3764,"date":"2023-06-02T13:56:13","date_gmt":"2023-06-02T13:56:13","guid":{"rendered":"https:\/\/geekmungus.co.uk\/?p=3764"},"modified":"2023-06-02T13:56:13","modified_gmt":"2023-06-02T13:56:13","slug":"set-default-root-object-for-statically-hosted-website-on-aws-cloudfront-aws-cloudfront-functions","status":"publish","type":"post","link":"https:\/\/geekmungus.co.uk\/?p=3764","title":{"rendered":"Set Default Root Object for Statically Hosted Website on AWS CloudFront (AWS CloudFront Functions)"},"content":{"rendered":"\n

A standard AWS CloudFront distribution is set to automatically serve the index.html file of a website when a client requests the root of the site, e.g.\u00a0https:\/\/www.geekmungus.co.uk<\/a> and does not specify any specific file or file within a sub-directory.<\/p>\n\n\n\n

However in certain instances your clients may request a page as follows e.g:\u00a0https:\/\/www.geekmungus.co.uk\/studies<\/a> within which an index.html file exists, however AWS CloudFront by default does not cope with this and offer the root object for a subdirectory. There are a number of ways to deal with this and put in place the desired behaviour, the simplest and most supportable is the use of CloudFront “Functions”. In such instances you’ll see an issue like the below, the index.html file exists, its just that the AWS CloudFront is not using it!<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The configuration assumes that you have a pre-created AWS CloudFront distribution because the Function needs to be attached to an existing CloudFront distribution to take effect.<\/p>\n\n\n\n

Apply via AWS Console<\/h2>\n\n\n\n

1. AWS CloudFront \u2192 Functions<\/p>\n\n\n\n

2. Create a function and provide it with a name and description. e.g. index-rewrite<\/strong> and Handler for index.html in subdirectories.<\/strong><\/p>\n\n\n\n

3. Enter the following code under “Development” and then click “Save Changes”.<\/p>\n\n\n\n

function handler(event) {\r\n    var request = event.request;\r\n    var uri = request.uri;\r\n     \r\n    \/\/ Check whether the URI is missing a file name.\r\n    if (uri.endsWith('\/')) {\r\n        request.uri += 'index.html';\r\n    }\r\n    \/\/ Check whether the URI is missing a file extension.\r\n    else if (!uri.includes('.')) {\r\n        request.uri += '\/index.html';\r\n    }\r\n \r\n    return request;\r\n}<\/code><\/pre>\n\n\n\n
4. Click “Publish” tab, then click “Publish Function”.<\/p>\n\n\n\n
It is recommended to test your function before you apply it, see the section\u00a0Testing your Function Ahead of Deployment<\/strong>\u00a0for full details. It is possible that your function could break some or all of your website, so verifying it works as expected is essential.<\/p>\n\n\n\n
5. Now associate the function with your desired CloudFront distribution.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
6. Wait for the CloudFront distribution to converge and update its configuration.<\/p>\n\n\n\n
7. Test the behaviour of the site with the function enabled.<\/p>\n\n\n\n
Apply via Cloudformation Template<\/h2>\n\n\n\n
To create within the CloudFront template.<\/p>\n\n\n\n
IndexHandlerFunction:\r\n    Type: AWS::CloudFront::Function\r\n    Properties:\r\n      AutoPublish: true\r\n      FunctionCode: !Sub |\r\n        function handler(event) {\r\n            var request = event.request;\r\n            var uri = request.uri;\r\n     \r\n            \/\/ Check whether the URI is missing a file name.\r\n            if (uri.endsWith('\/')) {\r\n                request.uri += 'index.html';\r\n            } \/\/ Check whether the URI is missing a file extension.\r\n            else if (!uri.includes('.')) {\r\n                request.uri += '\/index.html';\r\n            }\r\n                return request;\r\n        }\r\n      FunctionConfig:\r\n        Comment: \"Handler for index.html in subdirectories.\"\r\n        Runtime: cloudfront-js-1.0\r\n      Name: !Sub \"${AWS::StackName}-IndexHandlerFunction\"<\/code><\/pre>\n\n\n\n
Within the CloudFront Distribution declaration under the “DefaultCacheBehaviour” section you need to add the below to associate the function with your distribution and therefore activate it.<\/p>\n\n\n\n
FunctionAssociations:\r\n  - EventType: viewer-request\r\n    FunctionARN: !GetAtt IndexHandlerFunction.FunctionMetadata.FunctionARN<\/code><\/pre>\n\n\n\n
Testing your Function Ahead of Deployment<\/h2>\n\n\n\n
Click the “Test” tab, then input your test harness information, in this example, i’m testing the\u00a0https:\/\/www.geekmungus.co.uk\/studies<\/a>\u00a0URL, which was originally failing because of the issue identified above. Once the harness is ready click “Test Function” to observe the results, when you are happy it works as expected, you can then proceed to making it live.<\/p>\n\n\n\n
In the example below you’ll note the URI has been changed from the requested path\u00a0https:\/\/www.geekmungus.co.uk\/studies<\/a>\u00a0to https:\/\/www.geekmungus.co.uk\/studies\/index.html<\/a> by the function.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Additional Information<\/h2>\n\n\n\n