1. 项目概述与环境准备
2026年的全栈开发领域,Vue 3.8 + Spring Boot 4.1 + MySQL 9.0的技术组合已成为企业级应用开发的主流选择。这套技术栈既能满足现代前端交互需求,又能提供稳健的后端服务支持。而宝塔面板8.2作为国内使用率最高的服务器管理工具,其可视化操作界面大幅降低了全栈项目的部署门槛。
提示:本教程基于以下环境验证通过:
- 操作系统:Ubuntu 22.04 LTS
- 宝塔面板:8.2专业版
- Java环境:OpenJDK 21
- Node.js:18.16 LTS
- MySQL:9.0.32
在开始部署前,需要确保服务器已完成以下基础准备:
- 2核4G及以上配置的云服务器(阿里云/腾讯云等)
- 已解析到服务器IP的域名(备案完成)
- 开放端口:8888(宝塔面板)、80、443、3306(测试后建议关闭)
安装宝塔面板的核心命令(Ubuntu系统):
bash复制wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh
安装完成后,记下面板随机生成的username和password,这是后续所有操作的入口凭证。
2. 前端Vue项目部署实战
2.1 生产环境构建优化
现代Vue项目部署前需要进行针对性的构建优化。在项目根目录下,新版vue.config.js的配置要点包括:
javascript复制module.exports = {
productionSourceMap: false, // 关闭sourcemap
configureWebpack: {
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
libs: {
test: /[\\/]node_modules[\\/]/,
priority: 10
}
}
}
}
},
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].minify = {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true
}
return args
})
}
}
执行构建命令时推荐使用多线程模式:
bash复制export NODE_OPTIONS=--max-old-space-size=4096
vue-cli-service build --modern --report
2.2 宝塔面板静态站点配置
在宝塔面板中创建站点的关键步骤:
- 进入"网站"→"添加站点"
- 填写域名信息,选择"纯静态"类型
- 在"网站目录"设置中关闭防跨站攻击(open_basedir)
- 在"伪静态"选择"Vue单页应用"模板
上传dist目录内容后,需要特别注意的权限设置:
bash复制chown -R www:www /www/wwwroot/your_domain
find /www/wwwroot/your_domain -type d -exec chmod 755 {} \;
find /www/wwwroot/your_domain -type f -exec chmod 644 {} \;
3. Spring Boot后端服务部署
3.1 生产环境打包策略
Spring Boot 4.1推荐使用分层构建的Docker镜像方案,但考虑到宝塔环境,我们采用传统war包部署。在pom.xml中需要确认:
xml复制<packaging>war</packaging>
<build>
<finalName>api</finalName>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
打包命令使用:
bash复制mvn clean package -DskipTests -Pprod
3.2 Tomcat高级配置
宝塔内置的Tomcat 10需要调整以下参数(/www/server/tomcat/conf/server.xml):
xml复制<Connector port="8080" protocol="HTTP/1.1"
maxThreads="500"
minSpareThreads="50"
acceptCount="300"
compression="on"
compressionMinSize="2048"
compressableMimeType="text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json"
URIEncoding="UTF-8"/>
部署时需要特别注意:
- 将war包上传到/webapps目录后重命名为ROOT.war
- 创建专属的setenv.sh文件设置JVM参数:
bash复制#!/bin/sh
JAVA_OPTS="-server -Xms1024m -Xmx2048m -XX:MetaspaceSize=256m -XX:MaxMetaspaceSize=512m"
4. MySQL数据库配置与优化
4.1 高性能数据库设置
在宝塔面板的MySQL管理界面中,需要调整的关键参数:
| 参数项 | 推荐值 | 说明 |
|---|---|---|
| innodb_buffer_pool_size | 总内存的50-70% | 缓存池大小 |
| innodb_log_file_size | 256M | 重做日志大小 |
| max_connections | 500 | 最大连接数 |
| query_cache_type | 0 | 禁用查询缓存 |
创建数据库时的最佳实践:
sql复制CREATE DATABASE `prod_db`
DEFAULT CHARACTER SET utf8mb4
COLLATE utf8mb4_unicode_ci;
CREATE USER 'prod_user'@'localhost' IDENTIFIED BY 'ComplexP@ssw0rd';
GRANT ALL PRIVILEGES ON `prod_db`.* TO 'prod_user'@'localhost';
FLUSH PRIVILEGES;
4.2 连接池配置建议
在Spring Boot的application-prod.yml中配置Druid连接池:
yaml复制spring:
datasource:
type: com.alibaba.druid.pool.DruidDataSource
druid:
url: jdbc:mysql://localhost:3306/prod_db?useSSL=false&allowPublicKeyRetrieval=true
username: prod_user
password: ComplexP@ssw0rd
initial-size: 5
min-idle: 5
max-active: 50
max-wait: 60000
time-between-eviction-runs-millis: 60000
min-evictable-idle-time-millis: 300000
validation-query: SELECT 1
test-while-idle: true
test-on-borrow: false
test-on-return: false
5. 前后端联调与安全加固
5.1 跨域解决方案
在生产环境中,推荐使用Nginx反向代理解决跨域问题。在宝塔面板的站点配置中添加:
nginx复制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;
}
同时在前端axios实例中配置baseURL:
javascript复制const service = axios.create({
baseURL: process.env.NODE_ENV === 'production'
? '/api'
: 'http://localhost:8080',
timeout: 30000
})
5.2 安全防护措施
必须实施的服务器安全加固步骤:
- 修改SSH默认端口并禁用root登录
- 安装宝塔的"系统防火墙"和"网站防篡改"插件
- 配置Nginx的WAF规则:
nginx复制location / {
# 禁止SQL注入
if ($query_string ~* "union.*select.*\(") {
return 403;
}
# 禁止执行php
if ($request_filename ~* (\.php|\.sh|\.py)$) {
return 403;
}
}
针对Spring Boot应用的安全配置:
java复制@Configuration
public class SecurityConfig {
@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
http
.csrf(csrf -> csrf.disable())
.headers(headers -> headers
.frameOptions(frame -> frame.sameOrigin())
.httpStrictTransportSecurity(hsts -> hsts
.includeSubDomains(true)
.maxAgeInSeconds(31536000)
)
)
.sessionManagement(session -> session
.sessionCreationPolicy(SessionCreationPolicy.STATELESS)
);
return http.build();
}
}
6. 性能监控与运维方案
6.1 全栈监控体系搭建
推荐使用以下监控组合:
- 前端监控:接入Sentry的Vue SDK
javascript复制import * as Sentry from '@sentry/vue';
Sentry.init({
dsn: 'your_dsn',
integrations: [
new Sentry.BrowserTracing(),
new Sentry.Replay()
],
tracesSampleRate: 0.2,
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0
});
- 后端监控:Spring Boot Actuator + Prometheus
yaml复制management:
endpoints:
web:
exposure:
include: health,metrics,prometheus
metrics:
export:
prometheus:
enabled: true
- 数据库监控:宝塔的MySQL监控插件+Percona PMM
6.2 自动化部署方案
使用宝塔的"计划任务"功能实现Git钩子自动部署:
- 在项目根目录创建deploy.sh:
bash复制#!/bin/bash
git pull origin main
mvn clean package -DskipTests
cp target/api.war /www/server/tomcat/webapps/ROOT.war
- 在宝塔中添加Shell脚本任务:
code复制cd /www/wwwroot/your_project && ./deploy.sh
- 配置Git Webhook(以Gitee为例):
json复制{
"hook_url": "http://your_domain:8888/hook?access_key=your_key",
"push_events": true,
"tag_push_events": false
}
7. 疑难问题解决方案
在实际部署过程中,有几个高频问题需要特别注意:
- 内存泄漏排查:
bash复制# 查看Java进程内存
jstat -gcutil <pid> 1000 10
# 生成堆转储文件
jmap -dump:format=b,file=heap.hprof <pid>
- MySQL连接池耗尽:
sql复制-- 查看当前连接
SHOW STATUS LIKE 'Threads_connected';
SHOW PROCESSLIST;
-- 调整连接数
SET GLOBAL max_connections = 500;
- 前端路由404问题:
在Nginx配置中添加:
nginx复制location / {
try_files $uri $uri/ /index.html;
}
- SSL证书配置:
宝塔面板的SSL选项卡中,选择Let's Encrypt免费证书时:
- 开启强制HTTPS
- 开启HTTP/2
- 配置HSTS有效期至少180天
我在实际部署中发现,当并发量超过500时,Tomcat默认配置会出现性能瓶颈。建议在server.xml中调整以下参数:
xml复制<Executor name="tomcatThreadPool"
namePrefix="catalina-exec-"
maxThreads="800"
minSpareThreads="100"/>
