React項目的打包與部署方法

本篇內容介紹了“React項目的打包與部署方法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

create-react-app

來自Facebook官方的零配置命令行工具。create-react-app是來自于Facebook出品的零配置命令行工具，能夠幫你自動創建基于Webpack+ES6的最簡易的React項目模板，有助于初學者快速上手實踐。安裝create-react-app的方式也非常簡單，可以直接使用 npm 命令進行全局安裝。npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

參考鏈接：http://www.tuicool.com/articles/Qn6ZnqU

打包編譯

執行完上述命令，打開本地瀏覽器，輸入localhost：3000，就能看到項目的運行效果。此時是開發模式。

若使用npm run build，代碼會被編譯到build目錄。將整個應用打包發布，自動試用webpack進行壓縮與優化。

在項目路徑下，敲npm run buil，就出現了build文件夾，同時終端顯示這些文字：

d

大致意思是：已經編譯好啦。build生成的這些東西要放在服務器root下，可以在pakege.json里，根據綠字里的例子，再重寫。

也能讓它充當靜態的服務器，敲：npm install -g serve，在敲serve -s build，就可以了。

騰訊云

比較坑的一點是，騰訊云設置密碼時，字母+數字的組合就可以了，如果非要加上？之類的字符，因為是按住shift才能輸入？字符，

登陸時輸入的密碼會和設置密碼不一致，造成無法登陸…..這個問題解決了好久。

第一步：購買騰訊云服務，不多介紹

第二步：下載filezilla，點擊文件---->站點管理器，登陸到云服務器上。如圖：

登陸好了以后，左邊是本地的文件，右邊是服務器上的，選擇文件夾上傳，就能傳到服務器上了。

在服務器上，也要配置一下環境的。最基本的是安裝node和npm，有很多教程，這里就不贅述了。附上幾個博文，感謝原作者的分享：

ubuntu下nodejs安裝與版本升級：http://blog.csdn.net/lss_csdn/article/details/52165652

我們把build文件夾傳到服務器上去之后，然后在服務器的命令行里，進入build文件夾，直接敲：serve -s，就啟動了這個項目。外網也能訪問了。

易錯點: 要么進入build文件夾后，敲serve -s；要么在build目錄的上一級，敲serve -s build。都能使得編譯后的react項目正確運行。

如果在build目錄的上一級，敲了：serve -s，那么訪問localhost：5000時，會出現這樣的頁面：

相當于把當前目錄當做服務器根目錄了。

而如果在build里，還敲了serve -s build，因為已經在build里了，所以會出現沒有build文件夾的報錯：

一些雜項:

本地終端登陸服務器：ssh 用戶名@服務器外網名。例如：ssh ubuntu@123.206.92.245

然后輸入密碼，不回顯。注意要安裝有ssh和擁有Administrator的權限才能登陸。windows下的ssh配置我用的是這個，一直點下一步就行：

“React項目的打包與部署方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！