宝塔面板是一款功能强大的服务器管理面板，它支持一键部署各种应用程序，包括Spring Boot和Vue.js应用。在这篇文章中，我们将详细介绍如何使用宝塔面板部署一个Spring Boot后端和Vue前端应用，并给出一些代码示例。
一、准备工作
在开始之前，确保你已经购买了一个VPS服务器，并且在该服务器上安装了宝塔面板。安装完畅读取面板地址并登录。
二、部署Spring Boot应用
- 打包Spring Boot应用
首先，确保你的Spring Boot项目已经可以正常运行。使用Maven或Gradle进行打包。在项目根目录下执行：
bash
mvn clean package
这个命令会在target目录下生成一个.jar文件，例如demo-0.0.1-SNAPSHOT.jar。
- 上传Spring Boot应用
登录宝塔面板，在左侧菜单中找到“文件”管理，进入你想部署的目录（例如/www/wwwroot/springboot），上传你打包好的.jar文件。
- 配置Java环境
在宝塔面板中，找到“软件管理”->“安装”，确保Java环境（如OpenJDK）已经安装。如果没有，请选择合适版本进行安装。
- 运行Spring Boot应用
在宝塔面板中，找到“计划任务”，添加新的计划任务，选择“Shell脚本”，输入以下命令来启动你的Spring Boot应用：
bash
java -jar /www/wwwroot/springboot/demo-0.0.1-SNAPSHOT.jar
你可以设置计划任务为每次重启后自动运行，确保你的应用始终在线。
三、部署Vue.js应用
- 打包Vue.js应用
在Vue项目根目录下，执行以下命令进行打包：
bash
npm run build
这会在dist目录下生成静态文件，准备部署。
- 上传Vue.js应用
同样登录宝塔面板，进入你想部署的目录（如/www/wwwroot/vue），上传dist目录下的所有文件。
- 配置Nginx
在宝塔面板左侧菜单中，找到“网站”管理，添加一个新的网站，域名填写你的域名或IP地址，确认后在网站列表中找到你刚添加的网站，点击“设置”。
在“伪静态”中选择“默认”或者自定义配置，确保可以正确转发请求。同时，在“配置文件”中添加以下内容：
```nginx location / { root /www/wwwroot/vue; # Vue.js应用路径 index index.html; try_files $uri $uri/ /index.html; # 确保Vue路由能正确匹配 }
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; proxy_set_header X-Forwarded-Proto $scheme; } ```
以上配置会确保所有以/api开头的请求都转发到你的Spring Boot服务。
四、访问应用
完成以上步骤后，你就可以通过浏览器访问你的Vue.js应用了。Vue.js的前端将调用Spring Boot的后端API进行数据交互。
总结
通过使用宝塔面板，我们可以快速方便地部署Spring Boot和Vue.js应用。宝塔面板为服务器管理提供了许多便利，同时也支持自定义配置，以满足不同项目的需求。希望这篇文章对你有所帮助，祝你在应用部署的过程中一切顺利！
