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

解決方法

HTTP Proxy 整合

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

首先，在 Amazon S3 上設定靜態網站。然後，使用 API Gateway 主控台建立 REST API 和根資源的方法，並部署 REST API。

建立 REST API

請完成下列步驟：

1. 對於 REST API 選擇建置。
2. 對於 API 名稱，輸入 REST API 的名稱。
3. 在端點類型功能表中，選擇您的端點類型，然後選擇建立 API。
4. 在導覽窗格中，選擇 API 名稱下的資源。
5. 在動作功能表，選擇建立資源。
6. 對於資源名稱，輸入名稱，例如 key。
7. 對於資源路徑，輸入路徑參數，例如 {key}。
8. 選擇建立資源。

建立用於根資源的方法

請完成下列步驟：

1. 選擇資源名稱 {key}b。
2. 在動作功能表，選擇建立方法。
3. 在 {key} 功能表，選擇 GET，然後選擇核取標記圖示。
4. 對於整合類型，選擇 HTTP，選取使用 HTTP Proxy 整合，然後將 HTTP 方法保留為 GET。
5. 對於端點網址，輸入 http://BUCKET_NAME.s3-website.REGION.amazonaws.com/{key}，然後選擇儲存。

部署 REST API

請完成下列步驟：

1. 在動作功能表，選擇部署 API。

2. 在部署階段功能表，選擇 [新階段]。

3. 在階段名稱中，輸入名稱，例如 Dev。

4. 選擇部署。

5. 在開發階段編輯器中，記下用於測試 API 的調用網址。

6. 執行下列命令來測試 Amazon S3 網站的 API Proxy：

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

   **注意：**使用您的調用網址取代範例網址。

AWS 服務整合

設定 Amazon S3 靜態網站

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

請完成下列步驟：

1. 在 Amazon S3 上設定靜態網站。
   注意：當您設定靜態網站時，請跳過步驟 3 。並保持預設的封鎖所有公開存取設定為開啟狀態。

2. 修改步驟 4 中的儲存貯體原則，以允許 API Proxy 僅能存取 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/"
           }
         }
     }]
   }

3. 建立 AWS 身分和存取管理 (IAM) 原則，並允許 GetObject API 存取 Amazon S3 儲存貯體：

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

4. 建立 IAM 角色，然後附加前面的 IAM 原則。

5. 請記下 IAM 角色的 ARN，以在後續步驟中使用。
   IAM 角色必須包含 API Gateway 的下列信任原則才能擔任該角色：

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

使用 API Gateway 主控台完成下列步驟。

為 Amazon S3 服務建立 REST API Proxy

請完成下列步驟：

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

為根資源建立 GET 方法

若要針對 Amazon S3 靜態網站設定 Proxy 要求的根方法，請完成下列步驟：

1. 選擇根資源 "/"。
2. 在動作功能表，選擇建立方法。
3. 選擇 ** GET**，然後選擇核取標記圖示。
4. 對於整合類型，選擇 AWS 服務。
5. 在 AWS 區域功能表，選擇您的區域。
6. 在 AWS 服務功能表，選擇 Simple Storage Service (S3)。
7. 對於 ** AWS 子網域**，請將此欄位保留空白。
8. 對於 HTTP 方法，選取 GET。
9. 對於動作類型，選擇使用路徑覆寫。
10. 對於路徑覆寫，輸入 Amazon S3 儲存貯體路徑，例如 BUCKET_NAME/index.html。
11. 對於執行角色，請輸入 IAM 角色的 ARN。
12. 選擇儲存。

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

建立 API 資源物件

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

請完成下列步驟：

1. 選擇資源。
2. 在動作功能表，選擇建立資源。
3. 對於資源名稱，輸入名稱，例如 {object}。
4. 對於資源路徑，輸入路徑，例如 {object}。
5. 選擇建立資源。

設定資源的 GET 方法

請完成下列步驟：

1. 選取 {object}。
2. 在動作功能表，選擇建立方法。
3. 選擇 ** GET**，然後選擇核取標記圖示。
4. 對於整合類型，選擇 AWS 服務。
5. 在 AWS 區域功能表，選擇您的區域。
6. 在 AWS 服務功能表，選擇 Simple Storage Service (S3)。
7. 對於 AWS 子網域，請將此欄位保留空白。
8. 對於 HTTP 方法選擇 GET。
9. 對於動作類型，選擇使用路徑覆寫。
10. 對於路徑覆寫，Amazon S3 儲存貯體路徑，例如 BUCKET_NAME/{object}。
11. 對於執行角色，請輸入 IAM 角色的 ARN。
12. 選擇儲存。
13. 為資源名稱 {object} 選擇 GET，然後選擇整合要求。
14. 展開網址路徑參數，輸入名稱值物件並從值 method.request.path.object 對應，然後選取核取方塊以儲存。

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

將後端內容類型標頭參數值對應至前端對應項，讓瀏覽器得以成功處理具有內容類型的回應。

請完成下列步驟：

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

測試 API Proxy

如要測試 Amazon S3 靜態網站的 API Proxy，請使用瀏覽器或 curl 命令：

根 (/) 資源

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

相關資訊

教學課程： 建立 REST API 作為 Amazon S3 Proxy

使用 Amazon S3 託管靜態網站

在 API Gateway 中開發 REST API

在 API Gateway 中建立 REST API 的部署