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

本是古典何须时尚 2022-08-30 05:25 315阅读 0赞

# 后端SpringBoot项目 #

## 1、数据库 ##

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

## 2、打包 ##

使用maven命令打包`mvn clean package`  
![在这里插入图片描述][20210719153404986.png]

使用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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5aDE3ODA4NzcwODk5_size_16_color_FFFFFF_t_70]

### 第二种方法： ###

新建一个文件`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

![在这里插入图片描述][2021071916050325.png]  
后台就部署完成了  
如果要停止运行，直接使用命令`./catalina.sh stop`  
重启项目：`./catalina.sh restart`

记得关闭防火墙

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

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

域名解析  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5aDE3ODA4NzcwODk5_size_16_color_FFFFFF_t_70 1]

进入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/`，访问成功  
![在这里插入图片描述][20210719162221643.png]

# 前端Vue项目 #

## 1、修改后台访问路径 ##

打开vue项目，将访问后台的路径改为刚才配置的域名  
![在这里插入图片描述][20210719162524952.png]  
然后运行项目，看是否正常访问前端页面

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

## 2、打包vue项目 ##

npm run build:prod

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

打包后的文件在`dis`目录下  
![在这里插入图片描述][20210719163311786.png]

## 3、上传到服务器 ##

在放后端代码的目录下再新建一个目录存放前端代码  
![在这里插入图片描述][20210719163529472.png]

## 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/][http_yuyun.heyunhui.top]就出现结果了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5aDE3ODA4NzcwODk5_size_16_color_FFFFFF_t_70 2]

[20210719153404986.png]: /images/20220829/7cca394f28ba40749714c12af42396ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5aDE3ODA4NzcwODk5_size_16_color_FFFFFF_t_70]: /images/20220829/5d5fbeba5250445588d1cf8358d7fb4c.png
[2021071916050325.png]: /images/20220829/69b7725921834a819527c6fb994750c8.png
[Linux_nginx]: https://blog.csdn.net/hyh17808770899/article/details/113398961
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5aDE3ODA4NzcwODk5_size_16_color_FFFFFF_t_70 1]: /images/20220829/55e6008e0ef245f5afb40a8bd339bf07.png
[20210719162221643.png]: /images/20220829/8a068c8d338b40afb27c262f34e6ffce.png
[20210719162524952.png]: /images/20220829/38cf2d701c7e49e5bdfed9c59aec348e.png
[20210719163311786.png]: /images/20220829/29879975c4bd43a8a983d3c637c6aee4.png
[20210719163529472.png]: /images/20220829/9d2dfedb0e764dffa904227ddda9901c.png
[http_yuyun.heyunhui.top]: http://yuyun.heyunhui.top/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5aDE3ODA4NzcwODk5_size_16_color_FFFFFF_t_70 2]: /images/20220829/8200e6c9ca5d4081b8837409a8da7602.png