前后端（react+springboot）服务器部署

1_前端react+umi服务器部署

1.1_前端生成dist目标文件

在控制台输入：umi build生成dist文件

1.2_准备连接服务器的工具

准备XShell（用于控制服务器控制台）以及Xftp（用于和服务器传输文件）

阿里云盘下载链接

1.3_安装nginx

见此大神博客

1.4_部署项目

1.4.1_传输dist文件

将前端目标文件dist重命名为自己喜欢的名字如webClient（比如现在需要部署两个项目，在本例中前端的两个目标文件分别命名为webClient1，webClient2），放到服务器中安装好的nginx文件目录下。

目录结构：
+usr
​+++nginx //安装的nginx
​+++conf //配置文件目录
​+++sbin //启动nginx时需要前往的文件
​+++webClient1 //前端1的目标文件
+++webClient2 //前端2的目标文件

1.4.2_配置配置文件

配置配置文件nginx.conf

原文件（别看这个）

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
	


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

删减后并加了注释的原文件

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #配置一个server接口，此例的访问路径为localhost:80/，因为接口的默认端口是80,所以也可以这样访问localhost
    #上一行中的localhost代表此服务器的IP地址
    server {
        listen       80;#监听的端口号
        server_name  localhost;
        # localhost后面的 '/' 是访问的接口路径
        location / {
            root   html;#html是nginx下的前端目标文件的相对路径
            index  index.html index.htm;#不用动
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在本例中应该如此配置

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
	
	#配置webClient1的接口，访问路径是localhost:8080/webClient
    server {
        listen       8080;
        server_name  localhost;
        location /webClient {
            root   webClient1;
            index  index.html index.htm;
        }
    }
	
	#配置webClient2的接口，访问路径是localhost:8081/webClient
	server {
        listen       8081;
        server_name  localhost;
        location /webClient {
            root   webClient2;
            index  index.html index.htm;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

1.4.3_启动nginx

1. 启动nginx

启动代码格式：nginx安装目录地址 -c nginx配置文件地址

例如：

[root@localhost ~]# /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
1

2. 重启nginx

[root@localhost sbin]# ./nginx -s reload
1

nginx命令大全

2_后端springboot项目部署服务器

这里只讲解其中一种比较简单的方式

详情见此大神博客

2.1_后端生成目标文件

1. 在pom文件中加入代码

<packaging>jarpackaging>
1

2. 生成jar目标文件（生成文件的位置在target目录下）

点击package运行即可

2.2_准备连接服务器的工具（同1.2）

2.3_在服务器上安装jdk环境

1. 下载jdk

jdk下载官网：https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html，博主使用的版本是jdk-8u261-linux-x64.tar.gz。

2. 上传到服务器中并解压

   （1）在opt目录下创建jdk文件夹

   （2）解压 jdk-8u261-linux-x64.tar.gz

   tar -zxvf jdk-8u261-linux-x64.tar.gz
   1

   解压完成之后会出现jdk1.8文件夹。

3. 配置环境变量

   （1）打开profile配置文件

   vi /etc/profile
   1

   （2）添加以下代码（注意：JAVA_HOME就是jdk1.8的文件路径。其他不用变）

   export JAVA_HOME=/opt/jdk/jdk1.8
   export JRE_HOME=${JAVA_HOME}/jre
   export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib
   export PATH=${JAVA_HOME}/bin:$PATH
   1
   2
   3
   4

   （3）使配置文件生效

   source /etc/profile
   1

   （4）查看jdk安装成功与否

   java -version
   1

2.4_部署项目

1. 将目标jar文件放到opt目录下的新建文件夹下，比如新建的文件名为webServer

2. 改写start.sh运行脚本文件

#!/bin/bash

#变量，将APP_NAME改为自己的jar包名，APP_LOCAL改为自己项目的路径
APP_NAME=serve-0.0.1-SNAPSHOT.jar
APP_LOCAL=/opt/mySpringboot/
APP_ALL=$APP_LOCAL$APP_NAME


#线程已经存在则 先kill 
tpid=`ps -ef|grep $APP_ALL|grep -v grep|grep -v kill|awk '{print $2}'`
if [ ${tpid} ]; then
    echo 'Stopping' $APP_ALL '...'
    kill -15 $tpid
fi
sleep 5
tpid=`ps -ef|grep $APP_ALL|grep -v grep|grep -v kill|awk '{print $2}'`
if [ ${tpid} ]; then
    echo 'Kill' $APP_ALL 'Process!'
    kill -9 $tpid
else
    echo $APP_ALL 'Stoped Success!'
fi

#启动
rm -f tpid

nohup java -Dfile.encoding=UTF-8 -jar $APP_ALL > $APP_LOCAL"out.log" 2>&1 &
echo $! > $APP_ALL".tpid"
echo $APP_ALL Start Success!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

3. 将start.sh脚本文件放入webServer项目目录下并在当前目录下运行

   bash start.sh
   1

4. 查看运行日志

   运行成功后会在当前目录下生成一个out.log日志，可以进行查看

5. 重启

   （1）杀死之前的进程

   #查看所占用的进程号
   ps -ef | grep jar包的名字.jar
   #杀死进程
   kill -9 进程id
   1
   2
   3
   4

   （2）启动

   bash start.sh