假設您要在阿里雲 OSS 上託管靜態網站。您註冊了網域名稱(例如,examplewebsite.com)並且想要從 OSS 內容響應對 http://examplewebsite.com
和 http://www.examplewebsite.com
的請求。不論您是已經有了要在 OSS 上託管的靜態網站,還是要從頭開始建立,都可以通過以下樣本了解如何在阿里雲 OSS 上託管網站。
準備工作
本教程涉及到以下服務:
-
網域名稱註冊
如果您沒有註冊網域名稱(如
examplewebsite.com
),請選擇一個註冊商進行註冊。阿里雲也提供網域名稱註冊服務。詳情請參考 阿里雲網域名稱服務 (DNS)。 -
阿里雲 OSS
您可以使用阿里雲 OSS 建立 bucket,上傳樣本網頁,配置許可權允許所有人查看內容,然後配置 bucket 的網站託管功能。在本樣本中,因為要允許對
http://examplewebsite.com
和http://www.examplewebsite.com
的請求,所以需要建立兩個 bucket。您可以僅在一個 bucket 中託管內容,再配置另一個 bucket 將請求重新導向到託管內容的 bucket。 -
雲解析
您可以將阿里雲解析配置為網域名稱解析服務 (DNS) 供應商。在本樣本中,您可以將網域名稱添加到雲解析並定義 CNAME 記錄,這樣能夠使用您的網域名稱而不是 OSS 分配的訪問網域名稱來訪問 OSS bucket。
-
在本樣本中,我們使用阿里雲解析。但您可以通過大多數註冊商定義指向 OSS bucket 的 CNAME 記錄。
-
![]() |
说明 |
本教程使用 |
步驟 1:註冊網域名稱
如果您已有註冊網域名稱,可以跳過該步驟。如果您從未託管過網站,請先註冊一個網域名稱,例如 examplewebsite.com
。您可以使用阿里雲網域名稱服務 (DNS)註冊一個網域名稱。
詳情請參考購買網域名稱。
步驟 2:建立和配置 bucket 並上傳數據
您可以建立兩個 bucket,以同時支援來自根網域名稱(如 examplewebsite.com
)和子網域名稱(如 http://www.examplewebsite.com
)的請求。一個 bucket 用於儲存內容,另一個 bucket 用於將請求重新導向到儲存內容的 bucket。
在該步驟中,使用阿里雲帳戶登入 OSS 控制台,並建立以下兩個 bucket:
- originbucket:用於儲存內容
- redirectbucket:用於將請求重新導向到originbucket
- 登入OSS 控制台。
- 建立兩個 bucket(例如originbucket和redirectbucket)。將兩個 bucket 的讀寫權限設定為公共讀取,以便所有人都可以查看 bucket 的內容。
詳細流程,請參考建立 bucket。
- 記下originbucket和redirectbucket的訪問網域名稱。在後續步驟中將會用到它們。您可以在 bucket 的概覽頁面上找到 bucket 的訪問網域名稱,如下圖所示。
- 將網站數據上傳到 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>
在配置 bucket 的網站託管功能後,可以通過 OSS 分配的訪問網域名稱訪問該網站。
在此步驟中,將 originbucket 配置為網站。
- 登入OSS 控制台。
- 從 bucket 名稱列表中,選擇 originbucket。
- 單擊基礎設定頁簽,找到靜態頁面區域。
- 單擊設定,然後輸入以下資訊:
-
預設首頁:索引頁面(相當於網站的 index.html)。只能使用已儲存在 bucket 中的 HTML 檔案。在本樣本中,輸入index.html 。
-
預設 404 頁:當訪問錯誤路徑時,返回預設的 404 頁面。只能使用已儲存在 bucket 中的 HTML 和影像檔。在本樣本中,輸入 error.html。
-
- 單擊保存。
配置 originbucket的預設首頁和錯誤頁面之後,您還需要配置redirectbucket 的預設首頁。
參考以下步驟配置索引頁面的重新導向功能:
- 登入OSS 控制台。
- 從 bucket 名稱列表中,選擇 redirectbucket。
- 單擊基礎設定頁簽,找到靜態頁面區域。
- 單擊設定,然後在預設首頁文字框中輸入 index.html。
- 單擊保存。
步驟 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:
- 登入OSS 控制台。
- 從 bucket 名稱列表中,選擇 originbucket。
- 單擊網域名稱管理頁簽。
- 單擊綁定用戶網域名稱。
- 在用戶網域名稱文字框中,輸入根網域名稱examplewebsite.com。
- 將 CNAME 記錄定義為 originbucket。
-
如果已在阿里雲帳戶下解析網域名稱,則可以開啟自動添加 CNAME 記錄開關。然後單擊提交。
-
如果未在阿里雲主帳戶下解析網域名稱,自動添加 CNAME 記錄開關處于禁用狀態。執行以下步驟,手動添加 CNAME 記錄,然後單擊提交。
- 在雲解析中添加網域名稱。
- 如果網域名稱是在阿里雲中註冊的,它會自動添加到雲解析列表中。您可以跳過該步驟。
- 在雲解析控制台中,找到網域名稱。
- 單擊網域名稱。
- 單擊添加解析。
- 在添加解析對話方塊中,從記錄類型下拉框中選擇CNAME,然後在記錄值文字框中輸入 bucket 的 OSS 網域名稱。在本樣本中,輸入originbucket.oss-cn-beijing.aliyuncs.com。
- 單擊確認。
- 在雲解析中添加網域名稱。
-
- 參考上述步驟,將子網域名稱
www.examplewebsite.com
綁定到 OSS bucketredirectbucket。
步驟 4:配置網站重新導向功能
您已配置 bucket 的網站託管功能並將自訂網域名綁定到 OSS bucket,接下來需要配置redirectbucket,將http://www.examplewebsite.com
的所有請求重新導向到 http://examplewebsite.com
。
參考以下步驟配置網站的重新導向功能:
- 登入OSS 控制台。
- 從 bucket 列表中,選擇redirectbucket。
- 單擊基礎設定頁簽,找到鏡像回源區域。
- 單擊設定,然後單擊建立規則。
- 建立 404 重新導向規則,具體步驟如下:
- 在回源類型區域,選擇重新導向。
- 在回源條件區域,設定HTTP 狀態碼為404。
- 在回源地址區域,選擇添加前尾碼,輸入originbucket的網域名稱。在本樣本中,輸入examplewebsite.com。
- 單擊確定。
步驟 5:(可選)使用阿里雲 CDN 加快網站速度
您可以使用阿里雲 CDN 改善網站性能。CDN 讓您的網站檔案(如 HTML、映像和視頻)可供全球各地的資料中心(即,邊緣節點)使用。當訪問者從您的網站請求檔案時,CDN 自動將請求重新導向到最近邊緣節點上的檔案副本。因此下載速度要快於訪問者從較遠的資料中心請求內容。
CDN 在邊緣節點緩存內容的時間長度由您指定。如果訪問者請求的內容的緩存時間超過了到期日,CDN 會檢查原始伺服器,看看是否有新版本的內容可用。如果有新版本,CDN 將新版本複製到邊緣節點。您對原始內容所做的更改會在訪問者請求內容時複製到邊緣節點。但在到期日前,內容仍為之前的版本。我們建議開啟CDN 緩存自動刷新開關,以便您對原始內容所做的更改可以在 CDN 緩存中自動即時刷新。
參考以下步驟使用 CDN 加快originbucket速度:
步驟 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 。 |
![]() |
说明 |
某些情況下,可能需要清除 網頁瀏覽器的緩存才能看到預期行為。 |
清理
如果您建立靜態網站只是為了練習,別忘了刪除分配的阿里雲資源以免產生不必要的費用。刪除阿里雲資源後,網站不再可用。
參考以下步驟進行清理:
- 禁用阿里雲 CDN 控制台中的網域名稱,然後將其刪除。
- 刪除雲解析控制台中的 CNAME 記錄。
- 刪除阿里雲 OSS 控制台中的 OSS 檔案和 bucket。