SpringBoot + Thymeleaf + vue + element-ui 全栈开发入门——项目部署

手把手教你完美部署前后端分离项目，一看就会！手把手叫你写SpringBoot项目启动脚本！

项目说明：

blog-web：基于SpringBoot + Thymeleaf构建的博客后台系统，展示博文并为blog-web-admin提供API访问接口；

blog-web-admin：基于vue + element-ui构建的博客后台管理系统，与后端分离的SPA应用；

准备工作：

• 通过maven的mvn package命令将blog-web进行打包(打包后的名字是：blog-web-1.1.0.jar)；
• 通过npm的npm run build:prod命令将blog-web-admin进行打包；
• 通过XShell连接服务器，并按如下路径创建对应文件夹：

/root/blog，/root/blog/logs，/root/blog/script，/root/blog/dist

• 通过WinScp 连接服务器，方便上传文件到服务器；

部署工作：

1.将 blog-web 打包好的 blog-web-1.1.0.jar 通过 WinScp 上传到服务器的/root/blog目录中；

2.将 blog-web-admin 打包后的 dist 文件夹里面的所有文件上传到服务器的/root/blog/dist目录中；

3.新建一个后缀为sh的文件(比如：StartBlogWebScript.sh)，将下边的部署脚本拷贝到新建的sh文件中并保存，然后上传到服务器的/root/blog/script目录中；

blog-web 项目部署脚本：

#!/bin/bash

#检测系统中是否已经存在运行中的程序
scheduleId=`ps -ef | grep blog-web-1.1.0.jar | grep -v "grep" | awk '{print $2}'`

if [ ! -n "$scheduleId" ];then
  echo "系统中没有正在运行的blog-web-1.1.0.jar"
else
  echo "系统中正在运行的blog-web-1.1.0.jar的PID为$scheduleId"
  echo "正在杀死PID：$scheduleId"
  kill -9 $scheduleId
fi

echo "正在启动新的blog-web-1.1.0.jar进程"
cd /root/blog
nohup java -jar blog-web-1.1.0.jar >/dev/null 2>&1 &
echo "...启动完成，拿去浪..."

说明：blog-web-1.1.0.jar为blog-web项目打包后的文件名字；

4.配置nginx；

直接按照如下配置文件配置即可；

Nginx 配置文件

user  root;
worker_processes  1;

events {
    worker_connections  1024;
    accept_mutex on;
    multi_accept on;
    use epoll;
}

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

    sendfile        on;
    tcp_nopush      on;
    tcp_nodelay     on;

    keepalive_timeout  65;
    charset utf-8; 
    server_names_hash_bucket_size 128; 
    client_header_buffer_size 4k; 
    large_client_header_buffers 4 32k; 
    client_max_body_size 300m;

    gzip  on;
    gzip_min_length 1k; 
    gzip_buffers  4 16k; 
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types  text/plain application/x-javascript text/css application/xml; 
    gzip_vary on;

    client_body_buffer_size 512k; 
  
    fastcgi_connect_timeout 600;
    fastcgi_send_timeout 600;
    fastcgi_read_timeout 600;
    fastcgi_intercept_errors on;    
  
    proxy_connect_timeout 5; 
    proxy_read_timeout  60; 
    proxy_send_timeout  5; 
    proxy_buffer_size  16k; 
    proxy_buffers   4 64k; 
    proxy_busy_buffers_size 128k; 
    proxy_temp_file_write_size 128k;
    
    open_file_cache max=65535 inactive=20s;
    open_file_cache_valid 30s;
    open_file_cache_min_uses 2;

    reset_timedout_connection on;
    server_tokens off;  

    upstream www.54lxb.cn {
	    server localhost:8888;
    }

    server {
    	listen 80;
    	server_name admin.54lxb.cn;
    	root /root/blog/dist;
    	
    	location / {
    	    #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            try_files $uri $uri/ @router; 
            index  index.html;
        }

        #对应上面的@router，由于路由的路径资源并真实的路径，所以无法找到具体的文件，因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
    	
    	#指定静态资源路径，避免vue项目的静态资源报404
    	location /static {
       	    add_header Access-Control-Allow-Origin '*';
       	    alias /root/blog/dist/static/;
    	}
    }

    server {
        listen 80;
        server_name www.54lxb.cn;

        location / {
            proxy_pass http://www.54lxb.cn;
	    proxy_redirect default;
        }
    }
}

项目启动

#启动Nginx
cd /usr/local/nginx
./sbin/nginx #启动
./sbin/nginx -s reload #重启
./nginx -t #测试nginx配置文件是否正确

#启动blog-web
cd /root/blog
./script/StartBlogWebScript.sh