react 開發部署

1、開發

我的以前也粗略看過react的文檔，可是程序員最怕的就是沒有項目實操，看完後一段時間就全忘了，可是如今市面上react的使用又不少（我太難了）。最近由於疫情只能呆在家裏，恰好利用這段時間搞一搞。固然也是粗略的搞，作完一個大屏展現後，發現react上手確實比vue要難點。react沒有vue同樣的模板語法，react更接近原生js的操做，並且配置項也比較多。

這篇文章把我開發中遇到的一些坑記錄下來，方便之後查詢

一、建立項目

直接利用react的腳手架進行建立，這裏又兩種方式:

若是你本地沒有全局安裝create-react-app，須要用npx

npx create-react-app 項目名

若是你本地全局安裝了，就能夠直接使用

create-react-app 項目名

我的建議先在本地全局安裝create-react-app命令，由於使用npx安裝的時候，是直接從服務器上去獲取的，不是很穩定；本地安裝後，要稍微快點。

二、項目目錄結構

利用create-react-app建立項目後，就會生成如圖的目錄結構：

能夠根據我的的習慣靈活組織項目結構，如加入路由、redux等。

三、使用css預編譯

我的偏向less，但react默認不支持less，因此須要配置less-loader，可是我把全部的目錄看了一遍，發現不知道在什麼地方配置（要死了），後面百度了下，發現create-react-app建立的項目默認是沒有config目錄的，須要執行npm run eject才能暴露出來。(尷尬)

npm run eject

而後打開config目錄中的webpack.config.js進行修改

具體修改哪些地方能夠百度下，配置起來仍是比較麻煩的，因此對新手不是那麼友好。

四、本地運行

本地運行很方便，直接輸入npm start命令就會開啓一個本地服務器，並自動打開瀏覽器，react本地服務器默認端口3000，若是端口被佔用，就會隨機分配一個端口：

由於每次啓動的端口都會被隨機，不是很方便，所以你能夠修改固定的端口。react要修改默認端口，須要修改scripts目錄中的start.js，一樣create-react-app建立的項目默認是沒有scripts目錄的，若是要生成scripts目錄，一樣須要執行npm run eject命令。執行完命令後纔會暴露出這個目錄，而後找到start.js裏面的端口配置：

修改完成後從新執行npm start，就會在指定端口啓動

2、線上部署

線上部署的時候遇到的問題就比較頭痛了，每臺服務器的狀況不同，你的問題也許別人沒遇到過，別人給的答案可能根本就不能解決你的問題，只能按實際狀況來。

一、服務器環境安裝

首先確保你的服務器上安裝了node，怎麼安裝能夠網上找下，有很詳細的文章說明，固然要求你懂點linux命令。

二、安裝依賴

將本地處理好的代碼放到服務器上，這裏記得執行npm install命令來安裝依賴，在項目的目錄中執行npm install命令，node會根據package.json中的內容來安裝依賴。

三、編譯

這一步也不會有什麼問題，由於服務器上是不能直接用npm start來運行，涉及到一些資源的路徑問題。因此須要先執行npm run build命令來編譯文件。編譯成功後會生成一個build目錄，裏面就是編譯事後的文件：

四、運行

運行分兩種方式，一種是把build目錄拷貝到nginx對應的目錄中，或者用nginx代理到build目錄，這中方式比較簡單；第二種方式是用serve -s build來啓動服務，而後用nginx代理到react服務，這裏我遇到了問題：

安裝了serve命令後，執行serve -s build時提示命令不可用

這個問題困擾了整整一個上午，網上查資料有幾種說法，有說須要設置package.json中的homepage，我照着設置了，可是任然沒法解決；有說是由於node版本過低的緣由，因此我想升級node版本，因而我安裝了n命令，結果發現n命令也沒法使用。

到這裏我打開明白了不是node的緣由，問題應該在服務器上，終於我找到了一篇文章說是由於node的環境變量問題，須要修改/etc/profile文件
vim /etc/profile
而後在文件最後加上
export PATH="$PATH:/usr/local/nodejs/bin"
/usr/local/nodejs/bin是你的nodejs安裝目錄，而後執行讓變量生效的命令
source /etc/profile
而後從新安裝serve命令
npm install -g serve
成功後，執行
serve -s build
就能夠正常啓動了

可是，這個時候你不太好訪問，須要在nginx中添加代理，找到nginx的安裝目錄，而後找到nginx.conf文件添加代理：
location / { proxy http://127.0.0.1:5500; }

到這裏就皆大歡喜了，頁面跑起來了！固然，若是你也是這麼作的，可是任然有問題也不要灰心，能夠仔細找找問題。~~~~