Edge Security Acceleration:Percepat rendering website dengan Functions and Pages

2.1 Siapkan lingkungan dan sumber daya

1. Login ke konsol OSS, buka halaman Buckets, lalu klik Create Bucket. Masukkan Bucket Name, pertahankan pengaturan default lainnya, lalu klik Create.

   Pada contoh ini, Bucket Name diatur ke website-resources-shopping dan Region diatur ke China (Hangzhou).

2. Pilih bucket yang telah Anda buat. Di halaman Files, ekstrak kumpulan gambar produk dari File sumber daya lalu unggah gambar-gambar tersebut ke direktori root bucket.

   Catatan

   Simpan sumber daya gambar di direktori root bucket OSS.

2.2 Konfigurasikan domain yang dipercepat untuk sumber daya statis

1. Di konsol ESA, pilih Websites, lalu di kolom Website, klik situs target.

2. Di bilah navigasi kiri, klik DNS > Records > Add Record, lalu tambahkan rekaman DNS berdasarkan Record Type.

   Parameter	Contoh nilai
   Record Type	CNAME
   Hostname	images
   Proxy Status	Enabled
   Record Value	OSS
   Access Type	Private Access (STS Temporary Token)
   Authorization	Diotorisasi secara default untuk akses akun yang sama.
   OSS Bucket	website-resources-shopping.*******.aliyuncs.com
   Origin Host	Follow Origin Domain Name

3. Pilih Image/Video untuk tipe rekaman, lalu klik OK.

4. Setelah rekaman DNS dibuat, salin Hostname dan Record Value dari halaman wizard konfigurasi CNAME.

   Saat menambahkan rekaman di konsol DNS Alibaba Cloud, atur Type ke CNAME - Arahkan nama domain ke nama domain lain, masukkan nilai yang disalin di Host dan Value, pilih Default untuk Request source, dan pertahankan TTL pada 10 menit (disarankan).

5. Buka konsol DNS Alibaba Cloud. Di panel navigasi kiri, pilih Public DNS > Authoritative Domain Names. Di tab Authoritative Domain Names, temukan nama domain situs target lalu klik DNS Settings.

6. Di DNS Settings, klik Add Record. Tambahkan rekaman dengan pengaturan berikut lalu klik OK.

   Parameter	Contoh nilai
   Record type	CNAME
   Host record	images
   Record value	images.example.com.**.*******.com
   TTL	10 menit

7. Kembali ke halaman wizard konfigurasi CNAME dari Langkah 4. Di langkah 3. Verify the CNAME record, klik Query. Jika rekaman CNAME telah berlaku, konfigurasi CNAME selesai.

   Catatan

   Rekaman CNAME mungkin memerlukan beberapa menit untuk berlaku.

8. Masukkan http://<your_accelerated_domain_name>/1.png di browser Anda untuk memverifikasi bahwa gambar ditampilkan.

   Catatan

   Jika muncul error 404, sesuaikan URL agar sesuai dengan path direktori gambar. Contohnya: http://<your_accelerated_domain_name>/images/1.png.

3.1 Siapkan lingkungan

1. Login ke konsol ECS.

2. Di panel navigasi kiri, pilih Instances & Images > Instances. Di bilah menu atas, pilih wilayah China (Hangzhou).

3. Di halaman Instances, klik Create Instance. Lalu, buat instance ECS di halaman pembelian.

3.2 Deploy sumber daya dinamis

1. Login ke konsol ECS.

2. Di panel navigasi kiri, pilih Instances & Images > Instances. Di bilah menu atas, pilih wilayah China (Hangzhou).

3. Di halaman Instances, temukan instans target lalu klik ID instans untuk membuka halaman detail instans.

4. Klik Remote Connection, pilih Connect via Workbench, lalu klik Log On Now. Masukkan kata sandi logon untuk menyelesaikan login.

5. Unduh kode website dan data produk dari File sumber daya, ekstrak paketnya, lalu unggah kedua file tersebut ke server ECS.

