Edge Security Acceleration:Percepat rendering website dengan Functions and Pages

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 Create.

   

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

   

   Catatan

   Kami menyarankan Anda menyimpan resource gambar di direktori root bucket OSS.

2.2 Konfigurasikan domain yang dipercepat untuk resource statis

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

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

   Parameter	Nilai contoh
   Record Type	CNAME
   Hostname	images
   Proxy Status	Enabled
   Record Value	OSS
   Access Type	Private Access (Same-account)
   Authorization	Akses privat untuk akun yang sama sudah diotorisasi secara default.
   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.

   

5. Buka konsol Alibaba Cloud DNS. Di panel navigasi sebelah 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	Nilai contoh
   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. Jika tidak langsung berlaku, tunggu beberapa menit.

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

   Catatan

   Jika terjadi error 404, ubah URL untuk mengakses gambar berdasarkan path direktorinya. Misalnya, jika gambar Anda berada di direktori images alih-alih direktori root, gunakan path http://<your_accelerated_domain_name>/images/1.png.

3.1 Siapkan lingkungan

1. Login ke konsol ECS.

2. Di panel navigasi sebelah 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 Mendeploy sumber daya dinamis

1. Login ke konsol ECS.

2. Di panel navigasi sebelah 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 proses login.

   

5. Unduh kode website dan data produk dari File resource ke mesin lokal Anda, ekstrak paketnya, lalu unggah dua file dari paket tersebut ke server ECS.

6. Di file ItemInfo.json, ganti nama domain images.example.com dengan nama domain yang dipercepat yang telah Anda konfigurasikan untuk resource statis di Bagian 2.2.

   Lalu, di pojok kiri atas, pilih File > Open New File Management > Upload File untuk mengunggah dua file yang telah diunduh ke server.

   

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

   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 memeriksa apakah informasi produk dinamis dikembalikan dengan benar.

3.3 Konfigurasikan domain yang dipercepat untuk resource dinamis

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

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

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

   Parameter	Nilai contoh
   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

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

   

6. Buka konsol Alibaba Cloud DNS. Di panel navigasi sebelah 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	Nilai contoh
   Record type	CNAME
   Host record	www
   Record value	www.example.com.**.*******.com (nilai record value dari CNAME configuration wizard)
   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. Jika tidak langsung berlaku, 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 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 konsol ESA. Di panel navigasi sebelah 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 pengikatan 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. Login ke konsol Alibaba Cloud DNS. Di panel navigasi sebelah 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	Deskripsi	Nilai contoh
      Record type	Pilih tipe nama domain yang ingin Anda petakan ke rekaman.	CNAME
      Host record	Masukkan rekaman host berdasarkan awalan nama domain.	shopping
      Record value	Masukkan nilai CNAME nama domain fungsi edge.	shopping.example.com.**.*******.com
      TTL	Siklus pembaruan nama domain. Pertahankan nilai default.	10 menit

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

      Catatan

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

4.2 Konfigurasikan sertifikat edge

Edge Security Acceleration (ESA) mendukung HTTPS untuk transmisi data yang aman dan terenkripsi. Anda dapat mengonfigurasi sertifikat SSL di ESA dan mengaktifkan SSL/TLS untuk mengenkripsi permintaan antara client dan POP ESA. Untuk praktik ini, kami merekomendasikan mengajukan sertifikat gratis. Untuk informasi selengkapnya, lihat Konfigurasikan sertifikat edge.

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

2. Di halaman manajemen situs target, pilih SSL/TLS > Edge Certificates dari panel navigasi sebelah 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	Nilai contoh
   Certificate authority	Gunakan nilai default.	Let's Encrypt
   Certificate domain names	Masukkan nama domain resource statis, resource dinamis, dan fungsi edge yang telah Anda konfigurasikan pada langkah-langkah sebelumnya.	images.example.com www.example.com shopping.example.com

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

4.3 Konfigurasikan protokol dan port origin

Setelah mengonfigurasi sertifikat SSL, ESA secara default menggunakan protokol client (HTTPS) untuk origin fetch. Namun, server origin dalam topik ini tidak mendukung HTTPS. Origin fetch menggunakan HTTPS akan gagal, sehingga Anda harus mengonfigurasi ESA untuk menggunakan HTTP dalam origin fetch.

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

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

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

   Parameter	Deskripsi	Nilai contoh
   Origin protocol	Karena server origin tidak mendukung HTTPS, pilih HTTP.	HTTP
   HTTP port	Pertahankan nilai default 80.	80

   

4.4 Uji dan publikasikan fungsi edge

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

3. Di halaman detail fungsi, beralih ke tab Code. Gunakan kode JavaScript berikut dan ganti variabel urlPrefix dengan nama domain asal www.example.com. Lalu, klik Save.

   async function handleRequest(request) {
       const urlPrefix = 'www.example.com';
       // The request URL of the HTML file.
       const staticDataUrl = 'http://' + urlPrefix + '/index.html';
       // The request URL of the dynamic data.
       const dynamicDataUrl = 'http://' + urlPrefix + '/ItemsInfo.json';
   
       // Use the Cache API to query 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 product data from the origin server.
       const jsonResponse = await fetch(dynamicDataUrl);
       const json = await jsonResponse.json();
   
       // Encapsulate 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 dynamic data.
       const finalHtml = html.replace("#(itemsHtml)", itemsHtml);
   
       // Return the HTML page rendered at a 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 menjalankan pengujian lokal. Log eksekusi ditampilkan di bagian kiri bawah editor.

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

5.1 Verifikasi solusi

1. Setelah memublikasikan fungsi edge, Anda dapat memverifikasi hasilnya dengan cara berikut:

   • Buka browser dan akses nama domain fungsi edge yang telah Anda buat di Bagian 4.1 (misalnya, https://<your_edge_function_domain_name>).

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

   • Gunakan alat developer browser untuk melihat permintaan jaringan dan pastikan resource statis disajikan dari cache serta data dinamis dipercepat oleh POP.

5.2 Bersihkan resource (Opsional)

Dalam solusi ini, Anda membuat beberapa instans sumber daya cloud. Jika Anda tidak lagi memerlukan resource ini setelah pengujian, hapus instans tersebut untuk menghindari biaya tambahan:

1. Hapus situs.

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

2. Hapus fungsi edge.

   Di konsol ESA, pilih Edge Computing > Functions and Pages di panel navigasi sebelah 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 instruksi di layar untuk melepaskan instance tersebut.

4. Hapus grup keamanan.

   Login ke konsol ECS. Di halaman Security Groups, temukan grup keamanan target. Di kolom Actions, klik Delete lalu ikuti instruksi di layar untuk menghapus grup keamanan tersebut.