超简单的React项目打包后部署到服务器上
前言:我们都知道有些react项目路由采用的是BrowserRouter跟vue的history模式一样,打包后生成的不管是dist,还是build的文件,直接打开都无法直接浏览到项目,然后查看控制器,就发现它报错。
如图:
用脚手架创建的 react / vue 项目,已经集成了webpack,只要运行命令:npm run build 或 yarn run build 项目就会编译成功,生成一个dist文件夹,现在问题来了,如何启动这个编译后项目呢。
首先先说一下在本地里怎么能够运行打包后的文件吧:
1.静态服务器
对于使用Node
的环境,处理这个最简单的方法是安装serve
并让它处理其余的:
npm install -g serve
serve -s build
上面显示的最后一个命令将在端口3000上为您的静态站点提供服务。像许多serve
的内部设置一样,可以使用-l或--listen
标志调整端口:
serve -s build -l 4000
运行此命令以获取可用选项的完整列表:
serve -h
另外你可以直接使用这条
serve -s
然后你需要cd dist文件下
运行
serve -s
看一下我的成功运行是这样的:
然后浏览器下输入地址就可以浏览到了。
如果你没有cd到dist文件那你可能看到的是整个项目的目录。
2.nginx
不懂如何配的可以直接访问:Windows下安装部署Nginx
另外我发现有人用tomcat
服务器部署把dist文件放在webapps下输入路劲,但是我本人试了一下放在服务器里还是一样会报错,无法浏览,可能我配的不太对吧。
然后重点来了,前面说了那么多,还没说怎么部署到服务器上,其实,在本地上可以运行的,哪服务器为啥不行,很简单,还是刚才的哪两种方法,我只介绍最简单的静态服务器,本地与服务器的差别,无非就是服务器需要给其它人访问到,而且需要一直运行着。
采用serve
服务部署项目
1.首先的你的linux系统需要安装有node环境
emm,我很早以前就装好了,没有的需要你自己百度。
2.在你的服务器上全局安装serve
npm install -g serve
3.打包好项目这个需要看你项目下的package.json文件
npm run buid
4.我是利用图形界面工具把dist文件直接拖过去的。
5.然后上传成功后就可以看到dist,cd 进入dist
6.执行指令
nohup serve -s &
或者你指定一下端口号
nohup serve -s build -l 3000 &
7.这时候你可以看到你有一个进程已经运行起来了。
8.退出的时候一定要exit
离开,不然你关闭链接后,你的服务也会停掉
9.最后别忘了去阿里云的防火墙开放端口号3000,看你启动的是那个端口号就开放那个端口号
10.可以看到我的项目已经可以成功的跑起来了
react项目部署nginx服务器
1.安装Ngnix
参考:
1.菜鸟编程
https://www.runoob.com/linux/nginx-install-setup.html
中途可能会报一些错
也可以参考这篇:
Linux系统中如何安装nginx
每个人的系统都不一样,装的时候肯定报一些错我给出几条安装时候常用的一些配置的时候用到的命令。
whereis
命令: whereis
语法: whereis 参数 查询目标
find
命令: find语法: find 路径 参数 输出
常用 find /-name 文件名检查测试nginx的配置信息是否正确
/usr/local/nginx/sbin/nginx -t
修改了nginx的配置文件后,可以使用该命令让新的配置立即生效,而不用重启整个nginx服务器
/usr/local/nginx/sbin/nginx -s reload
使用下面的命令检测nginx是否启动成功,并查看nginx的主进程和子进程的详细信息。
ps aux | grep nginx
2.配置Ngnix
参考这篇
https://juejin.cn/post/6844903846129434638
nginx 里边 try_files的用法
核心作用:可以替代rewrite
作用域: server 、location
没有默认值语法: try_files 【$uri 】 【 $uri/ 】 参数
如:
try_files $uri $uri/ /index.php$is_args$args 或 try_files $uri $uri/ = 404$uri 是请求文件的路径
$uri/ 事请求目录的路径参数: $uri
解释: 表示当前请求的URI,不带任何参数
访问: curl http://test.wanglei.com/192.168.1.200?a=10 -I
返回: "/192.168.1.200"
这是我的配置可以参考一下。
更多的可以参考这篇文章。利用nginx做反向代理。
Nginx反向代理
总结:
最常用的部署可能还是采用Nginx
但是仔细想想每个项目可能要求nginx
的配置不一样,也会可能导致其它的项目不可访问。而采用node
环境下的serve
,就安装node,跟serve,很简单,需要那个文件被访问到就在文件下执行serve -s
很多时候这种都是给测试用的比较方便,但是要是个人项目的话部署,也可以采用这种方法。
超简单的React项目打包后部署到服务器上相关推荐
- vue项目打包后部署到服务器(超详细步骤)
耽误了几天, 终于开始写第二篇博客了, 这篇会讲怎么将vue项目打包部署到服务器, 其实和上一篇的uni-app步骤一样的, 就是最后多了一步修改nginx配置, 好 , 上操作 一 ,打包项目 vs ...
- react项目打包后路径找不到,项目打开后页面空白的问题
使用 npm install -g create-react-app快速生成项目脚手架打包后出现资源找不到的路径问题: 解决办法:在package.json设置homepage 转载于:https:/ ...
- SpringBoot项目打包war部署到服务器去掉项目名所遇到的坑
个人资源与分享网站:http://xiaocaoshare.com/ 前言 将SpringBoot项目打成war主要是方便自己后期维护,也就是每次更新网站的时候不需要打成jar包,主要是文件太大,复制 ...
- uniapp项目打包与部署云服务器
uniapp项目的打包 第一步,在manifest里面配置好基础路径和端口 然后进行发布,填好自己的云服务器域名 打包成功后,项目在如图h5路径下,拿着h5文件的压缩包就可以去部署了 第二步,你要有一 ...
- Springboot+Vue前后端分离项目打包并部署到服务器
一.打包前端项目 打开前端项目,使用npm run build命令进行打包,打包成功后结果如下 这时,该项目目录下有一个build目录是打包好的文件 将该目录下的所有文件复制到后端Springboot ...
- 【Vue3】项目打包上线部署到服务器
1.npm run build打包项目,生成dist文件夹: 2.将dist文件夹复制,粘贴到服务器中:
- Vue 学习笔记(4)Vue-cli4 项目搭建 + 目录结构 + 项目打包、部署
VueCLI 脚手架 Vue CLI 介绍 Vue CLI 安装 Node.js 环境准备 安装 Vue 脚手架 第一个 Vue 脚手架项目 命令创建项目 图形化界面创建项目 vue-cli4 目录结 ...
- maven项目打包部署到服务器上
创建一个maven项目,在本地工程依赖jar包启动完成后,是不够的,还需将项目文件使用maven编译打包然后部署到服务器上 主流的springboot项目打包的时候需要在pom文件中指定主方法等配置 ...
- 20 React项目生成及部署
react项目的部署和普通的web项目部署过程不同.下面来看一下整个项目从生成到发布的整个流程. 一.项目生成 1 进入项目文件夹,在此处打开命令行工具,输入"npx create-reac ...
最新文章
- 【青少年编程】【一级】 奔跑的马
- 嵌入式linux程序没有任何提示退出,答网友问:嵌入式Linux执行程序提示Not found的解答...
- 单片机I/O口推挽输出与开漏输出的区别
- quartz配置_基于spring-boot 2.x +quartz 的CRUD任务管理系统
- 从思维导图学习操作系统(三)
- PHP5各个版本的新功能和新特性总结
- 咋一看DWoo 比 Smarty要好
- 常用函数的连续傅里叶变换对
- 5条能让web前端至少手拿20万年薪的特性!
- 信用评分卡(python)
- 利用wget命令获取FTP资源
- XPS Silverlight Reader
- 大规模集成电路数字计算机
- ue4是什么意思_ue4主要是做什么用的
- linux中如何修改只读文件
- 常见机器视觉软件OpenCV/Halcon/VisionPro/MIL的区别
- CAD中如何把一个DWG文件里的块插入到另一个DWG中
- 8g内存学习计算机专业够吗,电脑8g内存够用吗 内存多大才够
- WLAN适配器的驱动程序可能出现了问题(连不了wifi)解决办法
- java数学题_小学数学练习题用Java实现
热门文章
- 笨办法学python在线阅读_笨办法学python全集.pdf
- 高仿简书Android,高仿简书个人中心页面
- APK可视化修改工具 APK改之理 APK IDE
- 跟着吴坚鸿学单片机——第1天:吴坚鸿谈初学单片机的误区
- js实现上拉加载更多
- 自定义加载更多的Recycleview
- 大数据之路—— 事实表设计
- 反转藏头情诗——练习
- 整除判断游戏能显著提高小朋友的逻辑思维能力,问题要求如下:• 能同时被 3、5、7 整除• 能同时被 3、5 整除• 能同时被 3、7 整除• 能同时被 5、7 整除• 只能被 3、5、7
- 新思路计算机二级考试题库软件,新思路等考通二级Visual Basic