站長(zhǎng)資訊網(wǎng)
react在linux上部署的方法：1、打開(kāi)配置文件；2、通過(guò)“tar -zcvf client.tar.gz client”命令將client和server打包；3、將“client.tar.gz”，“server.tar.gz”，“theme.js”及“package.json”文件拷貝至服務(wù)器上的項(xiàng)目文件夾下；4、開(kāi)啟服務(wù)即可。
Linux系統(tǒng)運(yùn)維及項(xiàng)目正式上線：進(jìn)入學(xué)習(xí)
本教程操作環(huán)境：linux7.3系統(tǒng)、react18.0.0版、Dell G3電腦。
react怎么在linux上部署？
部署web前端的react項(xiàng)目到linux服務(wù)器
項(xiàng)目的目錄結(jié)構(gòu)
1 ``` 2 ├─dlls #dlls編譯后的問(wèn)題 3 ├─doc #幫助文件入口 4 │ 5 ├─src 6 │ ├─apps #各個(gè)功能模塊放在這里 7 │ │ ├─aftersale #售后模塊 8 │ │ │ └─contractmanage #合同管理 9 │ │ │ └─component 10 │ │ ├─login 11 │ │ ├─sales 12 │ │ | ├─housequery 13 │ │ | └─reservation 14 │ | ├─action.js #主界面可發(fā)起動(dòng)作 15 │ | ├─index.js #主界面視圖，已連接redux 16 │ | └─reducer.js #主界面動(dòng)作處理器 17 │ ├─common #公共資源文件夾，包含功能樣式圖片等 18 │ │ └─img 19 │ │ ├─funButton 20 │ │ └─icons 21 │ ├─components #可復(fù)用視圖組件，與具體業(yè)務(wù)無(wú)強(qiáng)關(guān)聯(lián) 22 │ │ ├─Common 23 │ │ ├─Footer 24 │ │ ├─LeftPanel #左側(cè)菜單 25 │ │ ├─Loding 26 │ │ ├─NavPath #面包屑 27 │ │ ├─PanelBox 28 │ │ ├─RightPanel #右側(cè)主視圖區(qū) 29 │ │ └─TabPanel 30 │ ├─constants #公用靜態(tài)數(shù)據(jù) 31 │ | └─LeftMenu #主菜單結(jié)構(gòu)定義(新增模塊時(shí)在這里增加菜單) 32 │ ├─entries #系統(tǒng)主入口文件 33 │ ├─reducers #系統(tǒng)動(dòng)作處理器注冊(cè)模塊(增加新模塊需配合在這里增加動(dòng)作處理器) 34 │ ├─routes #系統(tǒng)路由動(dòng)態(tài)生成模塊(根據(jù)apps下的模塊結(jié)構(gòu)) 35 │ ├─store #系統(tǒng)全局狀態(tài)存儲(chǔ)器(一般不會(huì)修改) 36 │ │ └─middlewares 37 │ └─util #工具類(lèi)包(xFetch后臺(tái)請(qǐng)求工具等) 38 │ 39 ├─static #靜態(tài)資源存放路徑 40 ```
登錄后復(fù)制
一.編輯配置文件
修改該文件
projectNameserverconfigenvironmentcommon.js process.env.NODE_ENV = 'development' SERVER_IP: process.env.IP || '服務(wù)器ip' SERVER_PORT: process.env.PORT || 8001, //8001, 9092
登錄后復(fù)制
二.打包程序
在項(xiàng)目根路徑下
npm run build
登錄后復(fù)制
出現(xiàn)client
將client和server打包
tar -zcvf client.tar.gz client tar -zcvf server.tar.gz server
登錄后復(fù)制
三.上傳和啟動(dòng)
將client.tar.gz，server.tar.gz，theme.js，package.json這四個(gè)文件拷貝至服務(wù)器上的項(xiàng)目文件夾下面
進(jìn)入項(xiàng)目目錄，開(kāi)啟服務(wù)
cnpm install pm2 start server/app.js /* 也可以使用pm2 -h 或 pm2 --help 來(lái)查看幫助命令 */
登錄后復(fù)制
就這樣，項(xiàng)目被部署到服務(wù)器上了
推薦學(xué)習(xí)：《react視頻教程》
