騰訊雲送了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配置我用的是這個,一直點下一步就行: