簡介

簡介

DCloud爲開發者提供了網站發佈、App發佈等功能，前端網頁託管是其中的網頁發佈環節產品。

前端網頁託管基於uniCloud的能力，爲開發者的html網頁提供更快速、更安全、更省心、更便宜的網站發佈。

• 更快速：不經過web server，頁面和資源直接上cdn，就近訪問，速度更快。
• 更安全：不存在傳統服務器各種操作系統、web server的漏洞，不用天天想着打補丁。不怕DDoS攻擊，永遠打不垮的服務。
• 更省心：無需再購買虛擬機、安裝操作系統、配置web服務器、處理負載均衡、處理大併發、處理DDoS攻擊……您什麼都不用管，只需上傳您寫的頁面文件
• 更便宜：uniCloud由DCloud聯合阿里雲和騰訊雲推出，其中阿里雲版本完全免費。

案例

• HBuilderX文檔網站，是一個基於markdown的文檔系統，域名：https://hx.dcloud.net.cn/
• uni統計官網現已部署到uniCloud，一份報表，掌握業務全景，域名：https://tongji.dcloud.net.cn
• hello uni-app項目現已部署到uniCloud，線上地址：https://hellouniapp.dcloud.net.cn

開通

首先開發者需要開通uniCloud，登錄https://unicloud.dcloud.net.cn/。

然後選擇或創建一個服務空間。

最後在上述網頁左側導航點擊前端網頁託管，即可開始使用。

前端網頁託管和雲函數沒有綁定關係，可以和雲函數部署在一個服務空間，也可以是不同的空間，甚至是不同雲服務商的空間。

• 阿里雲前端網頁託管免費。
• 騰訊雲前端網頁託管需付費開通，定價由騰訊雲提供。騰訊雲的不同檔套餐有不同規格，見文末附表：

使用

開通後，需要把開發者的前端網頁，上傳到uniCloud的前端網頁託管中。

目前提供了2種方式操作：

方式1. 通過uniCloud控制檯，在web界面上傳。

上傳時，可以按文件上傳，也可以按文件夾上傳。

如果是按文件夾上傳，可以選擇上傳後的目錄是否包含上傳文件夾的根目錄。

方式2. 通過HBuilderX工具上傳。

HBuilderX 2.8+起，支持在HBuilderX中直接上傳前端網頁到uniCloud中。

在菜單發行中，選擇上傳網站到服務器。

• 對於uni-app項目，可以先編譯爲h5，然後直接把編譯後的h5上傳上去。如下圖

• 對於非uni-app項目，可以自己選擇要上傳的目錄，包含html、js、css、圖片等靜態前端文件接口。如下圖

HBuilderX 2.8.9+，支持前端網頁託管管理器。

在菜單視圖中，或者在左下角狀態欄中，點擊前端網頁託管，可在左側打開前端網頁託管管理器。如下圖

在前端網頁託管管理器中，可以看到當前用戶的服務空間列表，置灰表示該服務空間還沒有開通前端網頁託管，點擊後可根據提示開通。（如上圖中置灰的ali1服務空間）。

點擊可用的服務空間，在右側可以看到遠端的資源管理器，把本地文件拖進入，即可上傳文件。

注意事項

1. 前端網頁託管適於uni-app的h5頁面發佈。尤其是配搭uniCloud雲開發，將徹底不用再租用任何傳統的服務器。
2. 前端網頁託管適於所有前後端分離的網站中的前端頁面發佈，包括pc網頁。
3. 僅支持html、CSS、JavaScript、字體、圖片、音視頻、json等文件。不支持php、java、python、ruby、go、c++等其他需要額外語言解釋器解釋的語言文件。
4. 如果開發者需要做a/b test或灰度新功能，需要自己在js裏寫代碼實現，不能通過路由到不同服務器實現。
5. uni-app項目編譯爲h5時，在項目的manifest中配置二級目錄。上傳時無需重複設置二級目錄。
6. 一個前端網頁託管的空間裏，可以上傳多個網站，用不同目錄區分開，訪問時使用同一個域名後加不同目錄的方式訪問。不支持每個目錄單獨設置不同域名。
7. 部署到不同的服務空間的前端網頁託管內的網站，也是可以訪問同一個服務空間內的雲函數的，只需要在部署雲函數的服務空間的跨域配置內添加部署前端頁面的域名即可

基礎配置@base-config

