建置靜態網站

本指導教學顯示如何在 IBM Cloud® Object Storage上 管理靜態網站，包括建立儲存區、上傳內容及配置新網站。

使用 IBM Cloud Object Storage 管理靜態網站可提供公用存取的靜態內容，以提供使用者彈性、易於遞送及高可用性。 本指導教學包含使用 cURL、AWS CLI 以及 主控台的指示。 使用鏈結在本主題標題上方的指示之間切換，以選擇本指導教學的路徑。

實務範例

本指導教學的實務範例將 Web 管理簡化為其要點，以強調顯示所涉及的步驟。 雖然本指導教學不會涵蓋每個配置選項，但正確完成本指導教學會產生可透過 Web 存取的內容。

開始之前

確保您具有需要啟動的項目:

  • IBM Cloud 平台的帳戶
  • IBM Cloud Object Storage 的實例
  • 固定形式的內容，例如文字 (HTML 是完美的) 和影像檔

請檢查您是否具有適當的存取權，以存取您將使用的 IBM Cloud Object Storage 實例，或您將用於本指導教學之儲存區的適當 許可權。

若要在本指導教學中使用 IBM Cloud CLI，您需要 配置 Object Storage 外掛程式，以指定您要使用的服務實例，以及您要在其中建立新儲存區的預設地區。

建立針對公用存取權所配置的儲存區

建立靜態網站的儲存區將需要公用存取權。 有許多選項可用來配置公用存取權。 具體而言，使用 ObjectReader IAM 角色 將阻止列出儲存區的內容，同時仍容許在網際網路上檢視靜態內容。 如果您想要容許檢視內容清單，請對儲存區使用 ContentReader IAM 角色。

建立儲存區

配置 CLI 外掛程式之後，如範例指令中所示取代位置保留元內容以建立儲存區:

ibmcloud cos bucket-create --bucket <bucketname>

登入「主控台」並建立 IBM Cloud Object Storage的實例之後，您可以建立儲存區。 按一下標示為「建立儲存區」的按鈕，然後從圖 1 所示的選項中選擇。 選取顯示「自訂儲存區」的卡片。

自訂儲存區

網站中靜態檔案的儲存器將位於您可以命名的儲存區中。 您建立的名稱必須是唯一的，不應包含個人或識別資訊，不能連續有兩個句點、點或連字號，且必須以英數字元 (ASCII 字集項目 3-63) 開頭和結尾。 如需範例，請參閱圖 2。

靜態網站的名稱儲存區

設定公用存取權

在本指導教學的所有實務範例中，您將想要使用 主控台上的使用者介面，以容許 公用存取 您的新網站。

建立儲存區以管理靜態網站內容時，有一個選項可讓您在儲存區建立程序中啟用公用存取。 如需啟用儲存區公用存取權的選項，請參閱圖 3。 如需「索引文件」和「錯誤文件」的選項說明，請參閱 配置網站的選項 一節。 您可以使用此步驟完成基本配置，然後再將內容上傳至儲存區，如下一步所示。

啟用公用存取權

將內容上傳至儲存區

代管靜態網站檔案的內容自然著重於資訊和媒體。 在 StaticGen中列出的開放程式碼產生器，是建立靜態網站內容的熱門方法。 基於本指導教學的目的，我們只需要兩個檔案:

  • 通常以 HTML 撰寫且名為 index.html 的索引頁面，依預設會為您網站的訪客載入
  • 錯誤頁面，也在 HTML 和這裡稱為 error.html; 當訪客嘗試存取不存在或沒有公用存取權的物件時，通常會載入錯誤頁面

其他檔案 (例如影像、PDF 或視訊) 也可以上傳至您的儲存區 (但本指導教學僅聚焦於一組最低需求)。

基於本指導教學的目的，請將索引和錯誤處理的 HTML 頁面放在本端目錄中。 取代位置保留元內容，如範例指令中所示，以上傳您的 html 檔案:

ibmcloud cos object-put --bucket BUCKET_NAME --key KEY [--body FILE_PATH]

您可能已完成管理靜態網站的基本配置。 在您命名並配置儲存區之後，可以直接在主控台中上傳檔案。 請注意，此步驟是選用的，如圖 4 所示，在測試新的代管網站之前，可以隨時執行。

上傳檔案

對於指導教學的其餘部分，我們將假設索引頁面的物件索引鍵是 index.html，而錯誤文件的索引鍵是 error.html，但任何適當的檔名都可以作為字尾或索引鍵。

配置網站的選項

除了本指導教學所能說明的選項之外，還有其他選項，為了本指導教學的目的，我們只需要設定配置，即可開始使用靜態網站特性。

使用適當的配置資訊來建立 JSON 檔案:

{
  "ErrorDocument": {
    "Key": "error.html"
  },
  "IndexDocument": {
    "Suffix": "index.html"
  }
}

取代位置保留元內容，如範例指令中所示來配置網站:

ibmcloud cos bucket-website-put --bucket BUCKET_NAME --website-configuration file://<filename.json>

您可能已在建立儲存區期間完成此步驟，因為受管理靜態網站的基本配置會決定何時及如何顯示內容。 對於無法提供金鑰或網頁的網站訪客，將改為顯示預設檔案。 當您的使用者遇到錯誤時，錯誤頁面的索引鍵會決定訪客將接收的內容。 預設及錯誤頁面的配置選項會重複，以供參考。

配置選項

測試及造訪您的新網站

使用範例指令將儲存區配置為提供 HTTP 標頭之後，您只需造訪網站的 URL 即可測試新網站。 將位置保留元取代為您先前在本指導教學中所做的選擇之後，請注意所顯示的通訊協定 (http):

http://<bucketname>.s3-web.<endpoint>/

成功測試新網站之後，您現在可以探索更多選項並新增更多內容。

下一步

IBM Cloud Object Storage 管理的靜態網站的配置選項詳細說明可在 API 文件中找到。