top of page
作家相片Elite Cloud

AWS CloudFront:加速且更安全的網站解決方案

在當今的數位化世界中,網站已成為我們生活中不可或缺的一部分,不論是個人使用還是商業用途,目的都是要接觸不僅僅是本地的受眾,還包括全球的使用者。然而,存在一個問題:距離網站伺服器越遠,網站載入的時間就越長。在日益競爭的數位環境中,這種延遲可能成為關鍵因素。為了縮短這種地理上的距離,我們可以採用內容傳遞網路 (CDN) 技術。


什麼是內容傳遞網路 (CDN)?


CDN 本質上是一個由伺服器組成的網路,這些伺服器策略性地分佈於不同的地區和國家,覆蓋廣大的地理範圍。當使用 CDN 時,它會在這些伺服器上儲存網站的快取版本。因此,當有人訪問您的網站時,CDN 不會從原始伺服器提取內容,而是從離使用者較近的伺服器提供快取版本。這大幅加快了載入速度,提升整體使用者體驗。


什麼是 CloudFront?

CloudFront

Amazon CloudFront 是 AWS 提供的一項服務,用於加速分發靜態和動態網頁內容,如 .html、.css、.js 檔案和圖片檔案等。CloudFront 是一種內容傳遞網路 (CDN),透過稱為邊緣節點的全球數據中心網路傳遞內容。CloudFront 的目的是消除用戶端與伺服器之間的數據傳輸延遲,它允許使用者連接到最近的邊緣節點,該節點再與主要伺服器連接,類似於 CloudFlare 的 CDN。


CloudFront 的核心功能


1. 全球內容傳遞網路 (CDN)


CloudFront 擁有遍佈全球的邊緣節點網路,無論使用者位於何處,都能快速高效地傳遞內容。


2. 與 AWS 服務的整合


CloudFront 與其他 AWS 服務(如 Amazon S3、AWS WAF、Amazon EC2 和 Amazon Route 53)無縫整合,增強了內容傳遞的功能性和安全性。


3. 快取功能


CloudFront 可根據您指定的時間在邊緣節點快取內容副本,當使用者請求內容時,會從最近的邊緣節點提供,降低延遲並改善載入時間。


4. 動態和靜態內容傳遞


CloudFront 支援靜態(不變)和動態(頻繁變更)的內容傳遞,適用於不同類型的網頁內容。


5. 安全性


CloudFront 提供多項安全功能,包括支援 HTTPS 加密數據傳輸、整合 AWS Shield 防禦 DDoS 攻擊,以及可使用 AWS WAF 過濾惡意網頁流量。


如何使用 CloudFront 與 Amazon S3?

在本次示範中,我們將在一個代表靜態網站的 S3 儲存桶前配置 CloudFront。如果您需要了解如何設定 S3 儲存桶,建議參考我們的 S3 相關文章。或者,您也可以從「S3」設定頁面建立一個新的儲存桶。現在點擊「Create bucket」。

Create S3 bucket

根據之前的 S3 文章,您應該已經了解每個欄位的意義。只需填寫儲存桶名稱,保持其他設定為預設值,然後點擊「Create bucket」。

Create S3 bucket

這樣就會建立儲存桶。現在,點擊儲存桶名稱進入儲存桶,然後上傳您的網站檔案。在這裡,我上傳了一個簡單的 HTML 檔案,以及一個 CSS 檔案和一個圖片檔案。

Upload files to S3

這就是該網站的外觀。

Access S3 demo website

這些檔案目前無法公開訪問,因此您無法直接存取它們。


現在,讓我們前往 CloudFront 並將其與這個 S3 儲存桶進行配置。這樣,您將能夠透過 CloudFront 訪問 S3 儲存桶,而不是直接訪問。

CloudFront

在那裡,點擊「Create a CloudFront distribution」按鈕。AWS CloudFront 提供免費層級,每月可傳輸一定量的數據和網頁請求。

CloudFront free tier

如果超出免費使用限制,您將需支付預定的費用。您可以在 Amazon CloudFront 定價頁面 查看詳細的定價資訊。

CloudFront pricing

當您點擊「Create CloudFront distribution」按鈕後,系統將引導您進入 CloudFront 設定頁面。在這裡,您需要建立一個發佈分佈,選擇來源(Origin),並配置 CDN。


在「Origin domain」欄位中搜尋「S3」,然後選擇您希望在 CloudFront 中使用的儲存桶。

Selecting Cloudfront origin domain

保持「Origin path」和「Name」為預設值,然後在「Origin access」部分將其更改為「Origin access control settings(建議)」。這將要求您選擇一個「Origin access control」。如果您尚未有設定,可以點擊「Create control setting」來建立一個。

Origin access control settings

在「Create control setting」中,保持所有設定為預設值,您可以選擇性地添加描述,然後點擊「Create」。


接下來,將「Add custom header」和「Enable Origin Shield」保持為預設值。在「Default cache behavior」部分,您可以控制快取設定、協定、HTTP 方法、快取政策以及其他附加設定。本次示範中,我們採用預設設定。


跳過「Function associations」部分,因為它是可選的。在「Web Application Firewall (WAF)」部分,選擇「Do not enable security protections」,以保持本次示範簡單易行。如果需要更多資訊,可以參考我們專門介紹 AWS WAF 的文章。

WAF

現在,在設定部分保持所有選項為預設值,然後找到「Default root object」欄位,輸入「index.html」作為預設的根檔案。這是可選的,但建議指定根檔案以確保網站正常運行。


