如何使用 Amazon S3 託管使用 API Gateway 作為代理的靜態網站？

3 分的閱讀內容

我想使用 Amazon API Gateway 作為使用 Amazon Simple Storage Service (Amazon S3) 託管的靜態網站的代理。

解決方法

您可以使用 Amazon S3 託管靜態網站。您也可以使用 HTTP 代理整合或 AWS 服務整合，將 API Gateway 設定為 Amazon S3 靜態網站的代理伺服器。

HTTP 代理整合

如果您的 Amazon S3 靜態網站可公開存取，請使用 HTTP 整合，並為 API 閘道提供 S3 靜態網站 URL。

如果您尚未這樣做，請按照教學課程在 Amazon S3 上設定靜態網站。

建立 REST API

開啟 API Gateway 主控台。
為 REST API 選擇建置。
對於 API 名稱，輸入 REST API 的名稱。
選擇端點類型下拉式清單，選擇您的端點類型，然後選擇建立 API。
在導覽窗格中，選擇 API 名稱下的資源。
選擇動作下拉式清單，然後選擇建立資源。
為資源名稱，輸入一個名稱。例如 key。
為資源路徑，輸入路徑參數。例如 {key}。
選擇建立資源。

建立用於根資源的方法

選擇資源名稱 {key}，選擇動作下拉式清單，然後選擇建立方法。
從 {key} 下拉式清單選擇 GET，然後選擇核取標記圖示。
對於整合類型，請選擇 HTTP，選取使用 HTTP 代理整合，然後將 HTTP 方法保留為 GET。
對於端點網址，輸入 http://BUCKET_NAME.s3-website.REGION.amazonaws.com/{key}，然後選擇儲存。

部署 REST API

從動作下拉式清單中，選擇部署 API。
從部署階段 下拉式清單中，選擇**\ [新階段]**。
為階段名稱輸入名稱。例如 Dev。
選擇部署。記下開發階段編輯器中的調用網址。稍後需要它來測試您的 API。
使用類似下列內容的 curl 命令來測試 Amazon S3 網站的 API 代理：

curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/index.html

AWS 服務整合

設定 Amazon S3 靜態網站

如果您的 Amazon S3 靜態網站遭到封鎖而無法公開存取，請設定該網站，以便只能從 API 代理存取該網站。

如果您尚未這樣做，請按照教學課程在 Amazon S3 上設定靜態網站。
注意：略過教學課程的步驟 3，並保持預設的封鎖所有公開存取設定為開啟狀態。

修改教學課程步驟 4 中的儲存貯體政策，以允許 API 代理僅存取 Amazon S3 儲存貯體，如下列範例所示：

