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错误,如果你仅仅是为了测试,没有后台和数据库的话,也无所谓了。

猜你喜欢

转载自blog.csdn.net/qq_42458992/article/details/106689370