Edge Security Acceleration：Mempercepat rendering website menggunakan Functions and Pages ESA

2.1 Siapkan lingkungan dan resource

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

   

2. Pilih bucket yang Anda buat pada langkah sebelumnya. Pada halaman daftar file, unggah file. Ekstrak kumpulan citra produk dari File materials for the demo dan unggah citra-citra tersebut ke direktori root bucket.

   

   Catatan

   Disarankan untuk menempatkan resource citra di direktori root bucket OSS.

2.2 Konfigurasikan nama domain yang dipercepat untuk resource statis

1. Di Konsol ESA, pilih Websites. Pada kolom Website, klik situs yang dituju.

2. Di panel navigasi sebelah kiri, pilih DNS > Records dan klik Add Record. Tambahkan rekaman DNS berdasarkan Record Type.

   Parameter	Contoh nilai
   Record type	CNAME
   Hostname	images
   Proxy Status	Enabled
   Record Value	OSS
   Access Type	Private Access (Same-account)
   Authorization	Secara default, akses pribadi untuk akun yang sama diotorisasi secara otomatis.
   OSS Bucket	website-resources-shopping.*******.aliyuncs.com
   Origin HOST	Follow origin domain name
   TTL	Otomatis

3. Untuk Record type, pilih Image/Video dan klik OK.

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

   

5. Di konsol DNS Alibaba Cloud, di panel navigasi sebelah kiri, pilih Configurations > Public Zone. Pada tab Public Zone, temukan nama domain situs target dan klik Settings.

6. Pada halaman Settings, klik Add Record. Tambahkan rekaman dengan pengaturan berikut dan klik OK.

   Parameter	Contoh nilai
   Record Type	CNAME
   Hostname	images
   Record Value	images.example.com.**.*******.com
   TTL	10 menit

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

   

   Catatan

   Rekaman CNAME mungkin memerlukan beberapa menit untuk berlaku. Jika belum berlaku segera, tunggu beberapa menit.

8. Masukkan http://{nama domain yang dipercepat}/1.png di browser Anda untuk menguji apakah citra ditampilkan.

   Catatan

   Jika terjadi error 404, ubah URL untuk mengakses file berdasarkan path direktorinya. Misalnya, jika citra Anda berada di direktori images dan bukan di direktori root, path aksesnya adalah http://{nama domain yang dipercepat}/images/1.png.

3.1 Persiapkan lingkungan

1. Masuk ke Konsol ECS.

2. Di panel navigasi sebelah kiri, pilih Instances & Images > Instances. Di bilah menu atas, pilih wilayah tempat instans Anda diterapkan.

3. Pada halaman Instances, klik Create Instance. Lalu, pada halaman pembelian, buat instans ECS.

3.2 Sebarkan sumber daya dinamis

1. Masuk ke Konsol ECS.

2. Di panel navigasi sebelah kiri, pilih Instances & Images > Instances. Di bilah menu atas, pilih wilayah tempat instans Anda diterapkan.

3. Di halaman Instances, temukan instans target dan klik ID instans untuk masuk ke halaman detail instans.

4. Klik Remote Connection, pilih Workbench, lalu klik Sign in now. Masukkan kata sandi logon untuk login.

   

5. Unduh kode website dan data produk dari File materials for the demo ke komputer Anda. Setelah mengekstrak paketnya, unggah kedua file tersebut ke server ECS.

6. Ganti nama domain images.example.com dalam ItemInfo.json dengan nama domain yang dipercepat untuk resource statis yang Anda konfigurasikan di Langkah 2.2.

   Kemudian, di pojok kiri atas, pilih File > Open New File Manager > Upload File. Unggah kedua file yang telah diunduh ke server.

   

7. Di konsol Workbench, masukkan perintah berikut untuk menjalankan server HTTP sederhana pada instans.

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

8. Masukkan http://<IP Publik>/ItemsInfo.json di browser Anda untuk memeriksa apakah informasi produk dinamis dikembalikan.

3.3 Konfigurasikan nama domain yang dipercepat untuk resource dinamis

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

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

3. Pada halaman daftar rekaman, klik Add Record. Konfigurasikan parameter seperti pada tabel berikut dan klik Next.

   Parameter	Contoh nilai
   Record type	A/AAAA
   Hostname	www
   Proxy Status	Enable
   Record Value	10.0.x.x (Alamat IP publik instans ECS target)
   TTL	Otomatis

