• 技术文章 >web前端 >js教程

    react怎么在linux上部署

    藏色散人藏色散人2022-10-25 17:36:15原创243

    react在linux上部署的方法:1、打开配置文件;2、通过“tar -zcvf client.tar.gz client”命令将client和server打包;3、将“client.tar.gz”,“server.tar.gz”,“theme.js”及“package.json”文件拷贝至服务器上的项目文件夹下;4、开启服务即可。

    大前端成长进阶课程:进入学习

    本教程操作环境: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 │ │  │      └─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 来查看帮助命令
    */

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

    推荐学习:《react视频教程

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    Linux系统运维及项目正式上线:点击学习

    专题推荐:linux React
    上一篇:怎么使用react实现一个tab组件 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 总结Vue创建响应式数据对象(reactive、ref、toRef、toRefs)• 详解vue3中reactive和ref的区别(源码解析)• 原理详解:Vue3中reactive和ref的区别• 什么是React高阶组件?怎么它创建一个面包屑导航?• 怎么使用react实现一个tab组件
    1/1

    PHP中文网