基于腾讯云宝塔面板的全栈项目部署实战：从MySQL到Vue3的完整链路

1. 腾讯云服务器选购与宝塔面板初始化第一次在腾讯云部署全栈项目时我对着琳琅满目的云服务器配置犯了选择困难症。这里分享个实用经验如果是中小型项目选择2核4G配置的轻量应用服务器就足够应对MySQLVue3的全栈需求性价比最高。购买完成后别急着操作先做三件关键事在控制台找到安全组配置提前放行8888宝塔面板、3306MySQL、6379Redis等端口记下服务器公网IP后面每个环节都会用到建议立即设置SSH密钥对登录比密码更安全重装系统时选择宝塔Linux面板模板这个过程大概需要5-8分钟。我遇到过系统镜像下载慢的情况这时候可以尝试切换不同的可用区。安装完成后你会看到这样的登录信息外网面板地址: http://你的服务器IP:8888/随机安全码 内网面板地址: http://你的服务器IP:8888/随机安全码 username: 自定义用户名 password: 自定义密码2. 后端环境搭建从数据库到Java运行环境2.1 MySQL配置的三大陷阱在宝塔面板的软件商店安装MySQL时新手常会忽略这三个关键点版本选择MySQL 5.7和8.0的认证方式不同建议新项目直接用8.0字符集配置一定要在my.cnf中添加character-set-serverutf8mb4否则中文乱码问题会让你头疼性能优化2核4G的服务器建议设置innodb_buffer_pool_size1G导入本地数据时有个小技巧先用Navicat或DBeaver测试远程连接确认无误后再执行SQL文件。我习惯先用这个命令检查连接mysql -h 服务器IP -u root -p --port33062.2 Redis的隐藏配置项宝塔安装Redis默认只配置了基础参数生产环境还需要调整# 在/etc/redis.conf中添加 maxmemory 1gb maxmemory-policy allkeys-lru appendonly yes启动后记得用redis-cli ping测试连通性。如果遇到连接超时检查宝塔的防火墙和腾讯云安全组是否都放行了6379端口。2.3 JDK与Maven的版本管理这里有个血泪教训不要直接用yum安装OpenJDK不同Java版本可能引发兼容性问题。推荐手动安装# 下载JDK17 wget https://download.java.net/openjdk/jdk17/ri/openjdk-1735_linux-x64_bin.tar.gz tar -xvf openjdk-1735_linux-x64_bin.tar.gz -C /usr/local/ # 配置环境变量 echo export JAVA_HOME/usr/local/jdk-17 /etc/profile echo export PATH$JAVA_HOME/bin:$PATH /etc/profile source /etc/profileMaven安装后记得修改settings.xml配置阿里云镜像编译速度能快10倍mirror idaliyunmaven/id mirrorOf*/mirrorOf name阿里云公共仓库/name urlhttps://maven.aliyun.com/repository/public/url /mirror3. 后端项目部署实战3.1 打包上传的自动化技巧每次手动执行mvn package再上传jar包太麻烦我后来改用这个自动化脚本#!/bin/bash mvn clean package -DskipTests scp target/your-project.jar root服务器IP:/www/wwwroot/backend/ ssh root服务器IP cd /www/wwwroot/backend/ nohup java -jar your-project.jar log.txt 21 3.2 服务守护与日志管理宝塔的Java项目管理器虽然方便但缺乏高级监控功能。推荐用supervisor做进程守护[program:your-project] commandjava -jar /www/wwwroot/backend/your-project.jar directory/www/wwwroot/backend/ autostarttrue autorestarttrue stderr_logfile/var/log/your-project.err.log stdout_logfile/var/log/your-project.out.log安装后用supervisorctl status查看运行状态比直接nohup靠谱多了。4. Vue3前端部署与跨域解决方案4.1 静态资源优化配置Vite打包的Vue3项目上传到Nginx后记得在宝塔的站点配置里添加这些优化参数gzip on; gzip_types text/plain application/xml application/javascript; gzip_min_length 1k; location / { try_files $uri $uri/ /index.html; expires 1y; add_header Cache-Control public; }这样配置后我的项目加载速度从3s降到了800ms左右。4.2 跨域问题的终极方案遇到Access-Control-Allow-Origin报错时别急着改前端代码先在Nginx配置反向代理location /api/ { proxy_pass http://localhost:后端端口/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }然后在Vue项目的vite.config.js里配置server: { proxy: { /api: { target: http://你的域名, changeOrigin: true, rewrite: path path.replace(/^\/api/, ) } } }4.3 Session跨域共享方案前后端分离项目最头疼的登录状态问题我的解决方案是后端添加CORS配置Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(你的前端域名) .allowCredentials(true) .allowedMethods(*); } }; }前端axios配置axios.defaults.withCredentials trueNginx配置中添加add_header Access-Control-Allow-Credentials true;5. HTTPS全站加密与性能调优5.1 免费SSL证书申请宝塔面板一键申请Lets Encrypt证书虽然方便但要注意提前把域名解析到服务器选择文件验证方式更稳定记得开启自动续签证书安装后强制HTTPS访问在Nginx配置里加入server { listen 80; server_name 你的域名; return 301 https://$host$request_uri; }5.2 MySQL性能监控宝塔自带的MySQL监控太基础推荐安装Percona Toolkityum install percona-toolkit然后用这个命令分析慢查询pt-query-digest /var/lib/mysql/mysql-slow.log5.3 前端静态资源CDN加速把dist目录下的js/css文件上传到腾讯云COS并开启CDN修改项目引用地址script srchttps://你的CDN域名/static/js/main.js/script这个优化让我的首屏加载时间从1.2s降到了400ms左右。