4. Untuk Record type, pilih API dan klik OK.

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

   Catatan

   Jangan tutup halaman saat ini. Anda perlu kembali ke halaman ini di Langkah 8 untuk memverifikasi apakah rekaman CNAME telah berlaku.

   

6. Di konsol DNS Alibaba Cloud, di panel navigasi sebelah kiri, pilih Configurations > Public Zone. Pada tab Public Zone, temukan nama domain situs target dan klik Settings.

7. Pada halaman Settings, klik Add Record. Tambahkan rekaman dengan pengaturan berikut dan klik OK.

   Parameter	Contoh nilai
   Record Type	CNAME
   Hostname	www
   Record Value	www.example.com.**.*******.com (Record value dari CNAME configuration wizard)
   TTL	10 menit

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

   

   Catatan

   Rekaman CNAME mungkin memerlukan beberapa menit untuk berlaku. Jika belum berlaku segera, tunggu beberapa menit.

4.1 Buat Functions and Pages

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

2. Klik Create. Untuk Creation Method, pilih Function Templates. Pilih Hello World templat dan klik Next.

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

4. Anda dapat menambahkan titik akhir untuk Functions and Pages.

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

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

   3. Pada halaman detail fungsi, beralih ke tab Domain Name dan klik Add Domain Name. Tetapkan titik akhir shopping.example.com ke fungsi tersebut dan klik OK.

   4. Di area pengikatan nama domain, temukan titik akhir fungsi yang Anda buat. Di kolom Actions, klik View DNS Records. Pada halaman manajemen rekaman DNS, salin nilai CNAME dari titik akhir fungsi tersebut.

      

   5. Di konsol DNS Alibaba Cloud, di panel navigasi sebelah kiri, pilih Configurations > Public Zone. Pada tab Public Zone, temukan nama domain situs target dan klik Settings.

   6. Pada halaman Settings, klik Add Record, lalu tambahkan catatan dengan pengaturan berikut dan klik OK.

      Parameter	Deskripsi	Contoh nilai
      Record Type	Pilih tipe ke mana nama domain mengarah.	CNAME
      Hostname	Masukkan rekaman host berdasarkan awalan nama domain.	shopping
      Record Value	Masukkan nilai CNAME yang sesuai dengan titik akhir fungsi.	shopping.example.com.**.*******.com
      TTL	Periode pembaruan nama domain. Pertahankan nilai default.	10 menit

   7. Segarkan halaman rekaman DNS dan periksa apakah Status CNAME untuk titik akhir fungsi berubah dari To Be Configured menjadi Configured.

      Catatan

      Rekaman CNAME mungkin memerlukan beberapa menit untuk berlaku. Jika tidak segera berlaku, tunggu beberapa menit.

4.2 Konfigurasikan sertifikat tepi

ESA mendukung enkripsi HTTPS. Anda dapat mengonfigurasi sertifikat SSL di ESA dan mengaktifkan fitur SSL/TLS untuk mengenkripsi transmisi data antara klien dan POP ESA. Untuk solusi ini, Anda dapat meminta sertifikat gratis. Untuk informasi selengkapnya, lihat Konfigurasikan sertifikat edge.

1. Di konsol ESA, klik Websites di sebelah kiri. Pada halaman manajemen situs, klik situs target.

2. Pada halaman manajemen situs target, di panel navigasi sebelah kiri, pilih SSL/TLS > Edge Certificates.

3. Di bagian Edge Certificates, temukan SSL/TLS dan aktifkan sakelarnya.

   

4. Di bagian Edge Certificates, temukan Certificate Management dan klik Apply for Free Certificate. Konfigurasikan parameter seperti pada tabel berikut dan klik OK.

   Parameter	Deskripsi	Contoh nilai
   Certification authority	Pertahankan nilai default.	Let's Encrypt
   Certificate domain names	Masukkan nama domain resource statis, nama domain resource dinamis, dan titik akhir fungsi dari langkah-langkah sebelumnya.	images.example.com www.example.com shopping.example.com

5. Pengajuan sertifikat gratis memerlukan waktu sekitar 5 hingga 10 menit. Setelah sertifikat diterbitkan, sertifikat tersebut secara otomatis diterapkan ke platform ESA. Tidak diperlukan operasi manual.

4.3 Konfigurasikan protokol asal dan port