本章節介紹前端網頁託管提供的各種配置項目說明。其中配置域名、網站首頁、404頁面，是阿里雲和騰訊雲均支持的，其他配置僅騰訊雲支持。

配置域名@domain

前端網頁託管，自帶一個測試域名，僅用於產品體驗及測試可快速體驗前端網頁部署的完整流程，該域名有如下限制：

• 阿里雲每分鐘最多60次請求，默認每日僅允許10個公網IP訪問，超出部分，需通過手動方式將來源IP加入白名單,IP白名單也會有數量限制
• 騰訊雲限速100K/s

業務如要上線商用，請配置自己的正式域名，配置自己的正式域名後，將不受上述測試域名的限制。（尤其注意阿里雲測試域名是公共的，任意一個服務空間如果有上傳惡意文件被投訴，會導致測試域名被微信內置瀏覽器整體禁封）

前端網頁託管配置自己域名的步驟如下：

1. 登錄uniCloud控制檯。
2. 進入前端網頁託管頁面，選擇【基礎設置】，單擊【添加域名】，進行域名添加，如下圖所示：

1. 添加後，系統會自動分配一個 CNAME 域名，CNAME 域名不能直接訪問，您需要在域名服務提供商處完成 CNAME 配置（將添加的域名CNAME到此域名），配置生效後，新域名即可使用。

阿里雲現已支持http強制跳轉https，在上述添加界面打開對應開關即可

域名備案

如果你已經有備案過的域名，直接解析過來即可；如果你要新註冊域名，首先自行在網上購買，然後注意域名如果想在國內正常綁定阿里雲或騰訊雲，需要域名備案。這裏的備案流程和傳統雲主機略有不同，涉及一個uniCloud沒有固定ip的問題。此時可以去買花生殼的備案服務；也可以臨時買一個短期傳統雲，走傳統備案；還有授權碼方案，這裏有開發者分享的經驗貼：https://ask.dcloud.net.cn/article/38116

關於證書內容與私鑰

域名如果使用https，則需要證書。證書籤發後，可下載到本地，然後將內容複製黏貼到uniCloud web控制檯。

注意：各運營商下載證書的後綴可能不同，一般來說，.key文件對應私鑰，.pem或.crt文件對應證書。這幾種類型文件都是文本內容，可選擇記事本打開查看內容。

如果您還沒有SSL證書，點此快速獲取。

注意事項

• 在阿里雲開啓了泛域名加速的情況下，對應的子域名可能無法配置到前端網頁託管，這種情況下可能會提示：該域名已被添加過，不能重複添加
• 暫不支持綁定中文域名

路由規則@routing

網站首頁

設置網站首頁文檔名

404頁面

訪問靜態網站出錯後返回的頁面。

重定向規則

僅騰訊雲支持

支持以下三種組合配置

• 類型：錯誤碼、規則：替換路徑。將特定錯誤碼的請求重定向到目標文檔，僅支持對4xx錯誤碼。

例：將404錯誤碼重定向至index.html，需做如下配置（uni-app項目使用history模式發行到h5時可以使用此配置）：

• 類型：前綴匹配、規則：替換路徑。將匹配到特定前綴的請求重定向到目標文檔

例：當您刪除了images/文件夾（即刪除了具有前綴images/的所有對象）。您可以添加重定向規則，將具有前綴images/的任何對象的請求重定向至test.html頁面。

• 類型：前綴匹配、規則：替換前綴。將匹配到特定前綴的請求中的前綴替換爲替換內容，例：

例：當您將文件夾從docs/重命名爲documents/後，用戶在訪問docs/文件夾會產生錯誤。所以，您可以將前綴docs/的請求重定向至documents/。

緩存配置@cache

僅騰訊雲支持

