全部產品
Search

搜尋本產品

    Object Storage Service：使用自訂網域名設定靜態網站託管

    文件中心

    Object Storage Service：使用自訂網域名設定靜態網站託管

    更新時間：Feb 28, 2024

    您可以通過儲存空間（Bucket）託管靜態網站，並讓訪問者通過Bucket綁定的自訂網域名（例如example.com）訪問您的網站。無論您是想在OSS上託管已有靜態網站還是從零開始建站，都可以從此教程中獲得協助。

    步驟1：註冊網域名稱

    搭建靜態網站前，您需要為網站準備一個網域名稱。建議您使用阿里雲網域名稱服務 (DNS)快速註冊一個屬於您的網域名稱。詳細步驟，請參見註冊通用網域名稱。

    本樣本使用example.com作為測試網域名稱。

    重要

    若您註冊的網域名稱需綁定在中國內地的Bucket上，您還需在中國工信部備案網域名稱。詳細步驟，請參見備案。

    步驟2：建立Bucket

    您需要建立一個公用讀取的Bucket，用以設定靜態網站託管及存放網站資料。

    1. 登入OSS管理主控台。

    2. 單擊Bucket列表，然後單擊建立Bucket。

    3. 在建立Bucket面板，按說明配置以下參數，其他參數保留預設配置。

      參數

      說明

      Bucket名稱

      設定Bucket名稱。本樣本設定為examplebucket。

      地區

      選擇Bucket所在地區。本樣本選擇華東1（杭州）。

      儲存類型

      選擇標準儲存。

      讀寫權限

      選擇公用讀取。

      其他參數保持預設配置。更多資訊，請參見建立儲存空間。

    4. 單擊確定。

    步驟3：建立網頁檔案並上傳

    您需要建立靜態網站首頁和404錯誤頁面的網頁檔案，並上傳至目標Bucket。

    1. 在本地建立兩個HTML格式的檔案。

      • 預設首頁

        本樣本使用以下內容產生靜態網站的首頁檔案index.html。實際環境中，請根據您的需求產生首頁檔案內容。

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

      • 預設404頁

        本樣本使用以下內容產生靜態網站的404錯誤頁檔案error.html。實際環境中，請根據您的需求產生404錯誤頁檔案的內容。

        <html>
<head>
   <title>Hello OSS!</title>
   <meta charset="utf-8">
</head>
<body>
   <p>這是404錯誤頁面</p>
</body>
</html>

    2. 將網頁檔案上傳至目標Bucket。

      1. 登入OSS管理主控台。

      2. 單擊Bucket 列表，然後單擊目標Bucket名稱。

      3. 在左側導覽列，選擇文件管理 > 檔案清單。

      4. 單擊上傳檔案。

      5. 在上傳檔案面板中，在待上傳檔案地區選中已建立的兩個網頁檔案，其他參數保留預設配置。

      6. 單擊上傳檔案。

    步驟4：配置靜態網站託管

    1. 在左側導覽列，選擇資料管理 > 靜態頁面。

    2. 在靜態頁面，單擊設定，然後將index.html設定為預設首頁，將error.html設定為預設404頁。

      說明

      若您希望訪問子目錄時可以跳轉到子目錄下index.html檔案，您可以選擇開通子目錄首頁。詳情請參見設定靜態網站託管。

    3. 單擊儲存。

    步驟5：綁定自訂網域名

    現在，您已有了根網域名稱example.com和名為examplebucket的Bucket，接下來您需要將網域名稱綁定到Bucket，以便能夠使用您的網域名稱訪問Bucket。

    1. 在左側導覽列，選擇Bucket配置 > 網域名稱管理。

    2. 在網域名稱管理頁面，單擊綁定網域名稱。

    3. 在網域名稱文字框輸入example.com，並開啟自動添加CNAME記錄開關。

    4. 單擊確定。

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

    您可以使用阿里雲CDN改善網站效能。CDN可以讓您的網站檔案（如HTML、映像和視頻）緩衝至全球各地的資料中心。當訪問者從您的網站請求檔案時，CDN會自動將請求重新導向到最近資料中心上的檔案副本，提升訪問者的下載速度。

    1. 在左側導覽列，選擇Bucket配置 > 網域名稱管理。

    2. 單擊目標網域名稱右側的未配置，跳轉至CDN控制台。

    3. 在添加網域名稱頁面配置以下參數：

      參數

      說明

      加速地區

      選擇CDN的加速地區。本樣本選擇僅中國內地。

      加速網域名稱

      保持預設配置。

      業務類型

      不同的業務類型有不同的流量分配，按照您儲存的內容及使用方式選擇合適的業務類型。本樣本選擇圖片小檔案。

      資源分組

      選擇預設資源群組。

      來源站點資訊

      保持預設配置。

      連接埠

      選擇CDN服務連接埠。本樣本選擇80連接埠。

    4. 單擊下一步，然後單擊返回網域名稱列表。

    5. 記錄網域名稱產生的CNAME值example.com.w.kunlunsl.com，然後修改綁定自訂網域名時增加的CNAME記錄。

      1. 進入Alibaba Cloud DNS控制台。

      2. 在網域名稱解析列表中，單擊目標網域名稱右側的解析設定。

      3. 找到綁定自訂網域名時自動添加的CNAME記錄，單擊修改。

      4. 將記錄值修改為example.com.w.kunlunsl.com，其他參數保持預設配置。

      5. 單擊確認。

    6. （可選）在網域名稱管理頁簽，開啟目標網域名稱右側的CDN緩衝自動重新整理開關。

      如果您希望針對指定操作觸發CDN緩衝自動重新整理，可以提交工單申請開通針對指定操作觸發CDN緩衝自動重新整理的功能。開通後，您需要單擊目標網域名稱右側支援的操作，然後選中指定操作類型。支援的操作類型，請參見開啟CDN緩衝自動重新整理。

    步驟6：測試網站

    在瀏覽器中訪問以下URL以驗證網站是否正常運行：

    • 訪問靜態網站首頁http://example.com，配置正確時顯示如下頁面：11

    • 訪問Bucket中不存在的檔案http://example.com/example.txt，配置正確時顯示如下頁面：404

    步驟7：清理資源

    本教程中建立的資源僅為測試環境使用，建議您在測試完成後清理資源，以免產生不必要的費用。