6. Di file ItemInfo.json, ganti images.example.com dengan nama domain yang dipercepat yang dikonfigurasi di Bagian 2.2.

   Pilih File > Open New File Management > Upload File untuk mengunggah kedua file ke server.

7. Di konsol Workbench, jalankan perintah berikut untuk memulai server HTTP.

   cd /  # Buka direktori root sistem.
   nohup python -m http.server 80 &  # Mulai layanan HTTP di port 80 di latar belakang.

8. Di browser Anda, masukkan http://<your_public_ip>/ItemsInfo.json untuk memverifikasi bahwa data produk dinamis dikembalikan.

3.3 Konfigurasikan domain yang dipercepat untuk sumber daya dinamis

1. Di konsol ESA, pilih Websites. Di kolom Actions situs target, klik ikon lalu pilih DNS Records.

2. Di panel navigasi kiri, pilih DNS > Records.

3. Di halaman daftar rekaman, klik Add Record, konfigurasikan parameter, lalu klik Next.

   Parameter	Contoh nilai
   Record type	A/AAAA
   Host record	www
   Proxy status	Enabled
   Record value/origin	10.0.x.x (Alamat IP publik instans ECS target)
   TTL	Auto

4. Pilih API untuk tipe rekaman lalu klik OK.

5. Setelah rekaman DNS dibuat, salin Hostname dan Record Value dari halaman wizard konfigurasi CNAME.

   Catatan

   Biarkan halaman ini tetap terbuka. Anda akan kembali untuk memverifikasi rekaman CNAME di Langkah 8.

6. Buka konsol DNS Alibaba Cloud. Di panel navigasi kiri, pilih Public DNS > Authoritative Domain Names. Di tab Authoritative Domain Names, temukan nama domain situs target lalu klik DNS Settings.

7. Di DNS Settings, klik Add Record. Tambahkan rekaman dengan pengaturan berikut lalu klik OK.

   Parameter	Contoh nilai
   Record type	CNAME
   Host record	www
   Record value	www.example.com.**.*******.com (Nilai rekaman dari wizard konfigurasi CNAME)
   TTL	10 menit

8. Kembali ke halaman wizard konfigurasi CNAME dari Langkah 5. Di langkah 3. Verify the CNAME record, klik Query. Jika rekaman CNAME telah berlaku, konfigurasi CNAME selesai.

   Catatan

   Rekaman CNAME mungkin memerlukan beberapa menit untuk berlaku.

4.1 Buat Functions and Pages

1. Login ke ESA console. Di panel navigasi kiri, pilih Edge Computing > Functions and Pages.

2. Klik Create. Untuk metode pembuatan, pilih Function Templates. Pilih templat Hello World lalu klik Next.

3. Masukkan Routine Name, tambahkan deskripsi jika diperlukan, lalu klik Submit.

4. Tambahkan nama domain untuk Functions and Pages.

   1. Login ke ESA console. Di panel navigasi kiri, pilih Edge Computing > Functions and Pages.

   2. Di halaman daftar Functions and Pages, klik fungsi target.

   3. Di halaman detail fungsi, beralih ke tab Domain Name lalu klik Add Domain Name. Tetapkan nama domain shopping.example.com ke fungsi edge lalu klik OK.

   4. Di area binding domain, temukan nama domain fungsi edge yang baru saja Anda buat. Di kolom Actions, klik View DNS Records. Di halaman manajemen rekaman DNS, salin nilai CNAME untuk nama domain fungsi edge.

   5. Masuk ke Konsol Alibaba Cloud DNS. Di panel navigasi kiri, pilih Public DNS > Authoritative Domain Names. Pada tab Authoritative Domain Names, temukan nama domain situs target, lalu klik DNS Settings.

   6. Di DNS Settings, klik Add Record. Tambahkan rekaman dengan pengaturan berikut lalu klik OK.

      Parameter	Deskripsi	Contoh nilai
      Record type	Pilih tipe rekaman DNS.	CNAME
      Host record	Masukkan rekaman host berdasarkan awalan domain.	shopping
      Record value	Masukkan nilai CNAME dari domain fungsi edge.	shopping.example.com.**.*******.com
      TTL	Siklus pembaruan DNS. Pertahankan nilai default.	10 menit

   7. Segarkan halaman rekaman DNS dan periksa apakah CNAME Status dari nama domain fungsi edge berubah dari To be configured menjadi Configured.

      Catatan

      Rekaman CNAME mungkin memerlukan beberapa menit untuk berlaku.

