SpringBoot使用默认的tomcat服务器部署(多个不同版本前端)Vue项目

本文介绍了如何将构建好的Vue项目dist文件夹部署到SpringBoot项目中,以及如何实现部署多个前端版本,通过Controller进行路径映射返回对应版本的HTML文件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前置条件:build好Vue项目得到dist文件夹

具体步骤

  • 将dist文件夹放到SpringBoot项目的resource/static/目录下,目录是这样
    前端文件放置位置
    这样就可以了。(这里的index-dev是我自己加的,默认没有)
    直接打包部署。访问后台端口就能直接访问到这里的index(太方便了)。

如果想要部署多个版本的前端?

那么就像我这样,将两个前端打包的页面放在一起,命名不同,dist中的css,js等资源取并集(就是都放到一个文件夹),然后写一个简单的controller

// 这里一定是Controller,而不是RestController,否则就不能返回html文件,而是字符串index.html,
// 参考https://www.cnblogs.com/guo-xu/p/11203740.html
@Controller
@RequestMapping("/")
public class IndexController {
    @GetMapping("dev")
    public String getDevIndex() {
    	// 这里就是对应版本的前端文件名称
        return "index-dev.html";
    }
    @GetMapping("pro")
    public String getProIndex(){
        return "index.html";
    }
}
<think>好的,用户之前询问了如何在腾讯云CVM上部署SpringBootVue项目,我给出了一个手动配置的详细指南。现在用户的新问题是希望使用宝塔面板来完成同样的部署,所以需要调整之前的步骤,整合宝塔面板的操作流程。 首先,需要明确宝塔面板的作用。宝塔面板是一个服务器管理软件,可以简化环境安装、网站部署等操作,适合不熟悉命令行操作的用户。因此,在教程中需要突出宝塔的图形化界面操作,替代部分手动命令。 接下来,用户可能的需求是希望步骤更简便,减少手动配置,尤其是环境安装和Nginx配置部分。因此,需要将之前的Java、MySQL、Nginx的手动安装步骤替换为宝塔的一键安装,并通过面板进行配置。 还要考虑安全性问题,比如宝塔面板的初始安全设置,修改默认端口和密码,以及防火墙设置。用户可能不了解这些安全措施,需要详细说明。 在部署后端SpringBoot部分,用户之前需要手动创建systemd服务,而使用宝塔可能需要通过面板的网站管理功能来设置Java项目,或者结合计划任务来管理服务。这部分需要研究宝塔的具体功能,确保步骤正确。 前端Vue部署部分,宝塔可以方便地创建站点,并上传静态文件,同时配置反向代理。需要指导用户如何在宝塔的文件管理器中上传dist目录,并设置Nginx反向代理规则,可能还需要处理跨域问题。 数据库部分,宝塔提供了phpMyAdmin,用户可以通过图形界面导入SQL文件,这比命令行更友好。需要详细说明如何在宝塔中创建数据库,设置用户权限,以及修改SpringBoot的配置文件。 另外,用户可能会遇到常见问题,比如端口未开放、服务启动失败等,需要在教程中加入这些问题的解决方法,或者引导用户查看日志。 最后,确保引用之前的参考资料,特别是关于CVM实例和宝塔面板的部分,保持回答的一致性。同时,生成的相关问题要围绕宝塔面板和腾讯云CVM的进阶使用,帮助用户进一步探索。</think>### **腾讯云 CVM 使用宝塔面板部署 SpringBoot + Vue 项目教程** --- #### **1. 准备工作** - **购买并配置 CVM 实例** 1. 登录腾讯云控制台,选择 **云服务器 CVM** → **新建实例**,选择 **Ubuntu/CentOS** 系统镜像(推荐 Ubuntu 22.04 LTS)[^2]。 2. 安全组配置: - **必开端口**:`8888`(宝塔面板默认端口)、`80`(HTTP)、`443`(HTTPS)、`8080`(后端API)、`3306`(MySQL,建议内网访问)[^1]。 - 其他端口按需开放(如 SSH 默认 `22` 端口)。 - **连接服务器** 使用 SSH 工具登录实例: ```bash ssh root@<服务器公网IP> ``` --- #### **2. 安装宝塔面板** - **一键安装宝塔** 执行以下命令安装宝塔面板(根据系统选择对应脚本): ```bash # Ubuntu/Debian wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh # CentOS yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ``` 安装完成后,记录面板登录地址、用户名及密码。 - **安全设置** 1. 登录宝塔面板后,立即修改默认端口(如 `8888` → `58888`)和面板密码。 2. 在 **安全** 页面关闭不必要的端口,仅保留必需端口(如 `80`、`443`、`58888`)。 --- #### **3. 通过宝塔安装环境** - **一键安装运行环境** 1. 进入宝塔面板 **软件商店**,选择 **LNMP 环境**(Nginx + MySQL + Java/Python 按需选择)。 2. 推荐版本: - **Nginx 1.22+**(反向代理与前端部署) - **MySQL 8.0+**(数据库服务) - **Java 11**(SpringBoot 依赖) - **配置 Java 环境** 1. 在 **软件商店** 搜索 `Tomcat`,选择安装并关联已安装的 Java 版本(如 OpenJDK 11)。 2. 验证安装: ```bash java -version # 输出应包含 "openjdk 11.0.x" ``` --- #### **4. 部署 SpringBoot 后端** - **上传并运行 JAR 包** 1. 本地打包 SpringBoot 项目为 JAR 文件: ```bash mvn clean package -DskipTests ``` 2. 通过宝塔 **文件管理** 上传 JAR 文件至服务器目录(如 `/www/wwwroot/backend`)。 3. 在宝塔面板 **网站** → **Java项目** 添加新项目: - 项目路径:选择上传的 JAR 文件 - 运行端口:`8080` - 启动命令:`java -jar your-project.jar` - **配置开机自启** 在宝塔 **计划任务** 中添加 Shell 脚本: ```bash #!/bin/bash cd /www/wwwroot/backend && java -jar your-project.jar ``` 设置任务周期为 **每分钟检测**,确保服务崩溃后自动重启。 --- #### **5. 部署 Vue 前端** - **构建生产环境代码** 本地执行: ```bash npm run build # 生成 dist 目录 ``` - **上传静态文件** 通过宝塔 **文件管理** 将 `dist` 目录上传至服务器(如 `/www/wwwroot/frontend`)。 - **配置 Nginx 站点** 1. 进入宝塔面板 **网站** → **添加站点**,填写域名或服务器 IP,根目录设为 `/www/wwwroot/frontend`。 2. 修改站点配置文件(Nginx),添加反向代理规则: ```nginx location /api/ { proxy_pass http://localhost:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } ``` 3. 重启 Nginx 生效配置。 --- #### **6. 数据库配置** - **创建 MySQL 数据库** 1. 进入宝塔面板 **数据库** → **添加数据库**,设置名称、用户名和密码。 2. 通过 **phpMyAdmin** 导入 SQL 文件(本地导出后上传至服务器)。 - **修改 SpringBoot 数据库连接** 编辑 `application.properties`: ```properties spring.datasource.url=jdbc:mysql://localhost:3306/your_database?useSSL=false spring.datasource.username=your_username spring.datasource.password=your_password ``` --- #### **7. HTTPS 配置(可选)** 1. 在宝塔面板 **SSL** → **Let's Encrypt** 申请免费证书,选择域名并自动部署。 2. 强制跳转 HTTPS:在站点配置中添加: ```nginx if ($scheme = http) { return 301 https://$server_name$request_uri; } ``` --- ### **常见问题解决** - **Q1: 宝塔面板无法访问?** - 检查安全组是否开放 `58888` 端口(修改后的面板端口)。 - 执行 `bt status` 查看面板运行状态。 - **Q2: 前端访问 API 404 错误?** - 确认 Nginx 反向代理路径是否匹配 `/api/`,后端服务是否运行在 `8080` 端口。 - 检查 SpringBoot 日志: ```bash tail -f /www/wwwroot/backend/nohup.out ``` --- ### **进阶优化** - **负载均衡** 通过宝塔 **软件商店** 安装 **负载均衡插件**,配置多台 CVM 实例分流请求。 - **备份与监控** - 使用宝塔 **计划任务** 定时备份数据库和网站文件至腾讯云 COS。 - 开启 **宝塔监控** 实时查看服务器 CPU、内存、磁盘使用率。 --- ### **相关问题** 1. 如何通过宝塔面板实现 SpringBoot 项目的自动化部署(Git Webhook)? 2. 腾讯云 CVM 如何结合宝塔防火墙防止恶意攻击? 3. Vue 项目如何通过宝塔配置 CDN 加速? --- **提示**:宝塔面板的 **应用管理器** 可替代手动 Systemd 配置,支持一键重启、日志查看等功能。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值