CloudFront 高效能內容傳遞網路服務

– 8 分鐘閱讀

CloudFront 作為 CDN 服務，藉由全球邊緣節點網路，將內容快取至靠近使用者處，有效降低延遲並提升傳輸速度。其與 S3、EC2、Lambda@Edge 等 AWS 服務緊密整合，簡化設定流程並降低成本。CloudFront 提供 SSL/TLS 加密、AWS Shield DDoS 防護和 WAF 等安全機制，保障內容傳輸安全。此外，彈性的定價模式和邊緣運算能力，使 CloudFront 成為兼具效能與成本效益的解決方案。開發者可運用 CloudFormation 範本快速佈署和管理 CloudFront，並透過 Lambda@Edge 執行無伺服器程式碼，實作內容客製化。文章將探討 CloudFront 的各項功能，並提供實際案例說明如何整合至前端開發流程，有效提升網頁應用程式效能。

AWS CloudFront：高效能內容傳遞網路服務

AWS CloudFront 是一種快速、安全且全球分佈的內容傳遞網路（CDN）服務，能夠以低延遲和高傳輸速度將網頁內容高效地傳遞給全球使用者。透過其卓越的效能、整合性、安全性和成本效益，CloudFront 成為企業最佳化內容傳遞策略的最佳選擇。

AWS CloudFront 的主要功能與優勢

  1. 全球覆寫與低延遲：AWS CloudFront 利用全球廣泛的邊緣位置網路，確保內容以最小的延遲傳遞給使用者。透過將使用者請求路由到最近的邊緣伺服器，CloudFront 減少了延遲並提供了高速的資料傳輸，顯著提升了使用者經驗。

  2. 與 AWS 服務無縫整合：CloudFront 與其他 AWS 生態系統（如 Amazon S3、EC2 和 Lambda@Edge）無縫整合。開發人員可以利用現有的 AWS 基礎架構進行內容傳遞，簡化設定和管理，同時降低了 AWS 服務之間的資料傳輸成本。

  3. 增強的安全特性：CloudFront 提供強大的安全措施，包括 SSL/TLS 加密、AWS Shield 的 DDoS 防護和 AWS Web 應用防火牆（WAF）。這些功能確保了內容傳遞的安全，並保護企業免受常見的網路威脅，為處理敏感資料的企業提供了安心保障。

  4. 成本效益高的內容傳遞：透過在邊緣位置快取內容，CloudFront 最小化了重複的伺服器請求，降低了頻寬成本。此外，AWS 提供靈活的定價模型，並且對於從 AWS 源提取的資料不收取傳輸費用，使 CloudFront 成為各規模企業的經濟實惠選擇。

  5. 可自定義和可程式化的邊緣運算：使用 CloudFront，開發人員可以在邊緣位置執行無伺服器程式碼，利用 Lambda@Edge。這種能力允許在更接近使用者的地方進行即時內容自定義和處理，提高了應用程式的回應速度並減少了延遲。

AWS CloudFront 的運作原理

AWS CloudFront 的架構建立在全球存在點（PoPs）和區域邊緣快取的網路上，旨在高效且可靠地傳遞內容。存在點，也稱為邊緣位置，是策略性放置的資料中心，用於快取靠近使用者的內容。這種接近性減少了延遲，確保了網頁內容的快速傳遞。

圖表說明：

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

title CloudFront 高效能內容傳遞網路服務

package "安全架構" {
    package "網路安全" {
        component [防火牆] as firewall
        component [WAF] as waf
        component [DDoS 防護] as ddos
    }

    package "身份認證" {
        component [OAuth 2.0] as oauth
        component [JWT Token] as jwt
        component [MFA] as mfa
    }

    package "資料安全" {
        component [加密傳輸 TLS] as tls
        component [資料加密] as encrypt
        component [金鑰管理] as kms
    }

    package "監控審計" {
        component [日誌收集] as log
        component [威脅偵測] as threat
        component [合規審計] as audit
    }
}

firewall --> waf : 過濾流量
waf --> oauth : 驗證身份
oauth --> jwt : 簽發憑證
jwt --> tls : 加密傳輸
tls --> encrypt : 資料保護
log --> threat : 異常分析
threat --> audit : 報告生成

@enduml

圖表翻譯： 此圖示展示了使用者請求如何透過 DNS 解析被路由到最近的邊緣位置，並檢查是否命中快取。如果命中，直接傳回內容；如果未命中，則從區域邊緣快取或原始伺服器取得內容後傳回。

CloudFront 還採用區域邊緣快取，作為原始伺服器和邊緣位置之間的中間快取層。這些快取有助於保留較不常存取的內容更長時間，減少了重複從原始伺服器取得的需求。

邊緣位置和區域邊緣快取

邊緣位置和區域邊緣快取是 AWS CloudFront 基礎架構中的關鍵元件。邊緣位置是全球分佈的資料中心，用於快取靠近使用者的內容，減少延遲並改善載入時間。當使用者請求內容時，CloudFront 將請求轉發到最近的邊緣位置，確保最佳效能。如果請求的內容在邊緣位置不可用，CloudFront 將從最近的區域邊緣快取或原始伺服器取得。

