diff --git a/url-rewrite-single-page-apps/README.md b/url-rewrite-single-page-apps/README.md index 9fdbc23..9d4d0bc 100644 --- a/url-rewrite-single-page-apps/README.md +++ b/url-rewrite-single-page-apps/README.md @@ -8,12 +8,42 @@ There is a feature in CloudFront called the [default root object](https://docs.a **Note:** If you are using [S3 static website hosting](https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html), you don't need to use this function. S3 static website hosting allows you to set up an [index document](https://docs.aws.amazon.com/AmazonS3/latest/dev/IndexDocumentSupport.html). An index document is a webpage that Amazon S3 returns when any request lacks a filename, regardless of whether it's for the root of a website or a subfolder. This Amazon S3 feature performs the same action as this function. -**Testing the function** +## Deployment steps +### Create function + +``` +aws cloudfront create-function --name url-rewrite-single-page-apps --function-config Comment="Function to redirect empty doc requests to index.html",Runtime=cloudfront-js-1.0 --function-code fileb://url-rewrite-single-page-apps/index.js +``` + +If the function was created correctly, the JSON output should look similar to this: + +``` +{ + "Location": "https://cloudfront.amazonaws.com/2020-05-31/function/arn:aws:cloudfront:::function/url-rewrite-single-page-apps", + "ETag": "EXXXXXXXXXXXX", + "FunctionSummary": { + "Name": "url-rewrite-single-page-apps", + "Status": "UNPUBLISHED", + "FunctionConfig": { + "Comment": "Function to redirect empty doc requests to index.html", + "Runtime": "cloudfront-js-1.0" + }, + "FunctionMetadata": { + "FunctionARN": "arn:aws:cloudfront:::function/url-rewrite-single-page-apps", + "Stage": "DEVELOPMENT", + "CreatedTime": "2021-12-26T08:43:50.950Z", + "LastModifiedTime": "2021-12-26T08:43:50.950Z" + } + } +} + +``` +### Test the function To validate that the function is working as expected, you can use the JSON test objects in the `test-objects` directory. To test, use the `test-function` CLI command as shown in the following example: ``` -$ aws cloudfront test-function --if-match EXXXXXXXXXXXX --name url-rewrite-single-page-apps --event-object fileb://url-rewrite-single-page-apps/test-objects/file-name-no-extension.json +$ aws cloudfront test-function --if-match --name url-rewrite-single-page-apps --event-object fileb://url-rewrite-single-page-apps/test-objects/file-name-no-extension.json ``` If the function has been set up correctly, you should see the `uri` being updated to `index.html` in the `FunctionOutput` JSON object: @@ -40,4 +70,64 @@ If the function has been set up correctly, you should see the `uri` being update "FunctionOutput": "{\"request\":{\"headers\":{\"host\":{\"value\":\"www.example.com\"},\"accept\":{\"value\":\"text/html\"}},\"method\":\"GET\",\"querystring\":{\"test\":{\"value\":\"true\"},\"arg\":{\"value\":\"val1\"}},\"uri\":\"/blog/index.html\",\"cookies\":{\"loggedIn\":{\"value\":\"false\"},\"id\":{\"value\":\"CookeIdValue\"}}}}" } } -``` \ No newline at end of file +``` + +### Publish the function. +Please note that the JSON response states `"Status" : "UNPUBLISHED"`, so the next step is to publish the function. +``` +aws cloudfront publish-function --name url-rewrite-single-page-apps --if-match +``` +And - if successful - JSON response should look similar to: + +``` +{ + "FunctionSummary": { + "Name": "url-rewrite-single-page-apps", + "Status": "UNASSOCIATED", + "FunctionConfig": { + "Comment": "Function to redirect empty doc requests to index.html", + "Runtime": "cloudfront-js-1.0" + }, + "FunctionMetadata": { + "FunctionARN": "arn:aws:cloudfront:::function/url-rewrite-single-page-apps", + "Stage": "LIVE", + "CreatedTime": "2021-12-26T08:47:42.111Z", + "LastModifiedTime": "2021-12-26T08:47:42.111Z" + } + } +} + +``` +### Configuration of the function. +Since it's created and published, now it needs to be configured. + +``` +aws cloudfront get-distribution-config --id --output json > dist-cfg.json +``` +Edit the `dist-cfg.json`: + +* Change the `ETag` key to `IfMatch` +* Modify `FunctionAssociation` to the following: + +``` +"FunctionAssociations": { + "Quantity": 1, + "Items" : [ + { + "EventType" : "viewer-request", + "FunctionARN":"arn:aws:cloudfront:::function/url-rewrite-single-page-apps" + } + ] + + }, + +``` +### Modify CloudFront distribution by adding `ETag`. +Distributions->Distribution ID->Origins->Edit->Add custom header - optional +Add `ETag`, value `EXXXXXXXXXXXX` + +### Update the distribution + +``` +aws cloudfront update-distribution --id --cli-input-json fileb://dist-cfg.json +```