Edge Security Acceleration：ESA利用函數和Pages加速網站渲染

2.1 準備環境和資源

1. 登入OSS管理主控台，進入Bucket列表頁面，然後單擊建立Bucket，填寫Bucket名稱，其餘參數保留預設配置即可，隨後點擊完成建立。

   

2. 選擇上一步建立Bucket，在檔案清單頁面進行檔案上傳。將檔案素材中的商品圖片集解壓，然後上傳到該Bucket的根目錄中。

   

   說明

   OSS的圖片資源建議放置在根目錄。

2.2 配置靜態資源的加速網域名稱

1. 在ESA控制台，選擇網站管理，在網站列單擊目標網站。

2. 左側導覽列，單擊DNS > 記錄 > 添加記錄，根據不同的記錄類型添加解析記錄。

   配置項	樣本值
   記錄類型	CNAME
   主機記錄	images
   代理程式狀態	開啟
   記錄值/來源站點	OSS
   回源類型	私人訪問-同帳號
   授權	預設會自動授權同帳號的私人訪問
   OSS地址	website-resources-shopping.*******.aliyuncs.com
   回源HOST	跟隨來源站點網域名稱
   TTL	自動

3. 記錄類型選擇圖片視頻，點擊完成。

4. DNS記錄建立成功後，複製CNAME設定精靈頁面中的主機記錄和記錄值。

   

5. 進入Alibaba Cloud DNS控制台，在左側功能表列單擊公網DNS解析 > 權威網域名稱解析，在權威網域名稱頁簽下找到目標網站的網域名稱，單擊解析設定。

6. 在解析設定中點擊添加記錄，按以下配置添加記錄，單擊確定。

   配置項	樣本值
   記錄類型	CNAME
   主機記錄	images
   記錄值	images.example.com.**.*******.com
   TTL	10分鐘

7. 返回步驟4所在的CNAME設定精靈頁面，在步驟3.CNAME驗證生效中單擊查詢。當提示內容出現CNAME已生效，則證明CNAME配置完成。

   

   說明

   CNAME生效時間可能需要數分鐘，配置完成之後，如果沒有及時生效，請耐心等待。

8. 通過在瀏覽器上輸入http://{加速網域名稱}/1.png來測試是否可以正常顯示圖片。

   說明

   如果訪問出現了404的錯誤，請修改URL，按照檔案目錄路徑訪問即可。例如，如果您的圖片沒有放置在根目錄，而是放置在images目錄下，則此時您的訪問路徑應該為http://{加速網域名稱}/images/1.png。

3.1 準備環境

1. 登入ECS管理主控台。

2. 在左側導覽列，選擇執行個體與鏡像>執行個體，在頂部功能表列，選擇華東1（杭州）地區。

3. 在執行個體頁面，單擊建立執行個體。然後在Elastic Compute Service購買頁面，建立Elastic Compute Service。

3.2 部署動態資源

1. 登入ECS控制台。

2. 在左側導覽列選擇執行個體與鏡像>執行個體，在頂部功能表列，選擇華東1（杭州）地區。

3. 在執行個體頁面找到目標執行個體，單擊執行個體ID進入執行個體詳情頁。

4. 單擊遠端連線，選擇通過Workbench遠端連線，單擊立即登入，輸入登入密碼完成登入。

   

5. 將檔案素材中的網站代碼和網站商品資料下載到本地，解壓之後，將其中的兩個檔案上傳到ECS伺服器中。

6. 將ItemInfo.json中的網域名稱images.example.com更換為實際配置的靜態資源的加速網域名稱（即步驟2.2中配置的網域名稱）。

   然後依次單擊左上方的檔案>開啟新檔案管理>上傳檔案，然後將下載的兩個文檔上傳到伺服器中。

   

7. 在Workbench控制台中輸入下面的命令，在本地啟動一個簡單的HTTP伺服器。

   cd /  #進入系統根介面
   nohup python -m http.server 80 &  #後台啟動一個連接埠號碼為80的HTTP服務

8. 在瀏覽器中輸入http://<公網IP>/ItemsInfo.json查看是否正確返回商品動態資訊。

3.3 配置動態資源的加速網域名稱

1. 在ESA控制台，選擇網站管理，單擊目標網站操作列的配置DNS記錄。

2. 在左側導覽列，選擇DNS > 記錄。

