使用 AWS Lambda@Edge 與 CloudFront

上一個

下一個

Lambda@Edge 是 AWS Lambda 計算服務的補充，用於自定義 CloudFront 傳遞的內容。

下圖顯示了 AWS Lambda 與 CloudFront 的工作原理（來自 AWS）：

AWS Lambda 可以透過四種方式使用：

檢視器請求 - 終端使用者向 CloudFront 發出稱為檢視器請求的請求
源請求 - CloudFront 將請求轉發到源伺服器
源響應 - CloudFront 從源伺服器接收響應
檢視器響應 - CloudFront 將響應傳送給檢視器

我們可以將 Lambda@Edge 用於以下目的：

在請求和響應時更改標頭。
將 Cookie 詳細資訊新增到標頭。根據請求和響應執行 A/B 測試。
根據標頭詳細資訊將 URL 重定向到另一個站點。
我們可以從標頭中獲取使用者代理，並找出瀏覽器、作業系統等詳細資訊。

先決條件

要開始使用 CloudFront 和 Lambda@Edge，我們需要以下內容：

建立包含檔案詳細資訊的 S3 儲存桶
建立允許使用 CloudFront 和 Lambda@Edge 的角色
建立 CloudFront 分發
建立 Lambda 函式
將 Lambda 函式詳細資訊新增到 CloudFront
在瀏覽器中檢查 CloudFront URL

我們將使用 CloudFront 和 Lambda@Egde 進行一個示例，其中我們將託管頁面並在檢測到桌面和裝置時更改響應。

建立包含檔案詳細資訊的 S3 儲存桶

登入 AWS 控制檯並在 S3 中建立一個儲存桶，並新增您要顯示的.html檔案。

單擊S3和建立儲存桶，如下所示：

現在，單擊建立儲存桶按鈕並新增儲存桶的詳細資訊，如下所示：

單擊建立按鈕並將 .html 上傳到其中。

建立角色

轉到 AWS 控制檯並單擊IAM。

現在，單擊角色 -> 建立角色按鈕，如下所示：

選擇S3、Lambda和Cloudfront的許可權。最佳實踐是使用 ARN 詳細資訊建立策略，僅授予所需函式和儲存的許可權。

在下面討論的示例中，我們顯示了完全訪問許可權。如上所示，為角色名稱cloudfront 的角色添加了策略。單擊建立角色。

lambda@edge 和 cloudfront 所需的所有策略如上所示。這裡還需要執行一個額外的步驟，因為在 cloudfront 的情況下，URL 將在整個區域可用，並且它需要我們在使用的服務之間建立信任關係。

現在，對於建立的角色，單擊信任關係選項卡，如下所示：

單擊編輯信任關係，如下所示：

它顯示一個策略文件。我們需要在主體 -> 服務中新增我們計劃使用的其他服務。最終的信任關係策略文件如下所示：

單擊更新信任策略按鈕以儲存更改。

建立 CloudFront 分發

轉到 CloudFront 服務，如下所示：

單擊 CloudFront 服務，然後單擊建立分發：

源設定、行為設定和分發設定

讓我們逐一瞭解這些設定：

源設定

源設定的各種引數解釋如下：

源域名 - 這是我們儲存 html 檔案的 S3 儲存桶的名稱。我們還可以透過建立我們選擇的資料夾將影像（如果有）儲存在 S3 儲存桶中。

源路徑 - 在這裡，您需要輸入儲存檔案的資料夾名稱。目前，我們沒有此資料夾，因此我們現在將保持為空。

源 ID - 選擇源域名後，它將自動填充。您可以根據自己的選擇更改 ID。

限制儲存桶訪問 - 在此，我們將選擇是選項。這裡我們需要 S3 儲存桶的安全，以便任何人都無法訪問 S3 儲存桶。對於此選項，還會填充一些其他選項，如源訪問標識、註釋和授予儲存桶讀取許可權。

源訪問標識 - 我們使用了建立新標識選項。您還可以選擇現有標識。這將建立一個新標識，CloudFront 使用它從 S3 儲存桶讀取詳細資訊。

授予儲存桶讀取許可權 - 為此，選擇是選項。

源自定義標頭 - 我們將此處標頭保留為空白，因為我們現在不需要這些詳細資訊。

接下來，讓我們討論並填寫 Cloudront 分發的行為設定：

現在，選擇協議 – https 或 http，以及快取選項。請注意，預設快取為 86400 或 24 小時。您可以根據需要更改此值。

單擊物件快取（自定義選項）以更改快取。如果您的頁面上有任何影片，您可以使用平滑流。在這裡，我們保留可用的預設選項。建立 Lambda 函式後，將新增其詳細資訊。

分發設定的詳細資訊如下所示：

分發設定的各種引數解釋如下：

價格等級 - 它包含使用者流量來源的詳細資訊。請注意，這裡我們選擇了預設選項 -使用所有邊緣位置。

AWS WAF Web ACL - 這是用於 Web 應用程式防火牆選擇。這裡，它具有無選項。首先，我們需要在 AWS 中建立防火牆。它為網站提供安全保障。

備用域名 - 如果您有域名，可以在此處指定。

SSL 證書 - 此處包含為 SSL 證書選擇的所有詳細資訊。我們將保留預設值。

預設根物件 - 在這裡，我們將指定我們在 S3 中上傳的檔名。為此，我們需要預設顯示 .html 中的內容。

對於其餘部分，我們將保留預設設定。

單擊建立分發按鈕以新增分發。

請注意，分發需要一些時間才能顯示為已部署狀態。

建立 AWS Lambda 函式

轉到 AWS 控制檯並建立 Lambda 函式。

在 AWS Lambda 程式碼中，我們將獲取請求標頭並檢查使用者代理。如果使用者代理來自桌面，我們將更改響應以顯示訊息“DESKTOP：歡迎使用 AWS Lambda 和 Cloudfront！”，如果來自裝置，則訊息將為“MOBILE DEVICES：來自 Lambda@Edge 的問候！”

相應的 AWS Lambda 程式碼如下所示：

let content = `
<\!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Simple Lambda@Edge Static Content Response</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   
   <body>
      <h1>MOBILE DEVICES : Hello from Lambda@Edge!</h1>
   </body>
</html>
`;
let content1 = `
<\!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Simple Lambda@Edge Static Content Response</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   
   <body>
      <h1>DESKTOP : Welcome to AWS Lambda with Cloudfront!</h1>
   </body>
</html>
`;
exports.handler = (event, context, callback) => {
   let request = event.Records[0].cf.request;
   let finalrequest = JSON.stringify(request);
   let headers = request.headers;
   let useragent = JSON.stringify(headers["user-agent"][0].value);
   let str = "";
   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i.test(useragent)) {
      str = content;
   } else {
      str = content1;
   }
   const response = {
      status: '200',
      statusDescription: 'OK',        
      body: str+useragent,
   };
   callback(null, response);
};

現在，儲存 Lambda 函式。請注意，我們需要釋出 Lambda 函式才能將其用於所有區域。要釋出，我們需要執行以下操作：

從操作下拉選單中，選擇釋出新版本，如下所示：