{
  "Version": "2012-10-17",
  "Statement": [{
      "Sid": "APIProxyBucketPolicy",
      "Effect": "Allow",
      "Principal": {
        "Service": "apigateway.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::BUCKET_NAME/*",
      "Condition": {
        "ArnLike": {
          "aws:SourceArn": "arn:aws:execute-api:REGION:ACCOUNT:API_ID/*/GET/"
        }
      }
  }]
}

建立 AWS 身分和存取管理 (IAM) 政策，並獲得對 Amazon S3 儲存貯體的 GetObject API 的權限。

{
  "Version": "2012-10-17",
  "Statement": [{
    "Effect": "Allow",
    "Action": ["s3:GetObject"],
    "Resource": "*"
  }]
}

建立 IAM 角色並將上一步中建立的 IAM 政策附加到此新角色。

複製 IAM 角色 ARN。在稍後的步驟需要用到。
IAM 角色必須包含 API 閘道的下列信任政策才能擔任該角色：

{
  "Version": "2012-10-17",
  "Statement": [{
    "Sid": "",
    "Effect": "Allow",
    "Principal": {
        "Service": "apigateway.amazonaws.com"
    },
    "Action": "sts:AssumeRole"
  }]
}

為 Amazon S3 服務建立 REST API 代理

開啟 API Gateway 主控台。
選擇建立 API。
選擇 REST API，然後選擇建置。
對於 API 名稱，輸入 REST API 的名稱。
對於端點類型，請根據大多數用戶端流量的來源位置選擇端點類型。
**注意：**最佳做法是將邊緣最佳化端點用於從網際網路存取的公用服務。區域端點主要用於從相同 AWS 區域內存取的 API。
選擇建立 API。

為根資源創建 GET 方法

根方法設定用於 Amazon S3 靜態網站的代理請求。

選取根資源**「/」後，選擇動作下拉式清單，然後選擇建立方法**。
從下拉式清單選取 GET，然後選擇核取標記圖示。
為整合類型選擇 AWS 服務。
選擇 AWS 區域下拉式清單，然後選擇您的區域。
選擇 AWS 服務下拉式清單，然後選擇簡易儲存服務 (S3)。
對於 AWS 子網域，將此欄位保留空白。
對於 HTTP 方法，選取 GET。
對於動作類型，選擇使用路徑覆寫。
對於路徑覆寫，輸入類似 BUCKET_NAME/index.html 的 Amazon S3 儲存貯體路徑。
對於執行角色，貼上您先前建立的 IAM 角色 ARN。
選擇儲存。

此設定將前端 API 請求 GET ** https://your-api-host/stage/** 整合到 S3 後端 GET ** https://your-s3-host/index.html**。

建立 API 資源物件

若要從 S3 儲存貯體存取特定物件，請建立名為 {object} 的資源，以對應前端 API 請求中的物件路徑。例如，GET https://your-api-host/stage/home.html 到 S3 後端 GET https://your-s3-host/home.html。

從資源中，選擇動作下拉式清單，然後選擇建立資源。
為資源名稱，輸入一個名稱。例如 {object}。
為資源路徑，輸入路徑。例如 {object}。
選擇建立資源。

設定資源的 GET 方法

選取 {object} 資源後，選擇動作下拉式清單，然後選擇建立方法。
從下拉式清單選擇 GET，然後選擇核取標記圖示。
為整合類型選擇 AWS 服務。
選擇 AWS 區域下拉式清單，然後選擇您的區域。
選擇 AWS 服務下拉式清單，然後選擇簡易儲存服務 (S3)。
對於 AWS 子網域，將此欄位保留空白。
為 HTTP 方法選擇 GET。
對於動作類型，選擇使用路徑覆寫。
對於路徑覆寫，輸入類似於 BUCKET_NAME/{object} 的 Amazon S3 儲存貯體路徑。
對於執行角色，貼上您先前建立的 IAM 角色 ARN。
選擇儲存。
為資源名稱 {object} 選擇 GET，然後選擇整合要求。
展開 URL 路徑參數，輸入名稱值物件以及從值 method.request.path.object 對應，選取核取方塊以儲存。

設定 GET 方法的回應標頭對應

將後端內容類型標頭參數值對應至前端對應項。這樣可以確保瀏覽器使用內容類型成功處理回應。

選擇 ** GET**，在資源 / 下選擇方法回應。
展開 HTTP 狀態 200 旁邊的箭頭，在 200 的回應標頭下，選擇新增標頭。
選擇標頭名稱為 Content-Type，然後選擇核取方塊以儲存。
選擇方法執行。
選擇整合回應，展開 ** HTTP 狀態正則表達式**旁邊的箭頭。
展開標頭對應，對於 Content-Type，輸入對應值作為 integration.response.header.Content-Type。
對資源 /{object} 下的 GET 方法重複步驟 1-6。
重複部署 REST API 一節的步驟。

測試 API 代理

您可以使用瀏覽器或 curl 命令來測試 Amazon S3 靜態網站的 API 代理：

根 (/) 資源

curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/STAGE_NAME/

{Object} 資源

curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/STAGE_NAME/home.html

如何使用 Amazon S3 託管使用 API Gateway 作為代理的靜態網站？

解決方法

HTTP 代理整合

AWS 服務整合

相關資訊

相關內容