前后端分离项目部署在CentOS服务器，前端React+AntDesign，后端Springboot+Hibernate

前后端分离项目部署在CentOS服务器，前端React+AntDesign，后端Springboot+Hibernate，编辑器IDEA。

一、前端项目的部署

1、准备工作

  本地系统Window10，阿里云服务器系统CentOS7.3。

2、安装Nginx

1.安装nginx一些依赖包

​   [root@ABC~]# yum -y install gcc gcc-c++ openssl-devel pcre-devel httpd-tools

​2.下载nginx-1.12.2

​   [root@ABC~]# wget http://nginx.org/download/nginx-1.12.2.tar.gz

3.解压二进制包(小编把nginx安装在了/usr/share文件夹，读者可以根据自己喜欢安装在喜欢的地方)

​   [root@ABC~]# tar -zxf nginx-1.12.2.tar.gz -C /usr/share

4.执行配置文件，指定需要的模块

    [[email protected]]# useradd nginx
​   [[email protected]]# ./configure --prefix=/usr/share/nginx --user=nginx --group=nginx --with-http_ssl_module --with-http_mp4_module --with-http_flv_module

5.执行编译和安装

    [[email protected]]#  make && make install

6.建立软链接

​   [[email protected]]# ln -s /usr/share/nginx/sbin/nginx /usr/sbin

7.查看nginx端口占用情况

​   [root@ABC~]# netstat -anptu|grep nginx

8.查看nginx的版本

    [root@ABC~]# nginx -V

3、测试Nginx

1.对nginx.conf进行配置（最简单的自定义配置）

server {
   listen      80;//端口号,可以自己设置
   server_name ip地址;//对应的网站域名
   root /usr/share/nginx/root/app;//注意这是里放你上面 build文件夹里的内容
   location / {
      try_files $uri @fallback;
   }
   location @fallback {
     rewrite .* /index.html break;
   }
   error_page   500 502 503 504  /50x.html;
   location = /50x.html {
     root   html;
   }
}

2.启动nginx

[root@ABC~]# start nginx

​  如果部署成功，在浏览器界面输入ip地址:80，出现 Welcome to nginx！说明部署成功了。

4、IDEA编译前端项目

​  在IDEA对项目进行编译，输入npm run build指令，会得到一个dist的文件夹。

5、编译的前端项目部署在Nginx相应的位置

​  将编译的dist文件夹通过文件传输软件（Xftp6）拷贝到/usr/share/nginx/root文件夹下面（由于小编喜欢将项目文件命名为app，读者自行选择是否把dist文件夹名改名为app）

6、配置Nginx的nginx.conf文件

​  listen ：设置的端口号
​  server_name ：访问的名字
​  root ：你项目所放的地址
​  index index.html ：你的入口html文件

二、后端项目的部署

1、Springboot+Hibernate项目打包

1.修改pom.xml文件中的打包方式

cn.chaconne
项目名
war
0.0.1-SNAPSHOT

2.在pom.xml中添加依赖，并将scope状态改为provided

 
      org.springframework.boot
      spring-boot-starter-tomcat
      provided
 

3.修改项目的启动类

package cn.chaconne.xx;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
import org.springframework.web.WebApplicationInitializer;
@SpringBootApplication
public class XXApplication extends SpringBootServletInitializer implements WebApplicationInitializer {
    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(XXApplication.class);
    }
    public static void main(String[] args) {
        SpringApplication.run(XXApplication.class, args);
    }
}

4.通过Maven对项目进行编译打包。

​  在IDEA中，执行Lifecycle的Package指令，会在target文件夹出现xx-0.0.1-SNAPSHOT的文件夹。

2、在CentOS7部署tomcat，测试部署成功

1.去官网下载tomcat9的tar.gz安装包

2.通过文件传输软件Xftp移到CentOS7中并解压

[root@ABC~]# tar -xzvf tomcat9.tar.gz

3.对/etc 目录下的 profile 文件进行配置

[root@ABC etc]# vim profile

在文件的末尾添加如下代码

 export CATALINA_HOME=/usr/local/tomcat/tomcat9
 export PATH=${CATALINA_HOME}/bin

保持并退出：wq!

4.重启profile文件：

​ source /etc/profile

5.进入到/usr/local/tomcat/tomcat9/bin文件夹下,打开catalina.sh文件

​  vim catalina.sh
​  在# OS specific support. 前面加入如下代码：

JAVA_HOME=/usr/local/jdk/jdk1.8.0_91
JRE_HOME=$JAVA_HOME/jre

​  :wq! 保存并退出

6.启动tomcat服务：

[root@ABC bin]# ./startup.sh

​   在浏览器输入服务器IP地址，如果出现小猫咪，说明部署成功。

3、将编译后的war包部署到tomcat相应的websapp文件夹下

1.通过文件传输软件将编译的文件夹传输到tomcat的websapp文件夹下。

2.修改相应的server.xml配置文件,为了不用在URL上加项目名，按如下所示的进行配置。

4、启动tomcat

​  进入到tomcat的bin文件夹下，执行./startup.sh启动tomcat！
​  前后端就部署好了，可以进行访问了！！！