分發型別：Web 和 RTMP

AWS CloudFront 支援不同型別的分發，以滿足各種內容傳遞需求。主要的分發型別包括 Web 和 RTMP（即時訊息協定）：

  1. Web 分發：此型別用於傳遞靜態和動態網頁內容，包括 HTML、CSS、JavaScript 和圖片。Web 分發最適合需要快速可靠內容傳遞的網站和應用程式。它們支援 HTTP 和 HTTPS 協定，提供安全的內容傳遞。Web 分發還提供諸如地理限制、自定義錯誤頁面和日誌記錄等功能，使企業能夠根據其需求定製內容傳遞體驗。

  2. RTMP 分發：儘管 AWS 已棄用 RTMP 分發，但它們曾經用於使用即時訊息協定串流媒體內容。RTMP 分發曾經實作了直播和點播視訊串流，提供流暢的觀看體驗。儘管已被棄用，AWS CloudFront 透過其他協定繼續支援媒體串流，確保視訊應用程式的高品質內容傳遞。

設定 AWS CloudFront

  1. 登入 AWS 控制檯。
  2. 導航到 CloudFormation 服務。
  3. 使用範本設定 CloudFront，如圖所示。

程式碼範例：

Resources:
  MyCloudFrontDistribution:
    Type: 'AWS::CloudFront::Distribution'
    Properties:
      DistributionConfig:
        Origins:
          - DomainName: mybucket.s3.amazonaws.com
            Id: MyS3Origin
            S3OriginConfig:
              OriginAccessIdentity: ''
        Enabled: true
        DefaultCacheBehavior:
          TargetOriginId: MyS3Origin
          ViewerProtocolPolicy: allow-all
          MinTTL: 3600

內容解密：

此範例展示瞭如何使用 AWS CloudFormation 設定 CloudFront 分發。其中定義了一個名為 MyCloudFrontDistribution 的 CloudFront 分發資源，其 DistributionConfig 指定了來源為 S3 儲存桶 mybucket.s3.amazonaws.com。Enabled 屬性設為 true 表示啟用該分發。預設快取行為指定了目標來源 ID 為 MyS3Origin，並允許所有檢視器協定，同時設定最小 TTL 為 3600 秒。

AWS CloudFront 與前端開發整合實務

CloudFront 設定與 S3 儲存貯體整合

AWS CloudFront 是一種強大的內容傳遞網路（CDN），能夠將靜態和動態內容安全地分發給全球使用者。以下是一個使用 CloudFormation 設定 CloudFront 的範例：

publicDistribution:
  Type: AWS::CloudFront::Distribution
  Properties:
    DistributionConfig:
      Origins:
        - DomainName: private-bucket.s3.us-east-2.amazonaws.com
          Id: S3-private-bucket
          S3OriginConfig:
            OriginAccessIdentity: !Sub 'origin-access-identity/cloudfront/${CloudFrontOriginIdentity}'
      Enabled: 'true'
      Comment: “Practical Serverless Applications”
      DefaultCacheBehavior:
        AllowedMethods:
          - GET
          - HEAD
        TargetOriginId: S3-private-bucket
        ForwardedValues:
          QueryString: 'false'
          Cookies:
            Forward: none
        ViewerProtocolPolicy: redirect-to-https
      ViewerCertificate:
        CloudFrontDefaultCertificate: 'true'

內容解密：

此 CloudFormation 範本定義了一個 CloudFront 分發（Distribution），並將其來源設定為一個名為 private-bucket 的 S3 儲存貯體。其中：

  • DomainName 指定了 S3 儲存貯體的網域名稱。
  • Id 是來源的唯一識別碼。
  • S3OriginConfig 設定了 S3 來源的存取身份識別（Origin Access Identity）。
  • Enabled 設定為 'true' 表示啟用該分發。
  • DefaultCacheBehavior 定義了預設的快取行為，包括允許的 HTTP 方法、目標來源 ID 和檢視者協定原則。
  • ViewerCertificate 使用 CloudFront 預設的 SSL/TLS 證書。

更新 S3 儲存貯體政策

為了讓 CloudFront 能夠存取 S3 儲存貯體中的內容，需要更新 S3 儲存貯體政策。以下是一個範例：

