雲端式原生API Gateway和阿里雲OSS實現靜態網站託管 - API Gateway

靜態網站是指所有的網頁都由靜態內容構成，包括HTML檔案、CSS檔案和用戶端執行的指令碼（例如JavaScript檔案）。您可以將靜態網站涉及的檔案儲存體到OSS（Object Storage Service）的儲存空間（Bucket），然後通過雲原生API Gateway代理OSS中儲存的靜態網站內容。本文介紹如何雲端式原生API Gateway和阿里雲OSS實現靜態網站託管。

前提條件

已完成雲原生API Gateway，具體操作，請參見建立網關執行個體。

背景資訊

通常來說，Web應用都會有對外服務的頁面，使用者訪問頁面時通常會先請求靜態頁面，然後根據JavaScript指令碼發起對後端服務的調用，最後根據響應結果動態修改頁面內容。在前後端分離的設計思想下，靜態檔案和後端服務解耦，使得靜態頁面和後端服務可以分開維護，大大提升了開發效率。

在前後端架構下，您需要藉助儲存服務將靜態頁面單獨儲存，與後端服務分開部署，通過七層網關再決定請求路由到靜態頁面或者後端服務。

情境樣本

假設有一個Web應用，對外網域名稱為example.com，靜態頁面由OSS託管，並通過雲原生API Gateway代理靜態頁面以及後端服務。架構示意圖如下：

所有靜態頁面的請求均被雲原生API Gateway轉寄到OSS儲存。例如，訪問example.com或者example.com/index.html時，返回網站首頁index.html。
其他業務的請求被雲原生API Gateway轉寄到目標服務。例如，訪問example.com/app時，返回後端服務處理請求的業務結果。

步驟一：建立儲存Bucket並上傳靜態頁面

您需要建立一個公用讀取的Bucket，用於存放靜態頁面。

登入OSS管理主控台。
在左側導覽列，單擊Bucket 列表，然後單擊建立 Bucket。

在建立 Bucket面板，按照如下說明進行相關配置，其他配置項保留預設配置，然後單擊完成建立。

配置項	說明
Bucket名稱	設定Bucket名稱。本樣本設定為`static-demo`。
阻止公用訪問	關閉，詳情可參見阻止公用訪問。
儲存類型	選擇標準儲存。
讀寫權限	單擊公用讀取，在確認選擇公用讀取對話方塊中單擊繼續修改。

在Bucket 列表頁面，單擊目標Bucket。在檔案清單頁面，單擊上傳檔案，上傳以下樣本的靜態網頁index.html，檔案 ACL選擇繼承 Bucket。

<html>
   <head>
       <title>Hello OSS!</title>
       <meta charset="utf-8">
   </head>
   <body>
       <p>開始阿里雲OSS託管</p>
       <p>這是索引頁面</p>
   </body>
 </html>

單擊上傳檔案。
您可以在上傳列表頁簽查看各個檔案的上傳進度。上傳完成後，您可以在目標路徑下查看上傳檔案的檔案名稱、檔案大小以及儲存類型等資訊。

（可選）步驟二：設定預設首頁

如果您希望在訪問業務網域名稱example.com的根路徑/時，返回靜態頁面index.html，您需要在目標Bucket中設定靜態頁面。

如果您希望在訪問不存在的靜態檔案時，返回一個預設的404頁面，您需要額外在Bucket中上傳一個404.html。同時，需要在靜態頁面中設定404頁面。

<html>
   <head>
       <title>您訪問的頁面不存在</title>
       <meta charset="utf-8">
   </head>
   <body>
       <p>您訪問的頁面不存在</p>
       <p>您可以試試訪問首頁</p>
   </body>
 </html>

關於如何設定預設首頁，請參見為examplebucket配置靜態網站託管。

步驟三：查看OSS的Bucket的內部預設網域名稱

阿里雲OSS預設為您建立的Bucket建立網域名稱，您可以在概覽頁面的訪問連接埠地區，查看內網訪問網域名稱。具體操作，請參見ECS執行個體通過OSS內網地址訪問OSS資源。

步驟四：在雲原生API Gateway為OSS的Bucket建立服務

對於雲原生API Gateway來說，儲存使用者靜態頁面的Bucket也是一個服務，因此需要在雲原生API Gateway上為其建立一個基於DNS服務發現方式的服務。

登入雲原生API Gateway控制台。
在左側導覽列，選擇執行個體，並在頂部功能表列選擇地區。
在執行個體頁面，單擊目標網關執行個體名稱。
在左側導覽列，選擇服務，並單擊服務頁簽。

單擊建立服務。在建立服務面板，按如下說明進行相關配置，然後單擊確定。

配置項	說明
服務來源	選擇DNS 網域名稱。
服務名稱	用於唯一識別服務。本樣本將服務名稱設定為`static`。
服務地址	配置後端服務的網域名稱：連接埠。本樣本將網域名稱設定為步驟三中Bucket的內部網域名稱，即`xxx-static-demo.oss-cn-hangzhou-internal.aliyuncs.com:80`。
TLS模式	選擇關閉。

步驟五：在雲原生API Gateway為靜態頁面建立路由

建立HTTP API，具體操作，請參見建立HTTP API。
單擊目標API，在左上方單擊建立路由。
在建立路由頁面，建立一個匹配條件為首碼是，路徑為/，目標服務為static的路由。具體操作，請參見建立路由。
單擊目標路由名稱，選擇策略配置頁簽，為已建立的路由開啟重寫策略。將路由的Host重寫為OSS Bucket的內部網域名稱xxx-static-demo.oss-cn-hangzhou-internal.aliyuncs.com，然後單擊確定。開啟重寫後，網關轉寄請求到後端時，會按照您配置的重寫策略對原請求的Path和Host進行修改。具體操作，請參見配置重寫策略。
刪除OSS響應中的content-disposition頭部，然後開啟Header設定策略，網關會操控請求和響應的Header。具體操作，請參見配置Header設定策略。

步驟六：訪問測試

假設您的業務網域名稱為example.com，在瀏覽器地址欄分別輸入example.com、example.com/index.html和example.com/test，查看返回的靜態頁面。

因為步驟二已在OSS的Bucket中設定預設首頁，所以在瀏覽器地址欄輸入example.com，會返回index.html頁面。
您也可以明確訪問index.html檔案。例如，在瀏覽器地址欄輸入example.com/index.html，也會返回index.html頁面。
當訪問不存在的檔案時，例如，在瀏覽器地址欄輸入example.com/test，會返回在OSS的Bucket中設定的404.html頁面。