在现代应用开发中，前后端的分离已经成为一种常见的架构模式。借助Nginx作为反向代理服务器，可以高效地进行前端静态文件的托管和后端接口的调用。本文将详细介绍如何在一台服务器上部署一个简单的前后端项目，使用Nginx作为代理服务器，Spring Boot作为后端服务。
一、环境准备
1. 安装Java
首先，需要在服务器上安装Java环境，因为Spring Boot是基于Java的。可以用下面的命令安装OpenJDK：
sudo apt update
sudo apt install openjdk-11-jdk
验证安装是否成功：
java -version
2. 安装Maven
Maven是Java项目的管理工具，可以方便地进行打包和依赖管理：
sudo apt install maven
3. 安装Nginx
Nginx是一个高性能的HTTP和反向代理服务器，可以通过以下命令进行安装：
sudo apt update
sudo apt install nginx
启动Nginx服务：
sudo systemctl start nginx
sudo systemctl enable nginx
二、后端项目（Spring Boot）部署
1. 创建Spring Boot项目
使用Spring Initializr创建一个简单的Spring Boot项目，包含Web依赖。可以在Spring Initializr上轻松生成。
生成后，进入项目目录使用以下命令运行项目：
mvn spring-boot:run
默认情况下，Spring Boot会在8080端口运行。
2. 打包项目
在项目根目录下执行：
mvn clean package
最终会在target目录下生成一个.jar文件。我们可以将这个文件部署到服务器上。
3. 启动Spring Boot应用
使用下面的命令运行Spring Boot应用（假设你的JAR包名为demo.jar）：
java -jar target/demo.jar
三、前端项目部署
1. 构建前端项目
无论是Vue、React还是普通的HTML/CSS/JavaScript项目，通常在构建完成后会生成一系列静态文件。以Vue项目为例，在项目目录下执行：
npm run build
构建完成后，静态文件会生成在dist目录下。
2. 将前端文件复制到Nginx部署目录
将上一步生成的dist目录下的文件复制到Nginx的默认根目录（通常是/var/www/html）：
sudo cp -r dist/* /var/www/html/
四、配置Nginx
创建一个新的配置文件，设置Nginx将请求分发给后端服务。在/etc/nginx/sites-available/目录下创建myapp文件：
server {
listen 80;
server_name your_domain.com; # 你的域名或IP
location / {
root /var/www/html; # 前端文件目录
index index.html index.htm;
try_files $uri $uri/ /index.html; # Vue Router支持
}
location /api/ {
proxy_pass http://localhost:8080; # 后端Spring Boot服务地址
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
保存文件后，使用以下命令创建一个符号链接到sites-enabled目录：
sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/
五、重启Nginx
在配置完成后，重启Nginx使配置生效：
sudo systemctl restart nginx
六、测试
- 在浏览器中输入你的域名或IP，应该能看到前端页面。
- 测试后端接口，使用
curl或通过前端发起请求，确保能够成功访问后端API。
总结
通过以上步骤，我们已经成功地部署了一个前后端分离的项目。Nginx作为反向代理，处理静态文档和API请求，而Spring Boot则提供实际的业务逻辑处理。这种架构不仅使得项目更加模块化，也便于后续的维护和扩展。希望这篇文章能对你有所帮助！