BucketPolicy:
  Type: AWS::S3::BucketPolicy
  Properties:
    Bucket: private-bucket
    PolicyDocument:
      Version: '2012-10-17'
      Statement:
        - Effect: Allow
          Principal:
            AWS: !Sub 'arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity ${CloudFrontOriginIdentity}'
          Action: 's3:GetObject'
          Resource: arn:aws:s3:::private-bucket/*

內容解密：

此範本定義了一個 S3 儲存貯體政策，允許 CloudFront Origin Access Identity 存取 private-bucket 中的物件。其中：

  • Principal 指定了允許存取的 AWS 身份識別。
  • Action 設定為 's3:GetObject'，允許讀取 S3 物件。
  • Resource 指定了受政策影響的 S3 資源。

CloudFront 的安全性特點

AWS CloudFront 不僅是一個強大的 CDN，也是一個安全的平台，能夠確保資料在全球分發過程中的安全性。其安全性特點包括：

  1. SSL/TLS 加密：確保資料在傳輸過程中的安全性，防止資料被竊取或篡改。
  2. 簽署 URL 和簽署 Cookie：控制對內容的存取許可權，確保只有授權使用者能夠存取敏感或付費內容。

與前端開發的整合

  1. 將簡單的靜態網站（例如 index.html）上傳到 S3 儲存貯體中。
  2. 設定 CloudFront 分發，並使用 CloudFormation 範本進行設定。
  3. 更新 S3 儲存貯體政策，以允許 CloudFront 存取內容。
<!DOCTYPE html>
<html>
<head>
    <title>Simple SPA</title>
</head>
<body style="background-color: lightpink">
    <h1>Hello! This is the simple static hosting!</h1>
</body>
</html>

圖表翻譯：

此 HTML 檔案展示了一個簡單的靜態網頁，背景色為淺粉色，顯示一段歡迎訊息。

透過上述步驟，可以將靜態網站安全地託管在 AWS CloudFront 上，並確保內容的安全性和高效分發。

使用AWS CloudFront最佳化前端效能

AWS CloudFront是一個動態內容傳遞網路（CDN），能夠透過減少延遲和提高資料傳輸速度來顯著提升網頁應用程式的效能。透過利用全球邊緣位置網路，CloudFront將內容快取在更接近最終使用者的位置，確保快速傳遞。然而，要充分利用CloudFront的功能，實施有效的效能最佳化策略至關重要。

設定CloudFront進行前端開發

以下是一個使用AWS CloudFormation設定CloudFront的範例：

Resources:
  CloudFrontDistribution:
    Type: AWS::CloudFront::Distribution
    DependsOn:
      - S3Bucket
    Properties:
      DistributionConfig:
        Origins:
          - DomainName: private-bucket.s3.us-east-2.amazonaws.com
            Id: S3-private-bucket
            S3OriginConfig:
              OriginAccessIdentity: !Sub 'origin-access-identity/cloudfront/${CloudFrontOriginIdentity}'
        Enabled: "true"
        Comment: Practical Serverless Applications
        DefaultRootObject: index.html
        CustomErrorResponses:
          - ErrorCode: 404
            ResponseCode: 200
            ResponsePagePath: /index.html
          - ErrorCode: 403
            ResponseCode: 200
            ResponsePagePath: /index.html
        HttpVersion: http2
        Aliases:
          - web.example.com
        ViewerCertificate:
          AcmCertificateArn: "arn:aws:acm:us-east-1:Id-of-IAM-User:certificate/1xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx"
          MinimumProtocolVersion: TLSv1.2_2021
          SslSupportMethod: sni-only
        DefaultCacheBehavior:
          AllowedMethods:
            - DELETE
            - GET
            - HEAD
            - OPTIONS
            - PATCH
            - POST
            - PUT
          Compress: true
          TargetOriginId: S3-private-bucket
          ForwardedValues:
            QueryString: "false"
            Cookies:
              Forward: none
          ViewerProtocolPolicy: redirect-to-https

內容解密：

  1. DistributionConfig定義了CloudFront分配的設定，包括來源、預設根物件、自訂錯誤回應等。
  2. Origins指定了內容的來源伺服器，本例中使用S3儲存桶作為來源。
  3. Aliases定義了可選的替代網域名稱，本例中使用web.example.com。
  4. ViewerCertificate設定了用於HTTPS連線的SSL/TLS憑證。
  5. DefaultCacheBehavior定義了預設的快取行為，包括允許的方法、壓縮設定和轉發值。

使用Lambda@Edge進行內容自訂

Lambda@Edge是AWS CloudFront的一個強大功能，允許開發者在邊緣位置執行無伺服器程式碼，以實作即時內容自訂和處理，如圖2-32所示。這對於需要動態內容修改的應用程式特別有用，例如個人化使用者經驗或A/B測試。

圖表翻譯：

此圖示展示了Lambda@Edge在CloudFront中的運作方式，顯示了程式碼如何根據檢視者請求或來源回應進行執行。

快取策略和快取失效

快取是AWS CloudFront效能最佳化的核心元件。透過在邊緣位置儲存內容副本，CloudFront減少了從來源伺服器擷取資料的需求，從而降低延遲並改善載入時間。有效的快取策略涉及決定哪些內容應該被快取以及快取多長時間。靜態內容（如圖片和CSS檔案）可以被快取較長時間，而動態內容可能需要更頻繁的更新。

設定快取策略和TTL

快取策略和TTL（存活時間）設定在控制內容在邊緣位置被快取的時間長度方面發揮著至關重要的作用。TTL決定了快取內容在CloudFront檢查來源伺服器更新之前保持有效的時間長度。設定適當的TTL值對於平衡效能和內容新鮮度至關重要。較長的TTL可以減少來源伺服器請求的頻率，從而提高效能，而較短的TTL則確保使用者獲得最新的內容。

玄貓 BlackCat

玄貓 BlackCat

技術愛好者，專注於分享程式開發、雲端技術與 AI 應用的心得體會。