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