教程樣本：使用自訂網域名設定靜態網站託管 - 開發指南

假設您要在阿里雲 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 記錄。

	说明
	本教程使用 `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

登入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>
 開始阿里雲 OSS 託管
 這是索引頁面
 </body>
 </html>
```
您可以使用以下 HTML 建立另一個名為error.html 的檔案，並將其上傳到bucket。此檔案用作網站的 404 錯誤頁面。在後續步驟中，將使用此檔案名作為網站的預設404 頁面。
```
<html>
<head>
 <title>Hello OSS!</title>
 <meta charset="utf-8">
</head>
<body>
 這是 404 錯誤頁面
</body>
</html>
```

步驟 2.2：配置 bucket 的網站託管功能

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

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

登入OSS 控制台。
從 bucket 名稱列表中，選擇 originbucket。
單擊基礎設定頁簽，找到靜態頁面區域。
單擊設定，然後輸入以下資訊：
- 預設首頁：索引頁面（相當於網站的 index.html）。只能使用已儲存在 bucket 中的 HTML 檔案。在本樣本中，輸入index.html 。
- 預設 404 頁：當訪問錯誤路徑時，返回預設的 404 頁面。只能使用已儲存在 bucket 中的 HTML 和影像檔。在本樣本中，輸入 error.html。
單擊保存。

步驟 2.3：配置索引頁面的重新導向功能

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

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

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

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

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

步驟 5：（可選）使用阿里雲 CDN 加快網站速度

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

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

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

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

	说明
	某些情況下，可能需要清除網頁瀏覽器的緩存才能看到預期行為。

清理

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

參考以下步驟進行清理：

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