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

導語

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

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

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

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

?

系統(tǒng)依賴

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

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

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

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

本地初始化一個React項目

過程中腳手架會自動安裝項目中需要的相關依賴，安裝完成后可以看到下面這樣的輸出

安裝完成之后進入到項目目錄，啟動本地預覽，成功后項目將會運行在本地的3000端口

cd reactdemo
yarn start

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

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

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

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

新建一個環(huán)境，或者使用已創(chuàng)建的環(huán)境，注意這里計費方式需要選擇按量計費，因為只有按量計費才可以進行開通靜態(tài)網(wǎng)站

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

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

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

初始化云開發(fā)CLI

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

在命令行中輸入

將會跳轉(zhuǎn)到云開發(fā)控制臺頁面進行授權(quán)，

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

打包React項目并部署

回到React項目目錄中執(zhí)行yarn build對項目進行打包，React腳手架將會默認將文件打包到build的目錄下

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

cloudbase hosting:deploy -e envId

部署完成后，就可以進行預覽了

線上訪問

進入對應環(huán)境設置頁面，可以找到默認的的域名，點擊域名，就可以看到你剛剛部署React項目，由于默認域名僅供測試使用，限制下行速度10KB/S。

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

總結(jié)

只需簡單的幾步，你就可以輕松實現(xiàn)將React生成的SPA應用部署到云開發(fā)上，不需要去購買服務器來進行部署，也不用去部署在Github上無法忍受的龜速！省去服務器購買的費用，還不趕快行動起來？