焦点热文:react怎么在linux上部署

时间:2022-10-25 17:54:24       来源:PHP中文网

本教程操作环境:linux7.3系统、react18.0.0版、Dell G3电脑。

react怎么在linux上部署?

部署web前端的react项目到linux服务器


(相关资料图)

项目的目录结构

1 ``` 2 ├─dlls                          #dlls编译后的问题 3 ├─doc                           #帮助文件入口 4 │ 5 ├─src 6 │ ├─apps                        #各个功能模块放在这里 7 │ │  ├─aftersale                #售后模块 8 │ │  │  └─contractmanage        #合同管理 9 │ │  │      └─component10 │ │  ├─login11 │ │  ├─sales12 │ │  |   ├─housequery13 │ │  |   └─reservation14 │ |  ├─action.js                #主界面可发起动作15 │ |  ├─index.js                 #主界面视图,已连接redux16 │ |  └─reducer.js               #主界面动作处理器17 │ ├─common                      #公共资源文件夹,包含功能样式图片等18 │ │  └─img19 │ │      ├─funButton20 │ │      └─icons21 │ ├─components                  #可复用视图组件,与具体业务无强关联22 │ │  ├─Common23 │ │  ├─Footer24 │ │  ├─LeftPanel                #左侧菜单25 │ │  ├─Loding26 │ │  ├─NavPath                  #面包屑27 │ │  ├─PanelBox28 │ │  ├─RightPanel               #右侧主视图区29 │ │  └─TabPanel30 │ ├─constants                   #公用静态数据31 │ |  └─LeftMenu                 #主菜单结构定义(新增模块时在这里增加菜单)32 │ ├─entries                     #系统主入口文件33 │ ├─reducers                    #系统动作处理器注册模块(增加新模块需配合在这里增加动作处理器)34 │ ├─routes                      #系统路由动态生成模块(根据apps下的模块结构)35 │ ├─store                       #系统全局状态存储器(一般不会修改)36 │ │  └─middlewares37 │ └─util                        #工具类包(xFetch后台请求工具等)38 │39 ├─static                        #静态资源存放路径                      40 ```
登录后复制

一.编辑配置文件

修改该文件

projectName\server\config\environment\common.jsprocess.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 clienttar -zcvf server.tar.gz server
登录后复制

三.上传和启动

将client.tar.gz,server.tar.gz,theme.js,package.json这四个文件拷贝至服务器上的项目文件夹下面

进入项目目录,开启服务

cnpm installpm2 start server/app.js/*也可以使用pm2 -h 或 pm2 --help 来查看帮助命令*/
登录后复制

就这样,项目被部署到服务器上了

推荐学习:《react视频教程》

以上就是react怎么在linux上部署的详细内容,更多请关注php中文网其它相关文章!

关键词: 相关文章 可以使用 公共资源