简单将SpringBoot+Vue前后端分离项目打包部署到服务器

后端SpringBoot项目

1、数据库

将数据库备份一份到服务器或虚拟机上，然后修改项目的数据库连接路径，使其可以正常访问

2、打包

使用maven命令打包mvn clean package

使用Xftp将产生的jar包上传到服务器相关目录，我的放到了/usr/server/yuyun里面

3、运行

第一种方法

使用Xshell进入服务器目录，进行如下操作

cd /usr/server/yuyun
// 为所有文件添加访问权限
chmod 777 * .
//运行yuyun-0.0.1-SNAPSHOT.jar并将控制台输出内容打印进catalina.log文件
nohup java -jar yuyun-0.0.1-SNAPSHOT.jar > ./catalina.log &
//实时输出文件内容
tail -f catalina.log

第二种方法：

新建一个文件catalina.sh，文件后缀为.sh，里面的内容如下：

#!/bin/bash
#这里可替换为你自己的执行程序
APP_NAME=yuyun-0.0.1-SNAPSHOT.jar
#使用说明，用来提示输入参数
usage() {
     
    echo "Usage: sh 执行脚本.sh [start|stop|restart|status]"
    exit 1
}
#检查程序是否在运行
is_exist(){
     
  pid=`ps -ef|grep $APP_NAME|grep -v grep|awk '{print $2}' `
  #如果不存在返回1，存在返回0     
  if [ -z "${pid}" ]; then
   return 1
  else
    return 0
  fi
}
#启动方法
start(){
     
  is_exist
  if [ $? -eq "0" ]; then
    echo "${APP_NAME} is already running. pid=${pid} ."
  else
       BUILD_ID=dontKillMe
    nohup java -jar $APP_NAME > ./catalina.log &
  fi
}
#停止方法
stop(){
     
  is_exist
  if [ $? -eq "0" ]; then
    kill -9 $pid
  else
    echo "${APP_NAME} is not running"
  fi  
}
#输出运行状态
status(){
     
  is_exist
  if [ $? -eq "0" ]; then
    echo "${APP_NAME} is running. Pid is ${pid}"
  else
    echo "${APP_NAME} is NOT running."
  fi
}
#重启
restart(){
     
  stop
  start
}
#根据输入参数，选择执行对应方法，不输入则执行使用说明
case "$1" in
  "start")
    start
    ;;
  "stop")
    stop
    ;;
  "status")
    status
    ;;
  "restart")
    restart
    ;;
  *)
    usage
    ;;
esac

然后将其上传到服务器，跟jar包放在一个目录下
然后执行下面的命令：

cd /usr/server/yuyun
// 为所有文件添加访问权限
chmod 777 * .
//直接运行catalina.sh文件
./catalina.sh start
//实时输出文件内容
tail -f catalina.log

后台就部署完成了
如果要停止运行，直接使用命令./catalina.sh stop
重启项目：./catalina.sh restart

记得关闭防火墙

4、项目后台使用域名访问

这里用到了nginx：Linux云服务器安装nginx方法

域名解析

进入nginx目录，编辑nginx配置

cd /etc/nginx
vi nginx.conf

将下面的代码放在里面

server {
     
    listen       80;
    server_name  serveryuyun.heyunhui.top;

    location / {
     
            proxy_pass http://127.0.0.1:8082;
    }
}

保存后使用命令重启nginx使配置生效

service nginx restart

使用浏览器访问http://serveryuyun.heyunhui.top/，访问成功

前端Vue项目

1、修改后台访问路径

打开vue项目，将访问后台的路径改为刚才配置的域名

然后运行项目，看是否正常访问前端页面

可以正常访问后打包vue项目

2、打包vue项目

npm run build:prod

每个项目打包命令不一样，如果没用，自行百度

打包后的文件在dis目录下

3、上传到服务器

在放后端代码的目录下再新建一个目录存放前端代码

4、配置nginx

先进行域名解析

server {
     
        listen       80;
        listen       [::]:80;
        //前端访问域名
        server_name  yuyun.heyunhui.top;
        //前端代码存放位置
        root         /usr/server/yuyun/client;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        	//前端代码存放位置
            root   /usr/server/ruoyi_vue/client;
            //前端首页文件
            index  index.html index.htm;
            try_files $uri $uri/ /index.html?$args;
        }

        location /prod-api/{
                proxy_set_header Host $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                // 跨域到后台访问端口
                proxy_pass http://localhost:8082/;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

然后重启nginx，再用浏览器访问http://yuyun.heyunhui.top/就出现结果了