云開發(fā) 靜態(tài)網(wǎng)站部署怎么玩

一般情況下，我們開發(fā)好了 html, css, js 以及一些媒體資源（如圖片、視頻）都需要部署到一個(gè)靜態(tài)服務(wù)器。比如 ：

• Github pages 就是靜態(tài)網(wǎng)站服務(wù)；
• Nginx 路由靜態(tài)頁(yè)面也是最基礎(chǔ)的靜態(tài)網(wǎng)站；
• Vuepress 項(xiàng)目的產(chǎn)物的也是靜態(tài)網(wǎng)站；

所以，一般情況下我們說(shuō)到靜態(tài)網(wǎng)站，就是指網(wǎng)站沒(méi)有動(dòng)態(tài)內(nèi)容，就是純 HTML，沒(méi)有動(dòng)態(tài)請(qǐng)求。云開發(fā)也提供了靜態(tài)網(wǎng)站托管（服務(wù)），可以：

• 部署任何資源和文件；
• 可以設(shè)置網(wǎng)站的首頁(yè)，例如 index.html；
• 可以設(shè)置網(wǎng)站的 404 頁(yè)面，例如 404.html；
• 也可以自定義域名，建議這么做；因?yàn)槿绻褂玫氖悄J(rèn)域名，網(wǎng)站的訪問(wèn)會(huì)被限速；
• 可以和云函數(shù)結(jié)合，云函數(shù)負(fù)責(zé)動(dòng)態(tài)調(diào)用數(shù)據(jù)庫(kù)數(shù)據(jù)，靜態(tài)網(wǎng)站托管負(fù)責(zé)部署 html、js、css文件；這樣一個(gè)<span style="color:red;font-weight:bold;">動(dòng)態(tài)網(wǎng)站就誕生了</span>，就全部是 Serverless化了。

靜態(tài)網(wǎng)站托管需要選擇<span style="color:red;font-weight:bold;"&按量付費(fèi)套餐</span&才可以開啟。

將靜態(tài)頁(yè)面部署托管

假定前面沒(méi)有選擇按量付費(fèi)套餐，則可以選擇將環(huán)境切換為“按量付費(fèi)” 或者重新新建環(huán)境，如下圖所示：

比如當(dāng)前的文檔站點(diǎn)就是 Vuepress 上傳上去的，如下圖：

靜態(tài)網(wǎng)站托管會(huì)提供一個(gè)默認(rèn)域名，可以在基礎(chǔ)配置頁(yè)面對(duì)首頁(yè)和404頁(yè)面進(jìn)行設(shè)置。

推薦范式：云端一體化模式

一個(gè)網(wǎng)站離不開動(dòng)態(tài)數(shù)據(jù)，也離不開靜態(tài)頁(yè)面。因此推薦動(dòng)靜結(jié)合的方式。如下圖，

第 1 種方式，可以在云函數(shù)中訪問(wèn)數(shù)據(jù)庫(kù)和云存儲(chǔ)，也是前面篇章提到的方式；然后在靜態(tài)托管中通過(guò) Ajax 請(qǐng)求云函數(shù)的 HTTP 服務(wù)。

第 2 種方式，可以使用云開發(fā)端上 SDK，直接請(qǐng)求數(shù)據(jù)庫(kù)和云存儲(chǔ)等服務(wù)，可以不寫云函數(shù)，整個(gè)站點(diǎn)全部都是前端 JavaScript 代碼。

第 3 種方式，就是第一種和第二種方式的結(jié)合體，適當(dāng)時(shí)機(jī)用云函數(shù) HTTP 觸發(fā)，適當(dāng)時(shí)機(jī)用端側(cè) SDK，然后配合靜態(tài)網(wǎng)站托管，也就是云端一體化開發(fā)模式。