Edge Security Acceleration:Percepat rendering situs web menggunakan fungsi tepi ESA

2.1 Persiapkan lingkungan

1. Masuk ke Konsol OSS. Buka halaman Bucket dan klik Create Bucket. Masukkan Bucket Name. Pertahankan pengaturan default untuk parameter lainnya dan klik Create.

   

2. Pilih bucket yang Anda buat. Di halaman daftar file, unggah file yang diperlukan. Ekstrak set gambar dari bagian Bahan File dan unggah gambar ke direktori root bucket.

   

   Catatan

   Kami merekomendasikan menyimpan sumber daya gambar di direktori root bucket OSS.

2.2 Konfigurasikan nama domain untuk sumber daya statis

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

2. Di panel navigasi kiri, pilih DNS > Records > Add Record. Tambahkan rekaman DNS. Tabel berikut menunjukkan pengaturan contoh:

   Konfigurasi	Contoh nilai
   Record Type	CNAME
   Hostname	images
   Proxy Status	Diproksikan
   Record Value	OSS
   Access Type	Akses Pribadi (Akun yang sama)
   Authorization	Secara default, akses pribadi untuk akun yang sama diotorisasi secara otomatis.
   OSS Bucket	website-resources-shopping.*******.aliyuncs.com
   Origin Host	Cocokkan Nama Domain Asal
   TTL	Otomatis

3. Untuk Tipe Rekaman, pilih Images/Video dan klik Done.

4. Setelah rekaman DNS dibuat, salin Hostname dan Record Value dari halaman Panduan Konfigurasi CNAME.

   

5. Pergi ke DNS Alibaba Cloud console. Di panel navigasi kiri, pilih Public Zone. Temukan nama domain situs web target dan klik Settings.

6. Di bagian Settings, klik Add Record. Tambahkan rekaman dengan pengaturan berikut dan klik OK.

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

7. Kembali ke halaman Panduan Konfigurasi CNAME dari Langkah 4. Di langkah CNAME Verification, klik Query. Jika statusnya adalah Effective, rekaman CNAME berhasil dikonfigurasi.

   

   Catatan

   Rekaman CNAME mungkin memerlukan beberapa menit untuk berlaku.

8. Uji apakah gambar dapat ditampilkan dengan memasukkan http://{nama domain yang dipercepat}/1.png di browser Anda.

   Catatan

   Jika terjadi kesalahan 404, coba modifikasi URL untuk mengakses file berdasarkan jalur direktorinya. Misalnya, jika gambar Anda berada di direktori gambar alih-alih direktori root, akses http://{nama domain yang dipercepat}/images/1.png.

3.1 Persiapkan lingkungan

1. Masuk ke Konsol ECS.

2. Di panel navigasi kiri, pilih Instances & Images > Instances. Di bilah menu atas, pilih wilayah tempat instans Anda berada. Dalam contoh ini, itu adalah China (Hangzhou).

3. Di halaman Instances, klik Create Instance. Lalu buat instans ECS merujuk pada contoh berikut:

3.2 Sebarkan sumber daya dinamis

1. Masuk 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 dan klik ID instans untuk masuk ke halaman detail instans.

4. Klik Remote Connection. Pilih Connect dan klik Sig In Now. Masukkan kata sandi logon untuk masuk ke instans.

   

5. Unduh skrip demo Python dan data produk dari Bahan File. Setelah mengekstrak paket tersebut, unggah kedua file ke server ECS.

6. Ganti nama domain images.example.com di ItemInfo.json dengan nama domain yang dipercepat untuk sumber daya statis yang Anda konfigurasikan di Bagian 2.2.

   Kemudian, di pojok kiri atas, pilih File > New File Manager Window > Upload File. Unggah dua dokumen yang diunduh ke server.

   

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

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

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

3.3 Konfigurasikan nama domain untuk sumber daya dinamis

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

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

3. Di halaman daftar rekaman, klik Add Record. Konfigurasikan parameter seperti yang dijelaskan dalam tabel berikut dan klik Next.

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

4. Untuk Tipe Rekaman, pilih API dan klik Complete.

5. Setelah rekaman DNS dibuat, klik CNAME Configuration Guide. Salin Hostname dan Record Value.

   Catatan

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

   

6. Pergi ke Konsol DNS Alibaba Cloud. Di panel navigasi kiri, pilih Public Zone. Temukan nama domain situs target dan klik Settings.

7. Di bagian Settings, klik Add Record. Tambahkan rekaman dengan pengaturan berikut dan klik OK.

   Konfigurasi	Contoh nilai
   Record Type	CNAME
   Hostname	www
   Record Value	www.example.com.**.*******.com (Nilai Record Value dari CNAME Configuration Wizard)
   TTL	10 menit

8. Kembali ke halaman CNAME Configuration Wizard dari Langkah 5. Di langkah CNAME Verification, klik Query. Jika Effective ditampilkan, rekaman CNAME berhasil dikonfigurasi.

   

   Catatan

   Rekaman CNAME mungkin memerlukan beberapa menit untuk berlaku.

4.1 Buat fungsi tepi

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

