Linux系统部署React脚手架前端项目

       首先，说明一点，这是亲测可用、简单易行的。其它方式我试过，都是在关闭xshell以后，项目会停止运行，其实这根本不叫部署项目，没有实现自动化运维。我们使用nginx服务器托管react项目，配置完成后，启动nginx，就算关闭xshell链接也不会影响项目运行。
       我整个项目是前后端分离的，后端已经部署成功，现在是在Ubuntu18.04上使用nginx服务器部署基于react脚手架前端项目的教程，如果是部署vue，相信也能触类旁通。
       首先在你的虚拟机，或者是阿里云服务器上搭建出react脚手架的环境，如安装node, 安装react脚手架等，这些内容很简单，百度都有相应的步骤，况且你能到部署这一步，相信搭建react环境，应该是轻而易举的。
       不过要有要求的是，你后端项目的所有接口一定都要有一个总的请求路径，如 http:/baidu.com/api/xxx   其中所有的请求都有 /api 这个总的请求路径，下面有解释为什么要这样。

我这里主要是讲如何使用nginx部署react项目，不再赘述搭建react环境的问题。
注意，没学过Nginx也可以部署的，只要按照步骤来即可。

第一步：
            使用命令【npm run build】将react项目打包构建，会出现一个名为build的文件夹，将此文件夹打包成tar.gz或者tar包，再使用xftp等工具将压缩包移动到Ubuntu系统目录中，之后再使用 【tar -zxvf 压缩文件名】命令解压。假设此时build文件夹的目录是 /soft/app/build

第二步：
            安装nginx，我使用编译安装，这里也讲述如何编译安装，使用其它教程的安装方式可能会造成下面步骤行不通。

链接：https://pan.baidu.com/s/1TVpSKOaxtjZULVxXavcFuQ
提取码：h7j8
直接百度云盘下载即可。
            
①官方下载：http://nginx.org/
②下载2017年的 nginx-1.12.2 版本
③顺序执行下面的命令，安装nginx的依赖

apt-get update
apt-get install gcc libpcre3 libpcrecpp0v5 libpcre3-dev libssl-dev
apt-get install zlib1g-dev  

④解压nginx的压缩包： tar -xvf nginx-1.12.2.tar.gz
⑤ 进入到解压的目录中，执行【./configure】
⑥编译安装： make && make install
安装完成以后，/usr/local/ 目录下会多出nginx文件夹，里面的sbin目录中有启动脚本。
⑦测试nginx是否安装成功：
            在/usr/local/nginx/sbin/目录下执行【./nginx】，
            然后执行 ps -ef | grep nginx 查看是否有nginx的进程。

第三步：
            Nginx接管React启动配置。
            找到 /usr/local/nginx/conf/nginx.conf文件，打开此文件，添加如下代码：

# 在文件的第一行，加上  user root; 这句话，不然可能出现403报错，没有权限访问build文件夹。

 server {
     # 监听一个端口 映射到你的目录
     listen 3000;
     # 你react构建的build文件夹的目录位置
     root /soft/app/build;

	# 这里配置是做代理服务器，
	# 前端项目的ajax或者axion请求，只能访问本ip和本端口号，为了区分后台api请求，以后做项目都要记得给所有的api接口加一个总虚拟路径，如/user  /api等
     location /user {
             proxy_pass http://localhost:4000/user;  # 转发请求到本机的后台项目
      }
  }

       这个server标签添加在已有的server标签上面即可。
       注意上面代理服务器那里，即所有的 http://ip地址:3000/user/xxx/xxx 请求都会被nginx代理转向 http://ip地址:4000/user/xxx/xxx 这个请求。4000端口是我后台项目的端口。
       如果你的前后端项目，不在同一服务器上，只要保证后端项目的端口是畅通的， 改成    http://后端项目ip地址:端口号/user   也是可以的哦

最后：启动Nginx即可。
       进入/usr/local/nginx/sbin ，执行 ./nginx 即可启动nginx，这时访问 http://ip地址:3000 ，即可进入首页。

以上就完成了在Ubuntu18.04上使用nginx部署react脚手架项目的过程。

需要注意的是，一定要先启动后台项目以及数据库，不然前台请求会报404错误，如果你仅仅是为了测试，没有后台和数据库的话，也无所谓了。