↓ Skip to main content
BisaCloud Docs

Menambahkan Function Rewrite pada AWS CloudFront

·3 mins
Aws Aws
Table of Contents

Tutorial ini membahas cara menambahkan CloudFront Function berupa URL Rewrite pada distribution CloudFront yang sebelumnya telah dibuat.

Function ini berguna untuk melakukan rewrite URL ke index.html, sehingga halaman dapat diakses tanpa perlu menuliskan nama file beserta ekstensi secara langsung.

Contoh:

  • https://example.com/about → akan diarahkan ke https://example.com/about/index.html

Panduan ini cocok untuk website berbasis Single Page Application (SPA) atau static site generator seperti:

  • React
  • Angular
  • Vue.js
  • Gatsby
  • Hugo

Clone repository sample function
#

Amazon Web Services telah menyediakan beberapa contoh CloudFront Function yang dapat langsung digunakan, salah satunya adalah URL Rewrite.

Clone repository berikut:

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

Masuk ke direktori project:

cd amazon-cloudfront-functions/
ls

Output:

add-cache-control-header
add-cors-header
add-origin-header
add-security-headers
add-true-client-ip-header
redirect-based-on-country
url-rewrite-single-page-apps
README.md
LICENSE

Terdapat beberapa contoh function seperti:

  • add-origin-header
  • add-security-headers
  • redirect-based-on-country
  • url-rewrite-single-page-apps

Pada panduan ini, kita akan menggunakan url-rewrite-single-page-apps.

Membuat CloudFront Function
#

Jalankan perintah berikut untuk membuat function baru bernama rewrite:

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 contoh:

{
  "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"
    }
  }
}

Status UNPUBLISHED menandakan function masih berada pada stage DEVELOPMENT dan belum aktif digunakan.

Publish Function
#

Setelah function dibuat, langkah berikutnya adalah melakukan publish agar function dipindahkan dari stage DEVELOPMENT ke LIVE.

Gunakan perintah berikut:

aws cloudfront publish-function \
  --name rewrite \
  --if-match EXXXXXXXXX
Ganti EXXXXXXXXX dengan nilai ETag yang didapat dari proses create-function.

Output contoh:

{
  "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"
    }
  }
}

Status UNASSOCIATED berarti function sudah berhasil dipublish, tetapi belum dihubungkan (associate) ke CloudFront Distribution.

Menghubungkan Function ke Distribution
#

Export terlebih dahulu konfigurasi distribution menggunakan perintah get-distribution-config:

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

Setelah file dist-conf.json berhasil dibuat, edit bagian FunctionAssociations menjadi seperti berikut:

"FunctionAssociations": {
  "Quantity": 1,
  "Items": [
    {
      "FunctionARN": "arn:aws:cloudfront::0123456789012:function/rewrite",
      "EventType": "viewer-request"
    }
  ]
},
Pastikan bagian ETag dihapus dari file dist-conf.json sebelum melakukan update distribution.

Konfigurasi di atas akan menjalankan function rewrite pada event Viewer Request, sehingga URL dapat direwrite sebelum request diteruskan ke origin.

Update Distribution
#

Setelah konfigurasi selesai diedit, lakukan update distribution menggunakan perintah berikut:

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

Tunggu hingga status distribution selesai Deploying sebelum melakukan pengujian.

Testing
#

Sebelum menambahkan function
#

Pada kondisi awal, akses URL tanpa index.html akan menghasilkan error atau halaman tidak ditemukan.

https://example.com/about
sebelum

Sesudah menambahkan function
#

Setelah function berhasil di-associate ke distribution, URL dapat diakses tanpa perlu menuliskan index.html.

https://example.com/about

CloudFront akan otomatis melakukan rewrite ke:

https://example.com/about/index.html

Dengan konfigurasi ini, routing pada aplikasi SPA seperti React, Angular, dan Vue.js dapat berjalan lebih baik tanpa memerlukan konfigurasi tambahan di origin server.

sesudah

Related