假設您要在阿里雲 OSS 上託管靜態網站。您註冊了網域名稱(例如,examplewebsite.com)並且想要從 OSS 內容響應對 http://examplewebsite.comhttp://www.examplewebsite.com 的請求。不論您是已經有了要在 OSS 上託管的靜態網站,還是要從頭開始建立,都可以通過以下樣本了解如何在阿里雲 OSS 上託管網站。

準備工作

本教程涉及到以下服務:

  • 網域名稱註冊

    如果您沒有註冊網域名稱(如examplewebsite.com),請選擇一個註冊商進行註冊。阿里雲也提供網域名稱註冊服務。詳情請參考 阿里雲網域名稱服務 (DNS)

  • 阿里雲 OSS

    您可以使用阿里雲 OSS 建立 bucket,上傳樣本網頁,配置許可權允許所有人查看內容,然後配置 bucket 的網站託管功能。在本樣本中,因為要允許對 http://examplewebsite.comhttp://www.examplewebsite.com 的請求,所以需要建立兩個 bucket。您可以僅在一個 bucket 中託管內容,再配置另一個 bucket 將請求重新導向到託管內容的 bucket。

  • 雲解析

    您可以將阿里雲解析配置為網域名稱解析服務 (DNS) 供應商。在本樣本中,您可以將網域名稱添加到雲解析並定義 CNAME 記錄,這樣能夠使用您的網域名稱而不是 OSS 分配的訪問網域名稱來訪問 OSS bucket。

    • 在本樣本中,我們使用阿里雲解析。但您可以通過大多數註冊商定義指向 OSS bucket 的 CNAME 記錄。

说明

本教程使用 examplewebsite.com 作為網域名稱。請使用您註冊的網域名稱替換此網域名稱。

步驟 1:註冊網域名稱

如果您已有註冊網域名稱,可以跳過該步驟。如果您從未託管過網站,請先註冊一個網域名稱,例如 examplewebsite.com。您可以使用阿里雲網域名稱服務 (DNS)註冊一個網域名稱。

詳情請參考購買網域名稱

步驟 2:建立和配置 bucket 並上傳數據

