超简单的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很多时候这种都是给测试用的比较方便，但是要是个人项目的话部署，也可以采用这种方法。