4.2 Konfigurasikan sertifikat edge

ESA mengenkripsi permintaan client-ke-POP dengan SSL/TLS. Untuk praktik ini, ajukan sertifikat gratis. Konfigurasikan sertifikat edge.

1. Di ESA console, klik Websites di panel navigasi kiri, lalu klik situs target.

2. Di halaman manajemen situs target, pilih SSL/TLS > Edge Certificates dari panel navigasi kiri.

3. Di bagian Edge Certificates, temukan SSL/TLS lalu klik sakelar untuk mengaktifkannya.

4. Di bagian Edge Certificates, temukan Certificate Management lalu klik Apply for Free Certificate. Konfigurasikan parameter lalu klik OK.

   Parameter	Deskripsi	Contoh nilai
   Certificate authority	Gunakan nilai default.	Let's Encrypt
   Certificate domain names	Masukkan nama domain statis, dinamis, dan fungsi edge yang dikonfigurasi pada langkah sebelumnya.	images.example.com www.example.com shopping.example.com

5. Penerbitan sertifikat memerlukan waktu 5 hingga 10 menit. Sertifikat kemudian secara otomatis dideploy ke ESA.

4.3 Konfigurasikan protokol dan port origin

ESA menggunakan HTTPS untuk pengambilan asal secara default. Karena origin pada contoh ini tidak mendukung HTTPS, konfigurasikan ESA untuk menggunakan HTTP sebagai gantinya.

1. Di ESA console, klik Websites di panel navigasi kiri, lalu klik situs target.

2. Di halaman manajemen situs target, pilih Edge Certificates di panel navigasi kiri.

3. Di bagian Origin Certificates, temukan Origin Protocol and Port lalu klik Configure. Konfigurasikan parameter lalu klik OK.

   Parameter	Deskripsi	Contoh nilai
   Origin protocol	Pilih HTTP karena origin tidak mendukung HTTPS.	HTTP
   HTTP port	Pertahankan nilai default 80.	80

4.4 Uji dan publikasikan fungsi edge

1. Login ke ESA console, lalu di panel navigasi kiri, pilih Edge Computing > Functions and Pages.

2. Di halaman daftar Functions and Pages, klik fungsi target.

