前后端分离项目部署在CentOS服务器,前端React+AntD

2019-08-04  本文已影响0人  小煤球写代码了

前后端分离项目部署在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.执行配置文件,指定需要的模块
    [root@ABCnginx-1.12.2]# useradd nginx
​   [root@ABCnginx-1.12.2]# ./configure --prefix=/usr/share/nginx --user=nginx --group=nginx --with-http_ssl_module --with-http_mp4_module --with-http_flv_module
5.执行编译和安装
    [root@ABCnginx-1.12.2]#  make && make install
6.建立软链接
​   [root@ABCnginx-1.12.2]# 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文件中的打包方式
<groupId>cn.chaconne</groupId>
<artifactId>项目名</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
2.在pom.xml中添加依赖,并将scope状态改为provided
 <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-tomcat</artifactId>
      <scope>provided</scope>
 </dependency>
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上加项目名,按如下所示的进行配置。
 <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">
        <!-- SingleSignOn valve, share authentication between web applications
             Documentation at: /docs/config/valve.html -->
        <Context docBase="/usr/local/tomcat/tomcat9/webapps/springboot" path="/" reloadable="true" crossContext="true"/>
        <!--
        <Valve className="org.apache.catalina.authenticator.SingleSignOn" />
        -->
        <!-- Access log processes all example.
             Documentation at: /docs/config/valve.html
             Note: The pattern used is equivalent to using pattern="common" -->
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
               prefix="localhost_access_log" suffix=".txt"
               pattern="%h %l %u %t &quot;%r&quot; %s %b" />
 </Host>

4、启动tomcat

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

上一篇下一篇

猜你喜欢

热点阅读