您可以建立兩個 bucket,以同時支援來自根網域名稱(如 examplewebsite.com)和子網域名稱(如 http://www.examplewebsite.com)的請求。一個 bucket 用於儲存內容,另一個 bucket 用於將請求重新導向到儲存內容的 bucket。

步驟 2.1:建立兩個 bucket

在該步驟中,使用阿里雲帳戶登入 OSS 控制台,並建立以下兩個 bucket:

  • originbucket:用於儲存內容
  • redirectbucket:用於將請求重新導向到originbucket
  1. 登入OSS 控制台
  2. 建立兩個 bucket(例如originbucketredirectbucket)。將兩個 bucket 的讀寫權限設定為公共讀取,以便所有人都可以查看 bucket 的內容。

    詳細流程,請參考建立 bucket

  3. 記下originbucketredirectbucket的訪問網域名稱。在後續步驟中將會用到它們。您可以在 bucket 的概覽頁面上找到 bucket 的訪問網域名稱,如下圖所示。

  4. 將網站數據上傳到 originbucket

    您將在根域 bucket originbucket 外託管內容,並且將針對子域 bucket redirectbucket 的請求重新導向到根域 bucket originbucket。您可以在任一 bucket 中儲存內容。

    本樣本將內容託管在originbucket bucket 中。內容可以是任何類型的檔案,例如文字檔、照片和視頻。如果您尚未建立網站,您在本樣本中僅需要兩個檔案。一個檔案用作網站首頁,另一個檔案用作網站的錯誤頁面。

    例如,使用以下 HTML 建立一個名為 index.html 的檔案,並將其上傳到 bucket。在後續步驟中,將使用此檔案名作為網站的預設首頁。

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

    您可以使用以下 HTML 建立另一個名為error.html 的檔案,並將其上傳到bucket。此檔案用作網站的 404 錯誤頁面。在後續步驟中,將使用此檔案名作為網站的預設404 頁面。

    <html>
    <head>
       <title>Hello OSS!</title>
       <meta charset="utf-8">
    </head>
    <body>
       <p>這是 404 錯誤頁面</p>
    </body>
    </html>
步驟 2.2:配置 bucket 的網站託管功能

在配置 bucket 的網站託管功能後,可以通過 OSS 分配的訪問網域名稱訪問該網站。

在此步驟中,將 originbucket 配置為網站。

  1. 登入OSS 控制台
  2. 從 bucket 名稱列表中,選擇 originbucket
  3. 單擊基礎設定頁簽,找到靜態頁面區域。
  4. 單擊設定,然後輸入以下資訊:
    • 預設首頁:索引頁面(相當於網站的 index.html)。只能使用已儲存在 bucket 中的 HTML 檔案。在本樣本中,輸入index.html

    • 預設 404 頁:當訪問錯誤路徑時,返回預設的 404 頁面。只能使用已儲存在 bucket 中的 HTML 和影像檔。在本樣本中,輸入 error.html

  5. 單擊保存
步驟 2.3:配置索引頁面的重新導向功能

配置 originbucket的預設首頁和錯誤頁面之後,您還需要配置redirectbucket 的預設首頁。

參考以下步驟配置索引頁面的重新導向功能:

  1. 登入OSS 控制台
  2. 從 bucket 名稱列表中,選擇 redirectbucket
  3. 單擊基礎設定頁簽,找到靜態頁面區域。
  4. 單擊設定,然後在預設首頁文字框中輸入 index.html
  5. 單擊保存

步驟 3:將網域名稱綁定到 OSS bucket

現在,您已有了根網域名稱examplewebsite.com和OSS bucketoriginbucket,接下來您需要將網域名稱綁定到 OSS bucket,以便能夠使用您的網域名稱而不是 OSS 分配的網域名稱來訪問 OSS bucket。

在本樣本中,在將網域名稱examplewebsite.com綁定到OSS bucketoriginbucket之前,必須使用 OSS 分配的網域名稱 originbucket.oss-cn-beijing.aliyuncs.com 訪問 bucket originbucket。在綁定網域名稱 examplewebsite.com 後,可以使用此 examplewebsite.com 來訪問 OSS bucket。

同樣,還需要將子網域名稱www.examplewebsite.com綁定到OSS bucketredirectbucket,以便能夠使用www.examplewebsite.com而不是 OSS 分配的網域名稱 originbucket.oss-cn-beijing.aliyuncs.com 來訪問 OSS bucket。

參考以下步驟將根網域名稱 examplewebsite.com綁定到OSS bucketoriginbucket

  1. 登入OSS 控制台
  2. 從 bucket 名稱列表中,選擇 originbucket
  3. 單擊網域名稱管理頁簽。
  4. 單擊綁定用戶網域名稱
  5. 用戶網域名稱文字框中,輸入根網域名稱examplewebsite.com
  6. 將 CNAME 記錄定義為 originbucket。
    • 如果已在阿里雲帳戶下解析網域名稱,則可以開啟自動添加 CNAME 記錄開關。然後單擊提交

    • 如果未在阿里雲主帳戶下解析網域名稱,自動添加 CNAME 記錄開關處于禁用狀態。執行以下步驟,手動添加 CNAME 記錄,然後單擊提交

      1. 在雲解析中添加網域名稱。
        • 如果網域名稱是在阿里雲中註冊的,它會自動添加到雲解析列表中。您可以跳過該步驟。
      2. 在雲解析控制台中,找到網域名稱。
      3. 單擊網域名稱。
      4. 單擊添加解析
      5. 添加解析對話方塊中,從記錄類型下拉框中選擇CNAME,然後在記錄值文字框中輸入 bucket 的 OSS 網域名稱。在本樣本中,輸入originbucket.oss-cn-beijing.aliyuncs.com
      6. 單擊確認
  7. 參考上述步驟,將子網域名稱www.examplewebsite.com綁定到 OSS bucketredirectbucket

步驟 4:配置網站重新導向功能

您已配置 bucket 的網站託管功能並將自訂網域名綁定到 OSS bucket,接下來需要配置redirectbucket,將http://www.examplewebsite.com的所有請求重新導向到 http://examplewebsite.com

參考以下步驟配置網站的重新導向功能:

  1. 登入OSS 控制台
  2. 從 bucket 列表中,選擇redirectbucket
  3. 單擊基礎設定頁簽,找到鏡像回源區域。
  4. 單擊設定,然後單擊建立規則
  5. 建立 404 重新導向規則,具體步驟如下:
    1. 在回源類型區域,選擇重新導向
    2. 回源條件區域,設定HTTP 狀態碼404
    3. 回源地址區域,選擇添加前尾碼,輸入originbucket的網域名稱。在本樣本中,輸入examplewebsite.com
    4. 單擊確定

步驟 5:(可選)使用阿里雲 CDN 加快網站速度

您可以使用阿里雲 CDN 改善網站性能。CDN 讓您的網站檔案(如 HTML、映像和視頻)可供全球各地的資料中心(即,邊緣節點)使用。當訪問者從您的網站請求檔案時,CDN 自動將請求重新導向到最近邊緣節點上的檔案副本。因此下載速度要快於訪問者從較遠的資料中心請求內容。

CDN 在邊緣節點緩存內容的時間長度由您指定。如果訪問者請求的內容的緩存時間超過了到期日,CDN 會檢查原始伺服器,看看是否有新版本的內容可用。如果有新版本,CDN 將新版本複製到邊緣節點。您對原始內容所做的更改會在訪問者請求內容時複製到邊緣節點。但在到期日前,內容仍為之前的版本。我們建議開啟CDN 緩存自動刷新開關,以便您對原始內容所做的更改可以在 CDN 緩存中自動即時刷新。

參考以下步驟使用 CDN 加快originbucket速度:

  1. 在 CDN 控制台中添加 CDN 加速網域名稱,並複製該網域名稱的 CNAME 地址。詳情請參考CDN 快速入門中的步驟 2:添加加速網域名稱。
  2. 在雲解析控制台中定義 CNAME 記錄。詳情請參考配置CNAME流程
  3. 開啟CDN 緩存自動刷新開關。
    1. 登入OSS 控制台
    2. 從 bucket 列表中,選擇 originbucket
    3. 單擊網域名稱管理頁簽。
    4. 開啟CDN 緩存自動刷新開關。
  4. 參考上述步驟,使用 CDN 為redirectbucket加速。

步驟 6:測試網站

要驗證網站是否正常運行,請在瀏覽器中嘗試以下 URL:

URL 結果
http://examplewebsite.com 顯示originbucket中的索引文檔。
originbucket中不存在的檔案的 URL,例如 http://examplewebsite.com/abc 顯示originbucket中的錯誤頁面。
http://www.examplewebsite.com 將您的請求重新導向到http://examplewebsite.com
http://www.examplewebsite.com/abc 將您的請求重新導向到http://examplewebsite.com/abc
说明
某些情況下,可能需要清除 網頁瀏覽器的緩存才能看到預期行為。

清理

如果您建立靜態網站只是為了練習,別忘了刪除分配的阿里雲資源以免產生不必要的費用。刪除阿里雲資源後,網站不再可用。

參考以下步驟進行清理:

  1. 禁用阿里雲 CDN 控制台中的網域名稱,然後將其刪除。
  2. 刪除雲解析控制台中的 CNAME 記錄。
  3. 刪除阿里雲 OSS 控制台中的 OSS 檔案和 bucket。