3. 在記錄列表頁面中單擊添加記錄，根據以下資訊完成參數配置，單擊下一步。

   配置項	樣本值
   記錄類型	A/AAAA
   主機記錄	www
   代理程式狀態	開啟
   記錄值/來源站點	10.0.x.x（目標Elastic Compute Service 的公網 IP 位址）
   TTL	自動

4. 記錄類型選擇API介面，點擊完成。

5. DNS記錄建立成功後，複製CNAME設定精靈頁面中的主機記錄和記錄值。

   說明

   在配置完成之後，請暫勿關閉當前頁面，步驟8中需要回到當前頁面對CNAME記錄是否生效進行驗證。

   

6. 進入Alibaba Cloud DNS控制台，在左側功能表列單擊公網DNS解析 > 權威網域名稱解析，在權威網域名稱頁簽下找到目標網站的網域名稱，單擊解析設定。

7. 在解析設定中點擊添加記錄，按以下配置添加記錄，單擊確定。

   配置項	樣本值
   記錄類型	CNAME
   主機記錄	www
   記錄值	www.example.com.**.*******.com（CNAME設定精靈中的記錄值）
   TTL	10分鐘

8. 返回步驟5所在的CNAME設定精靈頁面，在步驟3.CNAME驗證生效中單擊查詢。當提示內容出現CNAME已生效，則證明CNAME配置完成。

   

   說明

   CNAME生效時間可能需要數分鐘，配置完成之後，如果沒有及時生效，請耐心等待。

4.1 建立函數和Pages

1. 登入ESA控制台，在左側導覽列選擇邊緣計算 > 函數和Pages。

2. 點擊建立，建立方式選擇函數模板，選擇Hello World模板，單擊下一步。

3. 填寫函數名稱，根據需要填寫描述資訊，單擊提交。

4. 為函數和Pages添加訪問網域名稱。

   1. 登入ESA控制台，在左側導覽列選擇邊緣計算 > 函數和Pages。

   2. 在函數和Pages列表頁面單擊目標函數。

   3. 在函數詳情頁面，切換至域名頁簽，單擊添加網域名稱。為邊緣函數分配訪問網域名稱shopping.example.com，單擊確定。

   4. 在網域名稱綁定地區找到上一步所建立的邊緣函數網域名稱，在操作列單擊查看DNS記錄，在DNS記錄管理頁面複製邊緣函數網域名稱對應的CNAME值。

      

   5. 登入Alibaba Cloud DNS控制台，在左側功能表列單擊公網DNS解析 > 權威網域名稱解析，在權威網域名稱頁簽下找到目標網站的網域名稱，單擊解析設定。

   6. 在解析設定中單擊添加記錄，按以下配置添加記錄，單擊確定。

      配置項	說明	樣本值
      記錄類型	選擇網域名稱指向的類型。	CNAME
      主機記錄	根據網域名稱首碼填寫主機記錄。	shopping
      記錄值	填寫邊緣函數網域名稱對應的CNAME值。	shopping.example.com.**.*******.com
      TTL	網域名稱的更新周期，保留預設值。	10分鐘

   7. 重新整理DNS記錄頁面，檢查邊緣函數網域名稱對應CNAME狀態是否從待配置轉變為已配置。

      說明

      CNAME生效時間可能需要數分鐘，配置完成之後，如果沒有及時生效，請耐心等待。

4.2 配置邊緣認證

邊緣安全加速 ESA支援HTTPS安全Data Encryption Service，您可以在ESA的邊緣認證中配置SSL認證並開啟SSL/TLS功能，實現用戶端與ESA節點間請求的加密傳輸。在該實踐中，推薦您申請免費認證。更多邊緣認證的內容您可以參考如何配置邊緣認證。

1. 在ESA控制台，單擊左側網站管理，在網站管理頁面中單擊目標網站。

2. 在目標網站管理頁面，在左側功能表列中單擊SSL/TLS > 邊緣認證。

3. 在邊緣認證中找到開啟SSL/TLS，點擊右側的按鈕，開啟該功能。

   

4. 在邊緣認證中找到證書管理，點擊申請免費認證，根據以下資訊完成參數配置，單擊確定。

   配置項	說明	樣本值
   憑證授權單位	此處選擇預設值。	Let's Encrypt
   認證網域名稱	填寫前幾個步驟中靜態資源網域名稱、動態資源網域名和邊緣函數網域名稱。	images.example.com www.example.com shopping.example.com

