雲開發部署React項目

導語

React是目前比較火的前端框架之一，除了能夠在自有服務器、Github Pages 部署之外，如今你有了一個新的選擇，那就是使用雲開發靜態網站功能來進行部署。

雲開發靜態網站託管支持經過雲開發SDK調用服務端資源如：雲函數、雲存儲、雲數據庫等，從而將靜態網站擴展爲全棧網站

雲開發（CloudBase）是騰訊云爲開發者提供的一站式後端雲服務，它幫助開發者統一構建和管理資源，免去了移動應用開發過程當中繁瑣的服務器搭建及運維、域名註冊及備案、數據接口實現等繁瑣流程，讓開發者能夠專一於業務邏輯的實現，而無需理解後端邏輯及服務器運維知識，開發門檻更低，效率更高。

不管是騰訊雲·雲開發用戶，仍是小程序·雲開發用戶，只要開通按量付費，便可享有云開發靜態網站託管服務。

系統依賴

在進行後續的內容前，請先確保你的電腦中安裝了 Node.js 運行環境。若是沒有安裝，能夠訪問nodejs.org下載安裝。

安裝雲開發 cli 工具 和 React腳手架

在配置好NodeJS環境後，執行以下命令，安裝雲開發cli工具以及React腳手架工具

npm i -g @cloudbase/cli 
npm i -g create-react-app

本地初始化一個React項目

npx create-react-app reactdemo

過程當中腳手架會自動安裝項目中須要的相關依賴，安裝完成後能夠看到下面這樣的輸出

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

cd reactdemo
yarn start

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

建立雲開發環境

建立一個雲開發環境用來部署React項目，能夠從微信開發工具建立，也能夠經過騰訊雲控制檯，在產品中找到雲開發，這邊舉例如何從騰訊雲中找到雲開發

進入到雲開發的管理控制檯，點擊新建環境，或者使用現有的環境來進行部署

新建一個環境，或者使用已建立的環境，注意這裏計費方式須要選擇按量計費，由於只有按量計費才能夠進行開通靜態網站

開通環境後，有一個環境ID，這個ID後續會使用到，點擊對應的環境進入環境的管理頁面，點擊菜單欄中的靜態網站，開通靜態網站服務

出現下面圖示的界面，說明已經開通成功了

如今咱們經過雲開發的CLI來完成React項目的部署

初始化雲開發CLI

完成了雲開發環境的配置後， 須要登錄雲開發 cli ，從而實現藉助 cli 來進行部署（固然， 也能夠經過網頁端直接上傳）
在命令行中輸入

將會跳轉到雲開發控制檯頁面進行受權

確認受權後出現下圖的界面，證實登錄成功了，同時有個小tips，就是cloudbase可使用簡寫命令tcb

打包React項目並部署

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

打包完成後，進入到build後的目錄執行以下命令來進行部署，envID須要替換成本身的envID

cloudbase hoting:deploy -e yourEnvID

部署完成後，就能夠進行預覽了

線上訪問

進入對應環境設置頁面，能夠找到默認的的域名，點擊域名，就能夠看到你剛剛部署React項目，因爲默認域名僅供測試使用，限制下行速度10KB/S
若是須要對外正式提供網站服務，最好綁定已備案的自定義域名

總結

只需簡單的幾步，你就能夠輕鬆實現將React生成的SPA應用部署到雲開發上，不須要去購買服務器來進行部署，也不用去部署在Github上沒法忍受的龜速！省去服務器購買的費用，還不趕快行動起來？