2. Di halaman Functions and Pages, klik Change di area Account Information di pojok kanan atas.

3. Di kotak dialog Change Plan, pilih Paid dan klik OK.

4. Klik Create. Pilih Hello World dari Function Templates dan klik Next.

5. Masukkan Function Name. Tambahkan deskripsi dan klik Submit.

6. Tambahkan titik akhir untuk fungsi tepi.

   1. Di panel navigasi kiri, pilih Edge Computing > Functions and Pages. Di halaman daftar fungsi tepi, klik fungsi target.

   2. Di halaman detail fungsi, beralih ke tab Domains dan klik Add Domain Name. Tetapkan titik akhir shopping.example.com ke fungsi dan klik OK.

   3. Di area pengikatan nama domain, temukan nama domain fungsi tepi yang Anda buat. Di kolom Actions, klik View DNS Records. Salin nilai CNAME dari nama domain fungsi tepi.

      

   4. Masuk ke Konsol DNS Alibaba Cloud. Di panel navigasi kiri, pilih Public Zone. Temukan nama domain situs web target dan klik Settings.

   5. Di bagian Settings, klik Add Record. Tambahkan rekaman dengan pengaturan berikut dan klik OK.

      Konfigurasi	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 nama domain fungsi tepi.	shopping.example.com.**.*******.com
      TTL	Periode pembaruan nama domain. Pertahankan nilai default.	10 menit

   6. Segarkan halaman rekaman DNS dan periksa apakah CNAME Status untuk nama domain fungsi tepi telah 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 SSL/TLS untuk mengenkripsi transmisi data antara klien dan POP ESA. Untuk solusi ini, kami merekomendasikan agar Anda meminta sertifikat gratis. Untuk informasi lebih lanjut, lihat Cara mengonfigurasi sertifikat tepi.

1. Di Konsol ESA, klik Site Management di sebelah kiri. Di halaman Manajemen Situs, klik situs target.

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

3. Di bagian Edge Certificate, temukan Enable SSL/TLS dan klik sakelar di sebelah kanan untuk mengaktifkan fitur ini.

   

4. Di bagian Edge Certificate, temukan Certificate Management dan klik Request Free Certificate. Konfigurasikan parameter seperti yang dijelaskan dalam tabel berikut dan klik OK.

   Konfigurasi	Deskripsi	Contoh nilai
   Certificate Authority	Pertahankan nilai default.	Let's Encrypt
   Certificate Domain Names	Masukkan nama domain sumber daya statis, nama domain sumber daya dinamis, dan nama domain fungsi tepi dari langkah-langkah sebelumnya.	images.example.com www.example.com shopping.example.com

5. Permintaan sertifikat gratis memakan waktu sekitar 5 hingga 10 menit. Setelah sertifikat diterbitkan, sertifikat tersebut secara otomatis diterapkan ke platform ESA.

4.3 Konfigurasikan protokol asal dan port

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

1. Di Konsol ESA, klik Website di sebelah kiri dan klik situs target.

2. Di halaman Website, pilih SSL/TLS > Origin Certificate di panel navigasi sebelah kiri.

3. Di bagian Origin Certificate, temukan Origin Protocol and Port dan klik Configure. Konfigurasikan parameter seperti yang dijelaskan dalam tabel berikut dan klik OK.

   Konfigurasi	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 tepi

1. Masuk ke Konsol ESA, dan di panel navigasi sebelah kiri, pilih Edge Computing > Functions and Pages.

2. Di halaman daftar fungsi tepi, pilih fungsi target.

3. Di halaman detail fungsi tepi, 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';
       // URL permintaan untuk file HTML
       const staticDataUrl = 'http://' + urlPrefix + '/index.html';
       // URL permintaan untuk data dinamis
       const dynamicDataUrl = 'http://' + urlPrefix + '/ItemsInfo.json';
   
       // Gunakan API Cache untuk meminta 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 asal
       const jsonResponse = await fetch(dynamicDataUrl);
       const json = await jsonResponse.json();
   
       // Enkapsulasi 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="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}${item.discountPrice}

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

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

5.1 Verifikasi demo

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

   • Buka browser dan akses nama domain fungsi tepi yang Anda buat di Bagian 4.1 (https://<Nama domain fungsi tepi Anda>).

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

   • Gunakan alat pengembang browser untuk memeriksa permintaan jaringan. Pastikan sumber daya statis menghasilkan cache hit dan data dinamis dipercepat melalui POP.

5.2 (Opsional) Bersihkan sumber daya

Demo ini melibatkan pembuatan beberapa instans sumber daya. Jika Anda tidak lagi membutuhkan sumber daya tersebut, lepaskan untuk menghindari biaya:

1. Hapus situs web dari ESA.

   Masuk ke Konsol ESA. Di panel navigasi kiri, klik Websites. Temukan situs web yang ingin dihapus dan klik Delete di kolom Actions.

2. Hapus fungsi tepi.

   Di Konsol ESA, pilih Edge Computing > Functions and Pages di panel navigasi sebelah kiri. Klik fungsi yang ingin dihapus dan klik Delete di tab Basic Information .

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.