Springboot + Vue 前后端分离项目部署

1、项目整体部署情况

对于前后端分离项目而言，我们一般的做法是使用Nginx代理前端项目请求，前后端之间通过Ajax访问后端提供的Restful接口进行交互。

2、安装Nginx

2.1、安装依赖库

gcc：编译依赖环境

yum -y install gcc gcc-c++

pcre：支持重写功能

yum -y install pcre pcre-devel

zlib：提供压缩和解压缩的方式

yum -y install zlib zlib-devel

openssl：用于通信加密

yum -y install openssl openssl-devel

2.2、Nginx源码编译

将下载下来的源码解压缩后，先检验安装环境

# 进入安装目录
cd nginx-1.20.1
# 检查平台安装环境，/usr/local/nginx 为编译后要指定安装的目录
./configure --prefix=/usr/local/nginx

检验无误后，即可进行编译安装（如果此步报错，一般为依赖库安装不完全，按照错误提示重新安装即可）

# 编译
make 
# 安装
make install

启动服务

# /usr/local/nginx为上一步指定的安装目录
/usr/local/nginx/sbin/nginx

重新加载服务

/usr/local/nginx/sbin/nginx -s reload

停止服务

/usr/local/nginx/sbin/nginx -s stop

查看 Nginx 服务进程

ps -ef | grep nginx

3、前端项目打包

前端 Vue 通过使用 axios (封装好的Ajax)访问Restful接口获取数据

<template>
  <div class="about">
    <h1>{
         
  {College}}</h1>
    <button @click="btn_click">请求数据</button>
  </div>
</template>

<script>
  export default {
    data() {
      //这里存放数据
      return {
        College: [],
        // message:"",
      }
    },
    methods:{
      btn_click:function() {
        const _this = this
        // 访问Restful接口
        axios.get(http://192.168.52.221:8081/smart_medicine/patient/queryPatientList).then(function (resp){
          console.log(resp)
          // this.message = resp.data.name
          _this.College = resp.data[0].name;
        }).catch(function (error) { // 请求失败处理
          console.log(error);
        })
      }
    },created() {
      //创建时调用
    }
  }
</script>

在前端项目文件夹下，使用命令行打包 Vue 工程

npm run build

执行结束后会在文件夹下产生一个 dist 文件夹，里面就是打包好的单页应用。将该 dist 文件夹上传到服务器指定目录下（下文以 /usr/local/project 目录为例）

4、后端项目打包

Spring boot 项目 application.yaml部分配置：

server:
  port: 8081
  servlet:
  	#项目路径，区分不同项目
    context-path: /smart_medicine

在 idea 工具中，侧边工具栏->Maven->项目名->Lifecycle->package，一键打包。

在项目目录下的 target 文件夹下找到打包完成的 jar 包，上传到服务器。

5、修改Nginx配置文件

修改/usr/local/nginx/conf下（在Nginx安装路径下）的配置文件 nginx.conf

server {
		# 监听端口
        listen       80;
        server_name  localhost;

		# 处理/demo路径的请求
        location /demo {
        	# 打包的dist所在路径
            root  /usr/local/project/dist;
            index  index.html index.htm;
            # vue官方推荐方法，用于解决页面刷新404
            try_files $uri $uri/ /index.html; 
        }
}

修改完配置文件后，保存，重启Nginx后，即可通过服务器Ip地址+/demo路径访问前端页面。

/usr/local/nginx/sbin/nginx -s reload