3. Di halaman detail fungsi, beralih ke tab Code. Ganti variabel urlPrefix dengan nama domain origin Anda www.example.com, lalu klik Save.

   // Komentar: Fungsi ini menangani permintaan HTTP dan merender halaman HTML dengan data dinamis.
   async function handleRequest(request) {
       const urlPrefix = 'www.example.com';
       // URL permintaan file HTML.
       const staticDataUrl = 'http://' + urlPrefix + '/index.html';
       // URL permintaan data dinamis.
       const dynamicDataUrl = 'http://' + urlPrefix + '/ItemsInfo.json';
   
       // Gunakan Cache API untuk mengambil data kerangka halaman.
       const htmlCache = await cache.get(staticDataUrl);
       let html = '';
       if (htmlCache === undefined) {
           const htmlResponse = await fetch(staticDataUrl);
           html = await htmlResponse.text();
           await cache.put(staticDataUrl, new Response(html, { headers: [["cache-control", "max-age=1000"]] }));
       } else {
           html = await htmlCache.text();
       }
   
       // Ambil data produk dari server origin.
       const jsonResponse = await fetch(dynamicDataUrl);
       const json = await jsonResponse.json();
   
       // Bungkus data dinamis ke dalam blok div.
       let itemsHtml = '';
       for (const item of json.data) {
           const itemHtml = `
               <div class="bg-white overflow-hidden shadow rounded-lg">
                           <div class="p-4">
                               <img class="h-48 w-full object-cover" src="${item.image}" alt="Gambar placeholder produk">
                               <h3 class="mt-2 text-gray-900 text-sm font-medium">${item.title}</h3>
                               <div class="mt-4">
                                   ${item.originalPrice}
                               </div>
                               <div class="mt">
                                   ${item.discountPrice}
                               </div>
       
                           </div>
                       </div>`;
           itemsHtml += itemHtml;
       }
   
       // Ganti #(itemsHtml) di HTML statis dengan data dinamis.
       const finalHtml = html.replace("#(itemsHtml)", itemsHtml);
   
       // Kembalikan halaman HTML yang dirender di POP ke browser.
       return new Response(finalHtml, {
           headers: {
               "content-type": "text/html;charset=UTF-8",
           },
       });
   }
   
   export default {
       async fetch(request) {
           return handleRequest(request);
       },
   };
   

4. Klik Request di pojok kanan atas untuk menjalankan pengujian lokal. Log eksekusi muncul di bagian kiri bawah.

5. Setelah pengujian berhasil, klik One-click Release untuk mendeploy kode ke produksi.

5.1 Verifikasi solusi

1. Setelah dipublikasikan, verifikasi hasilnya:

   • Buka browser dan akses domain fungsi edge (misalnya, https://<your_edge_function_domain_name>).

   • Verifikasi bahwa halaman dimuat dan data produk dirender secara dinamis.

   • Gunakan alat developer browser untuk memastikan bahwa sumber daya statis di-cache dan data dinamis dipercepat oleh POP.

Jika verifikasi berhasil, halaman menampilkan saluran pakaian wanita pusat perbelanjaan: kotak pencarian di bagian atas, tab navigasi kategori seperti Dresses, T-shirts, Jeans, Coats, dan Sportswear, serta kisi kartu produk. Setiap kartu menampilkan gambar produk, nama produk, harga asli yang dicoret, dan harga promosi berwarna merah. Hal ini menunjukkan bahwa data produk dirender secara dinamis di POP tepi.

Di panel Network DevTools, pilih permintaan sumber daya statis seperti gambar lalu periksa Response Headers. Kolom berikut mengonfirmasi cache hit CDN:

• X-Site-Cache-Status: nilainya HIT, yang menunjukkan bahwa sumber daya disajikan dari cache POP tepi.

• X-Swift-Cachetime: nilainya 3600, yang menunjukkan bahwa cache berlaku selama 3600 detik.

• X-Swift-Savetime: waktu saat sumber daya ditulis ke cache.

5.2 Bersihkan sumber daya (Opsional)

Jika Anda tidak lagi memerlukan sumber daya ini, hapus untuk menghindari biaya:

1. Hapus situs.

   Login ke ESA console. Di panel navigasi kiri, klik Websites. Di halaman daftar Manajemen Situs, klik Delete di kolom Actions.

2. Hapus fungsi edge.

   Di ESA console, pilih Edge Computing > Functions and Pages di panel navigasi kiri. Di halaman daftar Functions and Pages, klik fungsi target. Di tab Basic Information, klik Delete Routine.

3. Lepaskan instance ECS.

   Login ke konsol ECS. Di halaman Instance, temukan instance target. Di kolom Actions, pilih Release lalu ikuti petunjuk di layar untuk melepaskan instance.

4. Hapus security group.

   Login ke konsol ECS. Di halaman Security Groups, temukan security group target. Di kolom Actions, klik Delete lalu ikuti petunjuk di layar untuk menghapus security group.