部署web前端的react項目到linux服務器
項目的目錄結構
1 ``` 2 ├─dlls #dlls編譯后的問題 3 ├─doc #幫助文件入口 4 │ 5 ├─src 6 │ ├─apps #各個功能模塊放在這里 7 │ │ ├─aftersale #售后模塊 8 │ │ │ └─contractmanage #合同管理 9 │ │ │ └─component 10 │ │ ├─login 11 │ │ ├─sales 12 │ │ | ├─housequery 13 │ │ | └─reservation 14 │ | ├─action.js #主界面可發起動作 15 │ | ├─index.js #主界面視圖，已連接redux 16 │ | └─reducer.js #主界面動作處理器 17 │ ├─common #公共資源文件夾，包含功能樣式圖片等 18 │ │ └─img 19 │ │ ├─funButton 20 │ │ └─icons 21 │ ├─components #可復用視圖組件，與具體業務無強關聯 22 │ │ ├─Common 23 │ │ ├─Footer 24 │ │ ├─LeftPanel #左側菜單 25 │ │ ├─Loding 26 │ │ ├─NavPath #面包屑 27 │ │ ├─PanelBox 28 │ │ ├─RightPanel #右側主視圖區 29 │ │ └─TabPanel 30 │ ├─constants #公用靜態數據 31 │ | └─LeftMenu #主菜單結構定義(新增模塊時在這里增加菜單) 32 │ ├─entries #系統主入口文件 33 │ ├─reducers #系統動作處理器注冊模塊(增加新模塊需配合在這里增加動作處理器) 34 │ ├─routes #系統路由動態生成模塊(根據apps下的模塊結構) 35 │ ├─store #系統全局狀態存儲器(一般不會修改) 36 │ │ └─middlewares 37 │ └─util #工具類包(xFetch后台請求工具等) 38 │ 39 ├─static #靜態資源存放路徑 40 ```
一.編輯配置文件
修改該文件
projectName\server\config\environment\common.js
process.env.NODE_ENV = 'development' SERVER_IP: process.env.IP || '服務器ip' SERVER_PORT: process.env.PORT || 8001, //8001, 9092
二.打包程序
在項目根路徑下
npm run build
出現client
將client和server打包
tar -zcvf client.tar.gz client
tar -zcvf server.tar.gz server
三.上傳和啟動
將client.tar.gz，server.tar.gz，theme.js，package.json這四個文件拷貝至服務器上的項目文件夾下面
進入項目目錄，開啟服務
cnpm install pm2 start server/app.js
/*
也可以使用pm2 -h 或 pm2 --help 來查看幫助命令
*/
就這樣，項目被部署到服務器上了