云開發(fā) 部署 React.js 項(xiàng)目

導(dǎo)語(yǔ)

React是目前比較火的前端框架之一，除了可以在自有服務(wù)器、Github Pages 部署以外，現(xiàn)在你有了一個(gè)新的選擇，那就是使用云開發(fā)靜態(tài)網(wǎng)站功能來進(jìn)行部署。

云開發(fā)靜態(tài)網(wǎng)站托管支持通過云開發(fā)SDK調(diào)用服務(wù)端資源如：云函數(shù)、云存儲(chǔ)、云數(shù)據(jù)庫(kù)等，從而將靜態(tài)網(wǎng)站擴(kuò)展為全棧網(wǎng)站

云開發(fā)（CloudBase）是騰訊云為開發(fā)者提供的一站式后端云服務(wù)，它幫助開發(fā)者統(tǒng)一構(gòu)建和管理資源，免去了移動(dòng)應(yīng)用開發(fā)過程中繁瑣的服務(wù)器搭建及運(yùn)維、域名注冊(cè)及備案、數(shù)據(jù)接口實(shí)現(xiàn)等繁瑣流程，讓開發(fā)者可以專注于業(yè)務(wù)邏輯的實(shí)現(xiàn)，而無需理解后端邏輯及服務(wù)器運(yùn)維知識(shí)，開發(fā)門檻更低，效率更高。

無論是騰訊云·云開發(fā)用戶，還是小程序·云開發(fā)用戶，只要開通按量付費(fèi)，即可享有云開發(fā)靜態(tài)網(wǎng)站托管服務(wù)。

?

系統(tǒng)依賴

在進(jìn)行后續(xù)的內(nèi)容前，請(qǐng)先確保你的電腦中安裝了 Node.js 運(yùn)行環(huán)境。如果沒有安裝，可以訪問 nodejs.org 下載安裝。

安裝云開發(fā) cli 工具 和 React腳手架

在配置好 NodeJs環(huán)境后，執(zhí)行如下命令，安裝云開發(fā) cli 工具以及 React腳手架：

npm install -g @cloudbase/cli
npx create-react-app reactdemo

本地初始化一個(gè)React項(xiàng)目

過程中腳手架會(huì)自動(dòng)安裝項(xiàng)目中需要的相關(guān)依賴，安裝完成后可以看到下面這樣的輸出

安裝完成之后進(jìn)入到項(xiàng)目目錄，啟動(dòng)本地預(yù)覽，成功后項(xiàng)目將會(huì)運(yùn)行在本地的3000端口

cd reactdemo
yarn start

在瀏覽器中打開localhost:3000，可以看到React的界面，這樣說明成功完成了本地開發(fā)的項(xiàng)目搭建

創(chuàng)建云開發(fā)環(huán)境

創(chuàng)建一個(gè)云開發(fā)環(huán)境用來部署React項(xiàng)目，可以從微信開發(fā)工具創(chuàng)建，也可以通過騰訊云控制臺(tái)，在產(chǎn)品中找到云開發(fā)，這邊舉例如何從騰訊云中找到云開發(fā)

進(jìn)入到云開發(fā)的管理控制臺(tái)，點(diǎn)擊新建環(huán)境，或者使用現(xiàn)有的環(huán)境來進(jìn)行部署

新建一個(gè)環(huán)境，或者使用已創(chuàng)建的環(huán)境，注意這里計(jì)費(fèi)方式需要選擇按量計(jì)費(fèi)，因?yàn)橹挥邪戳坑?jì)費(fèi)才可以進(jìn)行開通靜態(tài)網(wǎng)站

開通環(huán)境后，有一個(gè)環(huán)境ID，這個(gè)ID后續(xù)會(huì)使用到，點(diǎn)擊對(duì)應(yīng)的環(huán)境進(jìn)入環(huán)境的管理頁(yè)面，點(diǎn)擊菜單欄中的靜態(tài)網(wǎng)站，開通靜態(tài)網(wǎng)站服務(wù)

出現(xiàn)下面圖示的界面，說明已經(jīng)開通成功了。

現(xiàn)在我們通過云開發(fā)的CLI來完成React項(xiàng)目的部署。

初始化云開發(fā)CLI

完成了云開發(fā)環(huán)境的配置后，需要登陸云開發(fā) cli ，從而實(shí)現(xiàn)借助 cli 來進(jìn)行部署（當(dāng)然， 也可以通過網(wǎng)頁(yè)端直接上傳）

在命令行中輸入

將會(huì)跳轉(zhuǎn)到云開發(fā)控制臺(tái)頁(yè)面進(jìn)行授權(quán)，

確認(rèn)授權(quán)后出現(xiàn)下圖的界面，證明登陸成功了，同時(shí)有個(gè)小 tips，就是 cloudbase 可以使用簡(jiǎn)寫命令 tcb

打包React項(xiàng)目并部署

回到React項(xiàng)目目錄中執(zhí)行yarn build對(duì)項(xiàng)目進(jìn)行打包，React腳手架將會(huì)默認(rèn)將文件打包到build的目錄下

打包完成后，進(jìn)入到build后的目錄執(zhí)行如下命令來進(jìn)行部署，envID需要替換成自己的envID

cloudbase hosting:deploy -e envId

部署完成后，就可以進(jìn)行預(yù)覽了

線上訪問

進(jìn)入對(duì)應(yīng)環(huán)境設(shè)置頁(yè)面，可以找到默認(rèn)的的域名，點(diǎn)擊域名，就可以看到你剛剛部署React項(xiàng)目，由于默認(rèn)域名僅供測(cè)試使用，限制下行速度10KB/S。

如果需要對(duì)外正式提供網(wǎng)站服務(wù)，最好綁定已備案的自定義域名。

總結(jié)

只需簡(jiǎn)單的幾步，你就可以輕松實(shí)現(xiàn)將React生成的SPA應(yīng)用部署到云開發(fā)上，不需要去購(gòu)買服務(wù)器來進(jìn)行部署，也不用去部署在Github上無法忍受的龜速！省去服務(wù)器購(gòu)買的費(fèi)用，還不趕快行動(dòng)起來？