React部署到linux服务器怎样做
Admin 2022-11-14 群英技术资讯 999 次浏览
今天我们来学习关于“React部署到linux服务器怎样做”的内容,下文有详解方法和实例,内容详细,逻辑清晰,有需要的朋友可以参考,希望大家阅读完这篇文章后能有所收获,那么下面就一起来了解一下吧。
本教程操作环境: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 来查看帮助命令
*/
登录后复制
就这样,项目被部署到服务器上了
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
区别:1.JS运行在浏览器端,用于用户的交互效果,NodeJS运行在服务器端,用于服务器的操作,例如,Web服务器创建,数据库的操作,文件的操作等2.JS运行在浏览器端,存在多个JS解释器,存在兼容性的问题,而NodeJS只有V8引擎一种解释器,不存在兼容性问题3.两者都有内置对象,自定义对象,有不同的宿主对象 词语解释(js为例):js的内置对象、自定义对象,和宿主对象javasc
each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组、多维数组、DOM, JSON 等等,这篇文章我们来了解jQuery中each的基本用法,下文有示例供大家参考,有需要的朋友可以看一看,接下来就跟随小编来一起学习一下吧!
JavaScript中判断奇偶数的方法是什么?在JavaScript中,求奇偶数的方法有很多,这里主要是使用if语句来实现,对新手学习if语句的使用会有一定的帮助,文中示例代码介绍的很详细,感兴趣的朋友接下来一起跟随小编看看吧。
这篇文章主要介绍了JavaScript中isPrototypeOf函数,isPrototypeOf() 是 Object函数(类)的下的一个方法,用于判断当前对象是否为另外一个对象的原型,如果是就返回 true,否则就返回 false,下面来看看详细内容,需要的朋友可以参考一下
目录vue打包生成的js文件过大优化1.组件按需加载2.去掉生成map文件3.cdn引入4.路由懒加载5.代码压缩6.最后项目打包之后js文件太大问题问题描述1.使用cdn引入不怎么改变的第三方库2.使用vue的懒加载3.服务器和前端配置开启压缩vue打包生成的js文件过大优化1.组件按需加载现在大多的ui库都是以组件
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前:400-678-4567
7x24小时售后:0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话:010-58813000
服务邮箱:service@cnnic.cn
投诉与建议:0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准(ICP备案)粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008