前端_react项目从windows部署到centos

前言：

从工程角度来讲，本地开发完就要把项目部署到生产环境，此过程的快慢也直接影响着整体的效率。所以也有很多人做持续集成的工作，例如：CI/CD/一键部署。

但对于个人开发者而言，如果能有工具支撑是最好的，如果没有的话，那只能自己动手丰衣足食了。

第一、打包react项目。

1. 在本机项目文件夹执行，npm run build。
2. 在本机项目文件夹会生成build文件夹。

第二、搭建centos环境。

1. web服务器的选择：有的选择tomcat，有的选择nginx
2. 决策：tomcat从感觉上来讲主要服务java项目；nginx更多的服务前端项目，其在高并发、缓存配置等要优于tomcat，它也更多的做反向代理之用。
3. nginx安装：（centos环境）

• $ sudo yum -y install nginx # 安装 nginx
• $ sudo yum remove nginx # 卸载 nginx

以上是通用命令，自己搭建的虚拟机或者各云厂商的虚拟主机，存在细微的差别。

以Amazon为例：

• sudo yum -y install nginx 会提升“No package nginx available”
• 需单独配置yum源
• 在/etc/yum.repos.d/ 目录下新建一个nginx.repo文件（切换到root用户）

[nginx]

name=nginx repo

baseurl=http://nginx.org/packages/centos/7/x86_64/

gpgcheck=0

enabled=1

• 再yum 安装即可。

第三、nginx常用命令。

1. 查看nginx安装路径：whereis nginx
2. yum安装后默认的配置路径：/etc/nginx/
3. nginx配置测试：nginx -t -c /etc/nginx/nginx.conf
4. 启动：systemctl start nginx
5. 验证：netstat -ltunp ，验证nginx进程是否监听了80端口。
6. 优雅关闭：nginx -s quit //待nginx进程处理任务完毕进行停止。
7. 强制关闭：nginx -s stop //先查出nginx进程id再使用kill命令强制杀掉进程。
8. 重新加载：nginx -s reload //配置文件nginx.conf修改后，使配置生效要重启 nginx

第四、react项目配置nginx启动。

1. 在服务端建立文件夹，例如：/home/user/react
2. 把步骤1打包的build文件放入其下
3. nginx增加项目配置：

• 在/etc/nginx目录下建立vhost: mkdir vhost 【统一管理自己的配置文件】
• 然后进入vhost新建配置文件，例如：react.conf

server {
   server_name  localhost;
  //build文件夹下的内容
   root /home/user/react;
   location / {
      try_files $uri @fallback;
   }
   location @fallback {
     rewrite .* /index.html break;
   }
   error_page   500 502 503 504  /50x.html;
   location = /50x.html {
     root   html;
   }
}

• 在nginx.conf文件配置以上自定义的配置

• 至此nginx配置基本完毕，按照nginx管理方式启动即可。

备注：如果通过ip访问，则把vhost下自定义的server_name改成ip即可。

当然，前后端分离的情况下，动态数据要访问服务器，可能要涉及到前端路由的配置，等遇到的情况，再记录下来与大家共勉。