5. 免費認證的申請大約需要5-10分鐘，待認證申請完成之後，會自動部署到ESA平台，無需您再手動操作。

4.3 配置回源協議和連接埠

當SSL認證配置完成之後，ESA預設跟隨用戶端協議（HTTPS）回源。但此實踐中，來源站點並不支援HTTPS協議，此時以HTTPS協議回源會導致回源失敗。因此需要在ESA上指定以HTTP協議回源。

1. 在ESA控制台，單擊左側網站管理，在網站管理頁面中單擊目標網站。

2. 在目標網站管理頁面，在左側功能表列中單擊SSL/TLS > 邊緣認證。

3. 在來源站點認證中找到回源協議和連接埠，點擊配置，根據以下資訊完成參數配置，單擊確定。

   配置項	說明	樣本值
   回源協議	因為來源站點並不支援HTTPS協議，此處選擇HTTP。	HTTP
   HTTP連接埠	此處保持預設值80。	80

   

4.4 調試並發布邊緣函數

1. 登入ESA控制台，在左側導覽列選擇邊緣計算 > 函數和Pages。

2. 在函數和Pages列表頁面點擊目標函數。

3. 在函數詳情頁面，切換至代碼頁簽，使用以下JavaScript代碼並將變數urlPrefix替換為來源站點網域名稱www.example.com，單擊儲存。

   async function handleRequest(request) {
       const urlPrefix = 'www.example.com';
       // HTML檔案的請求地址
       const staticDataUrl = 'http://' + urlPrefix + '/index.html';
       // 動態資料的請求地址
       const dynamicDataUrl = 'http://' + urlPrefix + '/ItemsInfo.json';
   
       // 利用CacheAPI查詢頁面骨架資料
       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();
       }
   
       // 回源查詢商品資料
       const jsonResponse = await fetch(dynamicDataUrl);
       const json = await jsonResponse.json();
   
       // 將動態資料封裝成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">
                                   <span class="original-price">${item.originalPrice}</span>
                               </div>
                               <div class="mt">
                                   <span class="text-gray-900 font-semibold">${item.discountPrice}</span>
                               </div>
       
                           </div>
                       </div>`;
           itemsHtml += itemHtml;
       }
   
       // 將靜態HTML中的#(itemsHtml)替換為動態資料
       const finalHtml = html.replace("#(itemsHtml)", itemsHtml);
   
       // 將邊緣節點渲染後的html頁面返回給瀏覽器
       return new Response(finalHtml, {
           headers: {
               "content-type": "text/html;charset=UTF-8",
           },
       });
   }
   
   export default {
       async fetch(request) {
           return handleRequest(request);
       },
   };
   

4. 在代碼編輯器中，單擊右上方請求進行本地調試，在編輯器左下方區塊會對執行過程的日誌進行輸出。

5. 在本地調試通過之後，單擊快速發布即可將代碼部署至線上環境。

5.1 方案驗證

1. 完成邊緣函數的發布後，您可以通過以下方式驗證其效果：

   • 開啟瀏覽器，訪問您在步驟4.1中建立的邊緣函數網域名稱（https://<您的邊緣函數網域名稱>）。

   • 檢查頁面是否正常載入，商品資訊是否動態渲染。

   • 使用開發人員工具查看網路請求，確認靜態資源是否命中緩衝，動態資料是否通過邊緣節點加速。

5.2 清理資源（可選）

在本方案中，您建立多個雲資源執行個體。測試完方案後，如果不再需要這些資源，您可以參考以下規則處理對應產品的執行個體，避免繼續產生費用：

1. 刪除加速節點。

   登入ESA控制台，在左側導覽列單擊網站管理，在網站管理列表頁面右側操作列單擊刪除。

2. 刪除邊緣函數。

   在ESA控制台，在左側導覽列單擊邊緣計算 > 函數和Pages，在函數和Pages列表頁面點擊目標函數，在基本資料頁簽中點擊刪除函數。

3. 釋放ECS執行個體。

   登入ECS控制台，在執行個體頁面，找到目標執行個體，然後在操作列選擇釋放，根據介面提示釋放執行個體。

4. 刪除1個安全性群組：

   登入ECS控制台，在安全性群組頁面，找到目標安全性群組，在操作列中單擊刪除，按照介面提示刪除安全性群組。