Add Function di Amazon CloudFront

Tutorial kali ini akan membahas cara menambahkan function Rewrite pada distribution cloudfront yang sebelumnya telah dibuat. Anda dapat menambahkan function ini untuk rewrite url index.html agar dapat terakses tanpa menuliskan nama file beserta ektensinya.

Panduan ini cocok untuk website Anda yang menggunakan framework seperti React, Angular, Vue, Gatsby, atau Hugo

Git repo

#

Amazon sudah membuatkan beberapa sample function yang dapat Anda gunakan salah satunya adalah URL Rewrite

git clone https://github.com/aws-samples/amazon-cloudfront-functions.git

$ cd amazon-cloudfront-functions/
$ ls
add-cache-control-header  add-origin-header     add-true-client-ip-header  CONTRIBUTING.md  NOTICE     redirect-based-on-country     verify-jwt
add-cors-header           add-security-headers  CODE_OF_CONDUCT.md         LICENSE          README.md  url-rewrite-single-page-apps

Terlihat jika ada beberapa sample function seperti add-origin-header, add-security-headers, dan lainnya. Namun panduan kali ini akan mencoba url-rewrite-single-page-apps

Create function

#

aws cloudfront create-function --name rewrite \
--function-config Comment="",Runtime=cloudfront-js-1.0 \
--function-code fileb://amazon-cloudfront-functions/url-rewrite-single-page-apps/index.js

Output

{
    "Location": "https://cloudfront.amazonaws.com/2020-05-31/function/arn:aws:cloudfront::0123456789012:function/rewrite",
    "ETag": "ETVPDKIKX0DER",
    "FunctionSummary": {
        "Name": "rewrite",
        "Status": "UNPUBLISHED",
        "FunctionConfig": {
            "Comment": "",
            "Runtime": "cloudfront-js-1.0"
        },
        "FunctionMetadata": {
            "FunctionARN": "arn:aws:cloudfront::0123456789012:function/rewrite",
            "Stage": "DEVELOPMENT",
            "CreatedTime": "2023-01-13T13:42:42.125000+00:00",
            "LastModifiedTime": "2023-01-13T13:42:42.125000+00:00"
        }
    }
}

Publish function

#

Publish function untuk menyalin function config dari stage DEVELOPMENT ke stage LIVE

aws cloudfront publish-function --name rewrite --if-match EXXXXXXXXX

Output

{
    "FunctionSummary": {
        "Name": "rewrite",
        "Status": "UNASSOCIATED",
        "FunctionConfig": {
            "Comment": "",
            "Runtime": "cloudfront-js-1.0"
        },
        "FunctionMetadata": {
            "FunctionARN": "arn:aws:cloudfront::0123456789012:function/rewrite",
            "Stage": "LIVE",
            "CreatedTime": "2023-01-13T13:55:18.526000+00:00",
            "LastModifiedTime": "2023-01-13T13:58:34.203000+00:00"
        }
    }
}

Associated distributions

#

Export config dengan get-distribution-config

aws cloudfront get-distribution-config --id EXXXXXXXXXXXXX \
--output json > dist-conf.json

Edit dist-conf.json pada bagian FunctionAssociations seperti berikut

            "FunctionAssociations": {
                "Quantity": 1,
                "Items": [
                    {
                        "FunctionARN": "arn:aws:cloudfront::0123456789012:function/rewrite",
                        "EventType": "viewer-request"
                    }
                ]
            },

Note: pastikan bagian ETag dihapus agar dapat melakukan update distribution {: .prompt-tip }

Update distribution

#

aws cloudfront update-distribution --id EXXXXXXXXXXXXX \
--if-match EXXXXXXXXXXXXX --cli-input-json fileb://dist-conf.json

Tunggu proses deploying lalu test akses

Sebelum ditambah function

#


Sesudah ditambah function

#