• 文件類型：根據填入的文件後綴進行緩存過期時間設置，格式爲.jpg形式，不同後綴之間用;間隔。
• 文件夾：根據填入的目錄路徑進行緩存過期時間設置，格式爲/test形式，無需以/結尾，不同目錄之間用;間隔。
• 全路徑文件：指定完整的文件路徑進行緩存過期時間設置，格式爲/index.html，支持完整路徑加文件類型匹配模式，如/test/*.jpg。

注意

• 緩存過期規則最多可配置10條。
• 多條緩存過期規則之間的優先級爲底部優先。
• 緩存過期時間最多可設置365天。

防盜鏈配置@referer

僅騰訊雲支持

referer 黑名單：

• 若請求的 referer 字段匹配黑名單內設置的內容，CDN 節點拒絕返回該請求信息，直接返回403狀態碼。
• 若請求的 referer 不匹配黑名單內設置的內容，則 CDN 節點正常返回請求信息。
• 當勾選包含空 referer 選項時，此時若請求 referer 字段爲空或無 referer 字段（如瀏覽器請求），則 CDN 節點拒絕返回該請求信息，返回403狀態碼。

referer白名單：

• 若請求的 referer 字段匹配白名單設置的內容，則 CDN 節點正常返回請求信息。
• 若請求的 referer 字段不匹配白名單設置的內容，則 CDN 節點拒絕返回該請求信息，會直接返回狀態碼403。
• 當設置白名單時，CDN 節點只能返回符合該白名單內字符串內容的請求。
• 當勾選包含空 referer 選項時，此時若請求 referer 字段爲空或無 referer 字段（如瀏覽器請求），則 CDN 正常返回請求信息。

配置規則：

防盜鏈支持域名 / IP 規則，匹配方式爲前綴匹配（僅支持路徑情況下，域名的前綴匹配不支持），即假設配置名單爲www.abc.com，則www.abc.com/123匹配，www.abc.com.cn不匹配；假設配置名單爲127.0.0.1，則127.0.0.1/123也會匹配。 防盜鏈支持通配符匹配，即假設名單爲*.qq.com，則www.qq.com、a.qq.com均會匹配。

IP黑白名單配置@ip-filter

僅騰訊雲支持

IP 黑名單

用戶端 IP 匹配黑名單中的 IP 或 IP 段時 ，訪問 CDN 節點時將直接返回403狀態碼。

IP 白名單

用戶端 IP 未匹配白名單中的 IP 或 IP 段時 ，訪問 CDN 節點時將直接返回403狀態碼。

名單規則

• IP 黑名單與 IP 白名單二選一，不可同時配置。
• IP 段僅支持 /8、/16、/24 網段，不支持其他網段。
• 不支持IP：端口形式的黑白名單
• 名單最多可輸入50個。

默認域名IP白名單@default-domain-ip-whitelist

僅阿里雲支持

爲保障默認域名不被濫用，阿里雲對默認域名做出瞭如下限制：每天前10個IP可以直接訪問，超出10個IP後需要配置IP白名單纔可以訪問

僅支持配置ipv4，可以配置IP或者IP網段，掩碼位數取值範圍24-31。最多可同時配置三個，多個之間用逗號隔開，如：123.120.5.235/24,123.123.123.123

IP訪問限頻配置@ip-freq

僅騰訊雲支持

配置說明

• 配置開啓後，超出 QPS 限制的請求會直接返回514，設置較低頻次限制可能會影響您的正常高頻用戶的使用，請根據業務情況、使用場景合理設置閾值。
• 限頻僅針對與單 IP 單節點訪問次數進行約束，若惡意用戶海量 IP 針對性的進行全網節點攻擊，則通過此功能無法進行有效控制。

最佳實踐

部署uni-app項目@host-uni-app

uni-app項目根據路由模式不同需要做不同的配置

• 使用hash模式時，無需特別的配置即可正常使用

• 使用history模式時可以配置如下規則

  • 騰訊雲配置重定向規則將404錯誤碼重定向至index.html
  • 阿里雲配置錯誤文檔爲index.html

手動部署uni-app項目時需要注意將文件部署在配置的h5基礎路徑下。HBuilderX一鍵部署時會自動按照manifest.json內配置的基礎路徑進行部署

如果部署多個項目到一個服務空間可以使用不同的基礎路徑來區分，需要注意的是這多個項目中只有一個項目可以使用history模式

騰訊雲計費詳細說明

注意

• 資源統計頁面展示的數據可能會有延遲
• 讀次數、寫次數、回源流量爲系統限制，在現有套餐的容量、流量限制下一般不會超出
• 騰訊雲前端網頁部署套餐到期之後會保留7天，超過7天將會銷燬
• 如果服務空間是包月套餐，在服務空間到期但是前端網頁託管未到期的情況下，前端網頁託管也會隨服務空間銷燬，請注意給服務空間續費

阿里雲使用限制

• 前端網頁部署限制爲最大存儲空間用量2GB
• 單文件最大限制爲50MB

名詞解釋

CDN 回源流量

指開啓了 CDN 加速後，CDN 回源存儲時產生的流量。