設定用於靜態網站託管的 OCI Object Storage 和 Oracle API Gateway

簡介

如果您有一個想要在 Oracle Cloud Infrastructure (OCI) 上代管且想要設定靜態網站託管的 Web 應用程式，請在本教學課程中逐步介紹如何使用 OCI Object Storage 和 Oracle API Gateway 設定靜態代管一個即時 (AOT) 編譯的 JavaScript Web 應用程式。相同的方法適用於想要透過 HTTP 提供靜態檔案的任何案例，無論是較簡單的應用程式或靜態網頁，都能以較低的成本為 OCI 平台上的使用者提供可靠的線上體驗。

目標

瞭解如何利用 OCI Object Storage 和 Oracle API Gateway 代管靜態網站，以有效率地部署和管理 Oracle Cloud Infrastructure 上的 Web 內容。

必備條件

工作 1：建立 Oracle Object Storage 儲存的儲存桶

首先，我們會在 OCI Object Storage 中建立新的儲存桶。此儲存桶將用於代管您的靜態網站。

物件儲存的儲存桶

工作 2：上傳儲存桶中的分送檔案

將您的應用程式分送檔案上傳至先前任務中建立的分組。您的應用程式分送檔案通常位於應用程式目錄的 /dist 資料夾中，而且是 Webpack 組建的輸出。

分配檔案

秘訣：若要使用 oci-cli 上傳您的檔案，請務必指定 --content-type auto 參數，確定已正確設定 Content-Type。

工作 3：建立預先認證要求

若要讓 Oracle API Gateway 透過網際網路提供分送檔案服務，您需要為儲存分送檔案的物件儲存的儲存桶建立預先認證的要求 PAR 。

我們將在設定 API 閘道時使用此功能。

作業 4：建立 Oracle API Gateway

Oracle API Gateway 服務可讓您發布具有可從網路存取之專用端點的 API，如果您希望 API 接受網際網路流量，可以使用公用 IP 位址公開這些 API。端點支援 API 驗證、要求與回應轉換、CORS、認證與授權，以及要求限制。如需詳細資訊，請參閱Oracle API Gateway 概要。

  1. 瀏覽至 OCI 功能表、開發人員服務、 API 閘道，然後按一下建立。

注意： 您需要有虛擬雲端網路才能部署此 Oracle API Gateway。建立 VCN (若尚未建立)。

Oracle API Gateway

任務 5：設定 Oracle API Gateway 部署

順利建立 Oracle API Gateway 之後，請瀏覽至部署並建立新的部署。

  1. 選取從頭開始建立，並將「路徑」前置碼設為 "/"。這將會是 URL 的基礎路徑。

    閘道部署

  2. 在此處設定 TLS、CORS 等等，或按一下下一步移至下一個步驟。

  3. 選取沒有認證，然後按下一步。我們不需要為靜態網站新增任何驗證。

    部署認證

作業 6：新增遞送

在「API 部署」精靈中，新增將擴充部署基礎路徑的路由。

  1. 在路徑欄位中輸入 /{req*} 。

    建置路徑

  2. 從方法下拉式清單中選取 GET 。

  3. 選取編輯新增的多重後端。

    部署多個後端

  4. 選取選取器欄位中的路徑。

    建置路徑

  5. 按一下定義後端。

  6. 建立預設規則，輸入名稱作為預設值，選取比對類型作為任一，然後選取設為預設值核取方塊，選取後端作為 HTTP ，然後在 URL 欄位中輸入 index.html 頁面的物件儲存 URL，然後按一下建立。

    後端定義

  7. 建立 js 檔案規則，輸入名稱作為 js 規則，輸入比對類型作為萬用字元，輸入 *.js 作為萬用字元表示式，選取後端作為 HTTP ，然後在 URL 欄位中輸入物件儲存的儲存桶 URL，接著輸入 ${request.path[req]} 頁面，然後按一下建立。您的網址看起來會像這樣

    https://{namespace}.objectstorage.{region}.oci.customer-oci.com/n/{namespace}/b/{bucket-name}/o/${request.path[req]}

  8. 按一下建立。

    後端定義

  9. 視需要為 css、html、txt、json 檔案建立類似的規則。

    後端定義全部

  10. 按下一步，完成 Oracle API Gateway 的建立作業，並等待其更新。

任務 7：測試

擷取部署 URL 並將其輸入您的 Web 瀏覽器中，這應該會顯示您的應用程式。

附註：

  1. 如果您看不到應用程式已載入，請檢查 VCN 中的安全清單或網路安全群組是否允許流向 Oracle API Gateway 的流量。

  2. 別忘了新增應用程式在後端定義中的所有不同檔案類型。

  3. 只有 AOT (時間之前) 編譯的應用程式和靜態網站才能使用此技術設定。請確定您的應用程式是以原生 Javascript 程式碼編譯。

確認

作者 - Mayank Kakani (OCI 雲端架構師)

其他學習資源

在 docs.oracle.com/learn 上探索其他實驗室，或在 Oracle Learning YouTube 頻道上存取更多免費學習內容。此外，請造訪 education.oracle.com/learning-explorer 以成為 Oracle Learning Explorer。

如需產品文件，請造訪 Oracle Help Center 。