接著,點擊「Create distribution」。

Creating Cloudfront

這可能會顯示類似以下的錯誤訊息。

aws error

在這種情況下,您需要提交一個支援請求以增加服務限制。您可以按照提供的連結進行操作,通常在一小時內 AWS 支援團隊會解決此問題,您即可繼續進行。


成功建立 CloudFront 分配後,您需要從頁面上的黃色警告訊息中複製 S3 政策。

Cloudfront successful

接著,在新分頁中開啟 S3 儲存桶的權限連結。

s3 bucket permission

在該頁面中,點擊「Edit」按鈕以編輯儲存桶政策(Bucket Policy)。

adding bucket policy

現在,將您從 CloudFront 頁面複製的政策貼上。政策內容會像這樣顯示。

adding bucket policy

此政策將允許 CloudFront 使用「GetObject」權限訪問您指定的儲存桶並讀取其中的物件。完成後,點擊「Save changes」以保存更改,這樣 S3 的設定就完成了。


接下來,返回 CloudFront 設定頁面,檢查「Last modified date」欄位。如果您看到日期和時間,表示所有設定已完成。

cloudfront status

現在,您可以複製發佈分配的網域名稱,並通過 CloudFront 存取您的網站。

s3 demo website with cloudfront

這將使網站從 CloudFront 的快取伺服器載入,並為您的網站新增 HTTPS 支援。對於像這樣的輕量網頁,可能無法顯著看出差異,但當您的網站包含大量內容和檔案時,您將能明顯感受到載入速度的提升。


如何使用 CloudFront 與 Amazon EC2?

若要在 EC2 實例前使用 CloudFront,您需要已經擁有一個託管網站的 EC2 實例。如果您不知道如何建立 EC2 實例,建議參考我們的 EC2 相關文章。


現在,前往 CloudFront 首頁,點擊「Create Distribution」按鈕。


Cloudfront homepage

在「Origin domain」欄位中,貼上您的 EC2 實例的公開 IP 或 AWS 提供的 DNS 名稱。

creating cloud front origin

將此部分的其他設定保持為預設值。在「Default cache behavior」中選擇「CacheOptimized」快取策略設定。

cloudfront cache

您也可以建立自訂的快取策略,並根據需求進行配置。不過,目前我們將「Web Application Firewall (WAF)」部分保持為預設值,並在 WAF 區塊中選擇「Do not enable security protections」。

WAF

將其他設定保持為預設值,然後點擊「Create distribution」。請記住,您可以在建立來源分配後隨時更改大多數設定。這個部署過程需要一些時間,完成後,您會在「Deploying」狀態的位置看到「Last modified date」的日期與時間,表示部署成功。

Status

完成後,複製發佈分配的網域名稱,您即可通過 CloudFront 訪問 EC2 網站。


如果遇到錯誤,進入分配中的「Origins」部分,選擇來源名稱,然後點擊「Edit」。

changing protocol

將協定更改為「HTTP only」,然後點擊「Save」。

changing protocol

這樣問題應該就能解決。現在讓我們比較網站在使用前後的速度差異。首先,我們直接使用 EC2 的 URL 瀏覽網站。

response time before

直接使用 EC2 URL 瀏覽時,響應時間為 774 毫秒 (ms),這是網站載入所需的總時間。


現在透過 CloudFront 快取的網域名稱瀏覽網站,可以看到響應時間顯著降低到僅 17 毫秒 (ms)

response time after

這僅僅是一個靜態網站的示範。在實際的生產環境中,後端可能會處理數百甚至數千個請求。使用像 CloudFront 這樣的 CDN,可以顯著提升網站的速度。


請注意,這次示範並非針對生產環境。建議依據 AWS 官方文件,由 AWS 雲端專家指導下進行服務的設置與配置。


當您完成使用 CloudFront 或其他 AWS 服務後,建議停止或移除相關資源,以免因閒置運行而產生不必要的費用。


對於 EC2 實例,您可以通過以下步驟停止實例:

1. 選擇您要停止的 EC2 實例。

2. 點擊 Instance state > Stop instance

Cleaning up

接下來,對於 S3,進入 S3 主頁,選擇「Buckets」,選擇您想要刪除的 S3 儲存桶,然後點擊「Empty」。系統將要求確認,輸入 permanently delete,然後按下 Enter 鍵。這需要一些時間,會將 S3 儲存桶中的物件移除。


之後,返回儲存桶主頁,選擇該儲存桶。這次點擊「Delete」按鈕。.

Cleaning up

輸入儲存桶名稱進行確認,然後點擊「Delete bucket」。

Cleaning up

這將刪除該 S3 儲存桶。


對於 CloudFront,進入 CloudFront 分配的主頁,選擇您想刪除的分配,然後點擊「Disable」。

Cleaning up

按照確認流程操作。這需要一些時間。當您在「Last modified」欄位中看到日期時,表示已成功停用分配。此時,您可以再次選擇分配,然後點擊「Delete」按鈕。

Cleaning up

按照確認流程操作,該分配將從您的帳戶中刪除。您可以返回分配主頁再次確認,確保該分配已成功刪除。

Cleaning up

結論


Amazon CloudFront 是優化網站效能與內容傳遞的重要服務。透過其全球邊緣節點網路,CloudFront 大幅降低延遲,確保全球使用者能快速且可靠地存取網站內容。CloudFront 與其他 AWS 服務的無縫整合,加上其強大的安全功能,使其成為任何希望在全球範圍內有效傳遞內容的用戶不可或缺的工具。

bottom of page