超简单的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 打包后刷新404的问题是因为在react应用中使用了前端路由,并且在部署后刷新页面时,服务器并未正确处理前端路由的路径。 通常,在开发过程中,我们可以使用React Router等前端路由库来管理应用程序的导航和页面切换。这些库会根据URL的路径来渲染相应的页面组件。而在开发环境中,由于使用了开发服务器,这些路由会自动处理并响应正确的页面。 但是,在生产环境中,我们需要将React应用打包成静态资源文件,并将其部署服务器上。当用户在浏览器中访问应用时,他们可能会直接在浏览器地址栏中输入URL路径来访问特定的页面。但是,服务器默认情况下只会返回根路径的资源文件,对于其他路径会返回404页面。 为了解决这个问题,我们需要配置服务器来处理这些前端路由的路径。具体来说,我们需要确保服务器在收到请求后,返回React应用的主HTML文件,无论请求的路径是什么。这样,React应用就能在正确的URL路径下响应相应的页面。 对于使用Node.js服务器,我们可以使用`express`或`koa`等框架来进行配置。对于Nginx服务器,我们可以使用`rewrite`指令来进行配置。 需要注意的是,具体的配置方法和步骤可能会根据使用的服务器项目的不同而有所差异。因此,在遇到这个问题时,我们需要参考相关服务器项目的文档或社区中的解决方案,并根据实际情况进行配置。 综上所述,处理React打包刷新404的问题需要配置服务器以正确处理前端路由的路径,确保服务器返回主HTML文件,并让React应用能够根据URL路径正确渲染相应的页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值