OSS靜態網站託管功能,支援將儲存在儲存空間(Bucket)中的靜態檔案(如HTML、CSS、JavaScript等)直接發布為一個公開訪問的網站,無需維護傳統伺服器即可實現高可用網站部署,顯著降低營運成本和技術門檻。
託管標準靜態網站
適用於傳統多頁面靜態網站(如企業官網、產品展示站)的完整受管理的部署,提供穩定的線上訪問服務。
使用OSS Bucket網域名稱訪問HTML檔案時,出於安全考慮瀏覽器會強制下載而非線上預覽。要實現網頁正常瀏覽(這是靜態網站託管的主要目的),需要綁定自訂網域名,具體操作請參見通過自訂網域名訪問OSS。若Bucket位於中國內地,綁定的網域名稱需要完成ICP備案。
步驟一:配置靜態網站託管
通過配置預設首頁和錯誤頁面,建立網站的基礎訪問規則,確保使用者能夠正常瀏覽網站並在訪問異常時獲得友好的錯誤提示。
前往Bucket列表,單擊目標Bucket名稱,然後在Bucket左側功能表列單擊。
單擊設定,配置以下參數:
預設首頁:設定為
index.html。子目錄首頁:根據網站結構選擇是否為子目錄啟用獨立首頁。
不開通 (預設):適用於無需獨立子目錄首頁的簡單網站。選擇此項後,所有以正斜杠(
/)結尾的URL路徑都將返回根目錄下的預設首頁。開通:適用於包含多個獨立內容版塊(如
/blog/、/docs/)且各版塊均有獨立首頁的複雜網站。開通後,需設定檔案404規則,用於定義當使用者請求一個不存在的檔案時系統的響應行為:Redirect (預設):重新導向至目錄。當請求的檔案不存在時,系統會檢查其對應目錄下是否存在首頁。如果存在,則返回一個
302重新導向響應,瀏覽器地址欄將更新為目錄路徑(例如,.../subdir變為.../subdir/)。Index:直接返回首頁內容。與Redirect類似,但如果找到對應的目錄首頁,系統會直接返回該首頁的內容和
200狀態代碼,瀏覽器地址欄保持不變。NoSuchKey:直接返回404錯誤。最嚴格的規則,只要請求的檔案不存在,無論其對應目錄下是否有首頁,都一律返回
404錯誤。
預設404頁:設定為
error.html錯誤文檔響應碼:選擇404。
單擊儲存。
步驟二:上傳網站檔案
將準備好的HTML檔案上傳到Bucket,為網站提供實際內容。
下載樣本檔案html.zip並解壓,或使用已有的專案檔。
在Bucket左側功能表列單擊。
拖動樣本檔案或已有專案檔到待上傳檔案視窗,將檔案添加到待上傳檔案清單後,單擊上傳檔案,完成檔案上傳。
步驟三:設定Bucket讀寫權限
配置公用讀取許可權,使網站內容能夠被互連網使用者正常訪問。
公用讀取許可權使Bucket內所有檔案對互連網公開可訪問,任何知道檔案URL的使用者都可以直接下載。因此,僅將網站必需的HTML、CSS、JavaScript等公開資源儲存在此Bucket中,敏感性資料應儲存在其他具有存取控制的Bucket內。
由於建立OSS Bucket時預設開啟阻止公用訪問功能,該功能會阻止Bucket設定為公用讀取或公用讀寫許可權,需要先關閉此功能。
在Bucket左側功能表列單擊。
單擊阻止公用訪問開關,在彈窗中輸入我確認關閉阻止公用訪問,單擊確定,關閉阻止公用訪問設定。
設定Bucket讀寫權限為公用讀取。
切換至讀寫權限頁簽,單擊設定。
選擇Bucket ACL為公用讀取,在彈窗中單擊繼續修改。
單擊儲存。
步驟四:驗證網站配置效果
通過實際訪問測試,確認網站託管功能正常運行。
驗證首頁訪問:在瀏覽器中訪問自訂網域名(如
http://example.com),訪問效果如下圖所示。
驗證404頁面:在瀏覽器中訪問不存在的檔案(如
http://example.com/missing-object),訪問效果如下圖所示。
託管SPA單頁應用
針對單頁應用(SPA)提供專門的託管方案,支援前端路由和頁面重新整理功能,滿足現代Web應用的部署需求。
使用OSS Bucket網域名稱訪問HTML檔案時,出於安全考慮瀏覽器會強制下載而非線上預覽。要實現網頁正常瀏覽(這是靜態網站託管的主要目的),需要綁定自訂網域名,具體操作請參見通過自訂網域名訪問OSS。若Bucket位於中國內地,綁定的網域名稱需要完成ICP備案。
步驟一:配置單頁應用託管
配置單頁應用託管的各項參數,針對SPA的路由特性進行最佳化,確保前端路由能夠正常工作。
前往Bucket列表,單擊目標Bucket名稱,然後在Bucket左側功能表列單擊。
單擊設定,配置以下參數:
預設首頁:設定為
index.html。子目錄首頁:選擇不開通,此時訪問靜態網站網域名稱或者網域名稱下任何一個以正斜杠(
/)結尾的URL都會返回根目錄預設首頁。預設404頁:設定為
index.html(關鍵配置:讓所有路由都重新導向到應用入口)。錯誤文檔響應碼:選擇200(確保路由跳轉返回正確狀態代碼)。
單擊儲存。
步驟二:上傳應用檔案
將準備好的單頁應用檔案上傳到Bucket,完成應用部署。
下載樣本應用demo.zip並解壓,或使用已有的應用檔案。
在Bucket左側功能表列單擊。
拖動
demo目錄下的所有檔案或已有應用檔案到待上傳檔案視窗,將所有檔案添加到待上傳檔案清單後,單擊上傳檔案,完成檔案上傳。
步驟三:設定Bucket讀寫權限
公用讀取許可權使Bucket內所有檔案對互連網公開可訪問,任何知道檔案URL的使用者都可以直接下載。因此,僅將網站必需的HTML、CSS、JavaScript等公開資源儲存在此Bucket中,敏感性資料應儲存在其他具有存取控制的Bucket內。
配置公用存取權限,使單頁應用能夠被使用者正常訪問。
關閉Bucket阻止公用訪問功能。
在Bucket左側功能表列單擊。
單擊阻止公用訪問開關,在彈窗中輸入我確認關閉阻止公用訪問,單擊確定,關閉阻止公用訪問設定。
設定Bucket讀寫權限為公用讀取。
切換至讀寫權限頁簽,單擊設定。
選擇Bucket ACL為公用讀取,在彈窗中單擊繼續修改。
單擊儲存。
步驟四:驗證應用部署效果
通過實際訪問測試,確認單頁應用部署成功並能夠正常處理路由跳轉。
驗證首頁訪問:在瀏覽器中訪問自訂網域名(如
http://example.com)訪問單頁應用,訪問效果如下圖所示。
驗證404頁面:在瀏覽器中訪問不存在的檔案(如
http://example.com/missing-object),請求被重新導向到應用入口,並返回200 OK。訪問效果如下圖所示。
應用於生產環境
為了確保靜態網站在生產環境中穩定運行並提供良好的使用者體驗,需要進行一系列安全性和效能最佳化配置。
最佳實務
安全傳輸:啟用HTTPS訪問
現代瀏覽器對HTTP網站顯示"不安全"警告,搜尋引擎對HTTPS網站給予更高的SEO評分。為綁定的自訂網域名通過HTTPS協議訪問OSS,強制使用HTTPS訪問。HTTPS協議通過TLS/SSL加密傳輸資料,防止資料在傳輸過程中被竊取或篡改,提升網站安全性和使用者信任度。
效能最佳化:配置CDN加速
靜態網站面向全球使用者或大量並發訪問時,可通過配置CDN加速,將內容緩衝到全球邊緣節點,顯著提升訪問速度並降低OSS流量成本。
跨域訪問:配置CORS規則
單頁應用通常需要調用後端API或訪問第三方資源,會遇到瀏覽器同源策略限制。通過配置跨域規則,設定允許的請求來源、方法和頭資訊,確保前端應用能夠正常訪問所需的API服務和外部資源。
版本管理:實現發布與復原
生產環境需要支援快速發布新版本和緊急復原能力。啟用OSS版本控制功能,結合自動化部署工具(如Jenkins),實現持續整合和持續部署的完整工作流程,提高發布效率和系統穩定性。
風險防範
流量盜用防護:配置防盜鏈規則
靜態資源被其他網站直接引用會產生額外的流量費用和伺服器負載。通過配置Referer防盜鏈,設定允許訪問的網域名稱白名單,有效防止惡意網站盜用頻寬資源並控制營運成本。
訪問監控:啟用訪問日誌
生產環境需要完整的訪問記錄用於安全審計、效能分析和故障排查。啟用即時日誌查詢,記錄所有訪問請求的詳細資料,便於識別異常訪問模式、分析使用者行為和最佳化網站效能。
常見問題
單頁應用部署後重新整理頁面出現404錯誤如何解決?
單頁應用的所有路由都由前端JavaScript處理,當直接存取或重新整理非首頁路由時,伺服器找不到對應的物理檔案。解決方案是將預設404頁設定為index.html,錯誤文檔響應碼設定為200,這樣所有"不存在"的路徑都會重新導向到應用入口,由前端路由正確處理。
如何關閉靜態網站託管功能?
前往Bucket列表,單擊目標Bucket名稱,然後在Bucket左側功能表列單擊
單擊設定,清空預設首頁和預設404頁配置,單擊儲存,即可關閉靜態網站託管功能。
靜態網站是否支援動態內容?
靜態網站託管只支援用戶端執行的靜態內容,包括HTML、CSS、JavaScript等。不支援伺服器端動態語言(如PHP、Python、Java)。如需動態功能,可以採用前端架構的用戶端渲染技術,或結合阿里雲Function Compute等無伺服器服務實現後端API調用。