Setelah Anda mengonfigurasi sertifikat SSL, ESA secara default menggunakan protokol yang sama dengan permintaan klien (HTTPS) untuk pengambilan asal. Namun, server origin dalam demo ini tidak mendukung HTTPS, sehingga menyebabkan permintaan HTTPS ke server origin gagal. Oleh karena itu, Anda harus menentukan HTTP sebagai protokol origin di ESA.

1. Di konsol ESA, klik Websites di sebelah kiri. Pada halaman manajemen situs, klik situs target.

2. Pada halaman manajemen situs target, di panel navigasi sebelah kiri, pilih SSL/TLS > Edge Certificates.

3. Di bagian Origin Certificates, temukan Origin Protocol and Port dan klik Configure. Konfigurasikan parameter seperti pada tabel berikut dan klik OK.

   Parameter	Deskripsi	Contoh nilai
   Origin protocol	Karena server asal tidak mendukung HTTPS, pilih HTTP.	HTTP
   HTTP port	Pertahankan nilai default 80.	80

   

4.4 Uji dan publikasikan fungsi

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

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

3. Pada halaman detail fungsi, beralih ke tab Code. Di editor kode, ganti kode yang ada dengan kode JavaScript berikut. Dalam kode baru, ganti variabel urlPrefix dengan nama domain origin www.example.com. Lalu, klik Save.

   async function handleRequest(request) {
       const urlPrefix = 'www.example.com';
       // The request URL for the HTML file
       const staticDataUrl = 'http://' + urlPrefix + '/index.html';
       // The request URL for the dynamic data
       const dynamicDataUrl = 'http://' + urlPrefix + '/ItemsInfo.json';
   
       // Use the Cache API to query the page skeleton data
       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();
       }
   
       // Fetch the product data from the origin server
       const jsonResponse = await fetch(dynamicDataUrl);
       const json = await jsonResponse.json();
   
       // Encapsulate the dynamic data into div blocks
       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="Placeholder image of a product">
                               <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;
       }
   
       // Replace #(itemsHtml) in the static HTML with the dynamic data
       const finalHtml = html.replace("#(itemsHtml)", itemsHtml);
   
       // Return the HTML page rendered on the POP to the browser
       return new Response(finalHtml, {
           headers: {
               "content-type": "text/html;charset=UTF-8",
           },
       });
   }
   
   export default {
       async fetch(request) {
           return handleRequest(request);
       },
   };
   

4. Di editor kode, klik Request di pojok kanan atas untuk melakukan pengujian lokal. Log akan ditampilkan di bagian kiri bawah editor.

5. Setelah pengujian lokal berhasil, klik One-click Release untuk menerapkan kode ke lingkungan produksi.

5.1 Verifikasi pengaturan

1. Setelah Anda mempublikasikan fungsi, verifikasi hasilnya dengan cara berikut:

   • Buka browser dan akses titik akhir fungsi yang Anda buat di Langkah 4.1 (https://<titik akhir fungsi Anda>).

   • Periksa apakah halaman dimuat dan apakah informasi produk dirender secara dinamis.

   • Gunakan alat developer di browser Anda untuk melihat permintaan jaringan. Pastikan resource statis disajikan dari cache dan data dinamis dipercepat melalui POP.

5.2 (Opsional) Bersihkan sumber daya

Untuk mencegah biaya berkelanjutan, Anda harus menghapus resource dalam urutan tertentu setelah menyelesaikan tutorial ini.

1. Hapus pengaturan POP akselerasi.

   Login ke konsol ESA. Di panel navigasi sebelah kiri, klik Websites. Pada halaman manajemen situs, temukan situs yang ingin Anda hapus dan klik Delete di kolom Actions.

2. Hapus fungsi tepi.

   Di konsol ESA, di panel navigasi sebelah kiri, pilih Edge Computing > Functions and Pages. Pada halaman Functions and Pages, klik fungsi target. Pada tab Basic Information, klik Delete.

3. Lepaskan instans ECS.

   Masuk ke Konsol ECS. Di halaman Instances, temukan instans target. Di kolom Actions, pilih Release. Lepaskan instans sesuai petunjuk.

4. Hapus grup keamanan.

   Masuk ke Konsol ECS. Di halaman Security Groups, temukan grup keamanan target. Di kolom Actions, klik Delete. Hapus grup keamanan sesuai petunjuk.