在现代web开发中，前后端分离的架构越来越受到青睐。Spring Boot作为后端框架，充分发挥了其快速开发和简洁易用的优势，而Vue.js则以其灵活的组件化开发方式，成为前端开发的热门选择。本文将深入探讨如何将Spring Boot与Vue进行结合，完成一个前后端分离项目的部署上线及Nginx配置。
1. 项目结构
在一个典型的前后端分离项目中，项目的结构大致如下：
my-project
├── backend // 后端项目
│ ├── src
│ ├── pom.xml
├── frontend // 前端项目
│ ├── src
│ ├── package.json
└── nginx.conf // Nginx 配置文件
2. 后端开发（Spring Boot）
我们以一个简单的Spring Boot RESTful API为例，代码如下：
@RestController
@RequestMapping("/api")
public class UserController {
// 示例数据
private List<User> users = Arrays.asList(
new User(1, "Alice", "alice@example.com"),
new User(2, "Bob", "bob@example.com")
);
@GetMapping("/users")
public List<User> getUsers() {
return users;
}
}
在上面的示例中，我们创建了一个简单的用户控制器，提供了一个GET接口来返回用户列表。此时，后端服务在localhost:8080端口运行。
3. 前端开发（Vue.js）
前端使用Vue.js框架，通过Axios库调用后端API的代码示例如下：
<template>
<div>
<h1>用户列表</h1>
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
users: []
}
},
mounted() {
axios.get('http://localhost:8080/api/users')
.then(response => {
this.users = response.data;
})
.catch(error => {
console.error('接口调用失败', error);
});
}
}
</script>
4. 项目打包
在开发完成后，需要分别对前后端项目进行打包：
-
后端项目打包：使用Maven命令
mvn clean package生成一个可执行的JAR文件，通常在target目录下。 -
前端项目打包：使用npm命令
npm run build，生成的静态文件会被放到dist目录下。
5. 部署与Nginx配置
最后，我们需要使用Nginx来进行项目的部署。首先，将后端打包好的JAR文件和前端打包好的静态文件上传到服务器。
以下是一个基本的Nginx配置示例，放在nginx.conf中：
server {
listen 80;
server_name your_domain.com; # 替换为你的域名
location / {
root /path/to/your/frontend/dist; # 前端构建输出目录
index index.html;
try_files $uri $uri/ /index.html; # 支持前端路由
}
location /api/ {
proxy_pass http://localhost:8080; # 后端服务地址
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
在这个配置中，Nginx会监听80端口，当访问根路径（/）时，返回前端文件，而当请求以/api/开头时，会将请求代理到后端Spring Boot服务上。
6. 启动Nginx
将配置文件放置到Nginx的配置目录下，并进行重启：
sudo nginx -s reload
至此，一个Spring Boot + Vue的前后端分离项目便成功部署上线。通过以上步骤，开发者可以快速创建、打包并上线他们的项目，而Nginx作为反向代理服务器，不仅能够提高系统的性能，还能提供负载均衡和安全性。
