React項目的打包與部署到騰訊雲

騰訊雲送了30天的免費試用，因而有了把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配置我用的是這個，一直點下一步就行：