第一次给项目做云服务器部署的时候,我对着黑乎乎的Linux终端发了好一阵呆。代码在本地跑得好好的,一到服务器就各种报错,环境不对、端口不通、数据库连不上——最离谱的一次,光一个Tomcat启动失败就折腾了一整晚。后来我所有带新人的部署教学,统一改用宝塔面板来做,效果立竿见影。原因很简单:宝塔把Tomcat、SpringBoot、MySQL这一整套部署流程,从“敲命令”变成了“点点点”,对0基础的人来说,门槛直接降了一个量级。
这篇教程只做一件事:带你在自己的云服务器上,用宝塔面板把一个前后端分离项目完整跑起来。后端SpringBoot打成war包部署到Tomcat,前端Vue打包后同样放进Tomcat,MySQL负责存数据。全程以鼠标操作为主,只有个别地方需要复制一条命令。你不用懂Linux,不用记一堆冷门指令,跟着流程走完就能把项目挂到公网。
1. 部署前先弄明白:前后端分离项目部署到服务器到底在做什么
很多新手一上来就急着装环境,结果装了一堆用不上的东西。正确的做法是先搞清楚这个项目在服务器上是由哪些部分组成的、彼此怎么配合,再动手操作。
1.1 一台服务器上的三个角色
一个前后端分离项目,跑起来之后服务器上至少有三个角色,缺一个都不行:
- 后端服务:SpringBoot项目启动后,对外提供接口。比如登录接口、列表接口、下单接口,全都是它处理的。
- 前端页面:Vue之类的项目打包后,生成一堆静态文件(HTML、CSS、JS)。用户在浏览器里看到的页面就是这些文件渲染出来的。
- 数据库:MySQL存放业务数据。用户注册信息、商品列表、订单记录,全都存在这里。
你可以用一个生活化的场景来理解这三者的关系:前端是餐厅的大堂,用户只跟大堂打交道;后端是后厨,大堂把用户的需求告诉后厨;数据库是后面的仓库,后厨做菜时要去仓库取食材。用户不需要知道后厨和仓库是什么样,但餐厅要正常运转,这三层缺一不可。
1.2 “前后端分离”和“分开部署”不是一回事
我发现很多刚接触部署的人容易误解“前后端分离”这四个字,以为需要买两台服务器,一台跑前端、一台跑后端。真不是这样。
前后端分离指的是代码层面的分离:前端项目和后端项目是独立的工程,团队可以各自开发、独立部署、通过接口通信。但在服务器资源层面,完全可以跑在同一台机器上。咱们这个教程就用一台云服务器,前端静态文件放进Tomcat,后端war包也部署到同一个Tomcat,数据库也在这台机器上。登录公网IP,能看到页面,页面能正常调接口,这个项目就算部署成功了。
1.3 为什么选宝塔面板
如果你是老手,用命令行逐项部署完全没问题,可读性好、可控性强。但0基础的同学用纯命令行折腾这套环境,光是把JDK、Tomcat、MySQL、Maven这几样东西装好、配好、跑通,就够喝一壶的。宝塔面板的价值在于把绝大部分运维操作封装成了可视化界面:
- 软件商店里一键安装Tomcat、MySQL、Nginx等环境
- 文件管理器直接上传war包、编辑配置文件
- 可视化查看Tomcat运行状态和日志
- 自带数据库管理界面,建库导数据不用敲SQL
不过我得提醒一句:宝塔面板装对版本很重要。网上有些来路不明的“开心版”“破解版”,听起来能免费用付费功能,实际上有人在这类版本里塞过后门脚本。我见过不止一个人图省事装了个来路不明的版本,最后面板里被写入了恶意计划任务,得不偿失。老老实实从官网装官方版,免费功能够你折腾很久了。
2. 云服务器环境初始化:选系统、开端口、装宝塔面板
这一步是0基础最容易卡住的地方。很多人在本地把项目跑得飞起,一到服务器就懵了,其实原因就两个:系统选错、端口没放行。先把这两个问题解决,后面就顺了。
2.1 云服务器选购建议:配置和系统选型
先说配置。如果你只是部署个人项目、课程设计、毕业设计,或者练手学习,2核4G是起步配置,跑Tomcat加MySQL够用。预算允许的话直接上4核8G,Tomcat的JVM给到2G,跑起来更从容。带宽方面1M就能用,如果前端资源比较大或者并发不小,可以选3M以上。
系统本身更要重视。宝塔面板对不同系统的兼容性不一样,我个人建议优先选CentOS 7.9、Ubuntu 20.04/22.04、Debian 11/12。CentOS 7.9老归老,但网上的踩坑资料最多,新手上路不容易被问题卡死。一些云厂商默认推荐的自研系统,比如openEuler,生产上可能很优秀,但你在宝塔里遇到问题想搜解决方案,搜出来的很多命令可能不通用,新手建议别选。
2.2 端口放行:第一道安全组,第二道系统防火墙
这里是新手踩坑扎堆的地方。云服务器上有两层防火墙,你必须两层都放行,端口才真正通:
第一层是云厂商控制台里的安全组。你需要在网页控制台找到“安全组”或“防火墙”菜单,添加放行规则。第二层是服务器系统内部的防火墙,比如CentOS的firewalld、Ubuntu的ufw。
用宝塔面板的话,第二层系统防火墙可以在宝塔的“安全”菜单里配置,直观很多。需要放行的端口按照你的实际需要来:
| 端口 | 用途 | 是否需要放行 |
|---|---|---|
| 22 | SSH远程连接 | 必须,否则连不上服务器 |
| 8888 | 宝塔面板入口 | 必须,否则打不开面板 |
| 80 | HTTP网站访问 | 建议放行,以后绑域名要用 |
| 443 | HTTPS访问 | 建议放行 |
| 8080 | Tomcat默认端口 | 必须,项目要在这个端口上跑 |
| 3306 | MySQL远程连接 | 看需求,本地连服务器数据库才需要 |
特别提醒:3306端口能不放行就不放行。MySQL裸露在公网上风险很高,很多人就因为这个被扫描器爆破过密码。如果你只是想在本地Navicat连服务器数据库调试,用完就把这条规则删掉。
2.3 安装宝塔面板与运行环境
服务器买好、端口规划好了,接下来装宝塔。操作其实很简单:用SSH工具连上服务器,在宝塔官网找到对应系统的安装命令,复制粘贴到终端执行,等几分钟就装好了。
安装完成后,终端会输出面板的访问地址、初始账号和初始密码。浏览器里打开地址,登录面板。第一次进入时,宝塔会推荐你安装一套环境,这里不要乱选组件,我记得面板一般会有一个“推荐安装套件”。咱们这个场景手动按需装就够了:
进入宝塔的“软件商店”页面,搜索并安装这几个:
- Tomcat:推荐选择Tomcat 8.5或9.x,对应JDK 8。这个搭配最经典,网上资料多,踩坑好解决。
- MySQL:选择5.7或8.0都可以,代码里用的什么版本就装什么版本。如果本地是8.0,服务器也装8.0,避免驱动或认证方式差异带来的问题。
- 另外确认Tomcat自带的Java环境版本,如果软件商店里没有单独JDK选项,Tomcat安装时会一起搞定。
装完环境之后,别急着部署,先做一件事:打开面板左侧的“安全”菜单,确认22、8888、8080这几个端口在系统防火墙层面已放行。云厂商控制台的安全组也要同步确认,两层都通了,后面就不会出现半天打不开页面的情况。
3. SpringBoot后端改造与war包部署到Tomcat的实操
环境准备好,接下来把后端项目弄到服务器上。SpringBoot默认打的是jar包,用内置Tomcat就能启动,但咱们这个场景要部署到外部Tomcat,所以得把项目改成war包形式。别担心,改起来很简单。
3.1 为什么这次选war包而不是jar包
SpringBoot项目有两种部署思路:
- jar包方式:
java -jar xxx.jar直接启动,自带Tomcat,不需要额外装容器。这其实是SpringBoot最推荐的常规方式。 - war包方式:把项目打成war包,丢到服务器上Tomcat的webapps目录里,由外部Tomcat加载运行。
既然标题明确用了Tomcat,而且我们希望前端静态文件也能放在同一个Tomcat里统一管理,那就用war包。好处是只维护一套Tomcat进程,对0基础用户来说少了一个需要操心的服务。以后哪怕你想把war和jar两种方式都掌握,也不亏,核心区别就一条:内置容器,还是外部容器。
3.2 改造SpringBoot项目:三处必改
打开你的SpringBoot工程,三处地方需要调整:
第一处,pom.xml里的打包方式改成war:
<groupId>com.example</groupId> <artifactId>demo</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>war</packaging>第二处,把内置Tomcat的依赖排除掉,让它在外部Tomcat环境里不打架:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-tomcat</artifactId> <scope>provided</scope> </dependency>provided的意思就是:这个依赖打包时不需要打进去,因为部署环境(也就是外部Tomcat)已经提供了。老手看这一行就明白,新手只要照着改就行。
第三处,启动类要继承SpringBootServletInitializer,并重写configure方法:
@SpringBootApplication public class DemoApplication extends SpringBootServletInitializer { @Override protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) { return builder.sources(DemoApplication.class); } public static void main(String[] args) { SpringApplication.run(DemoApplication.class, args); } }这样改的原因很简单:外部Tomcat启动应用时,不会执行main方法,它要通过SpringBootServletInitializer这个入口来加载Spring Boot应用。很多新手忘了这一步,部署到Tomcat后访问项目,发现404,一查日志发现Spring容器根本没起来,就是没做第三处修改。
3.3 本地打包与常见错误
改造完成后,在本地项目根目录执行打包命令:
mvn clean package打包成功的话,target目录下会生成一个war包,名字一般是artifactId-version.war,比如demo-0.0.1-SNAPSHOT.war。
这里有个容易踩的坑:本地JDK版本与服务器JDK版本不一致。你本地用JDK 17编译,服务器上Tomcat用的还是JDK 8,跑起来大概率报UnsupportedClassVersionError,原因是编译字节码版本比运行时JVM的版本高。最稳妥的做法是本地和服务器统一用JDK 8,或者统一用JDK 17,别一串。我自己吃过亏,本地默认JDK 17编译完,服务器JDK 8直接起不来,折腾半天才反应过来版本问题。
3.4 上传war包到Tomcat并完成启动
进入宝塔面板,打开“文件”菜单,进到这个目录:
/www/server/tomcat/webapps这就是Tomcat的项目部署目录。把刚才打包出来的war包拖进去上传。上传完成后,有两种处理方式:
方式一,也是最省事的:把war包改名为ROOT.war,全大写。这样部署后直接访问http://服务器IP:8080/就是你的项目,不用带项目名。方式二,保持原名demo.war,访问路径就是http://服务器IP:8080/demo/。对0基础用户,我强烈建议用方式一,访问路径短,少一个出错环节。
改名之后,刷新一下Tomcat页面。首次部署时,Tomcat会自动解压war包,生成一个同名的文件夹。如果手动改了名,需要等待自动解压完成。解压没问题的话,去“软件商店”里的Tomcat管理页,或者直接在命令行里重启Tomcat:
/etc/init.d/tomcat restart重启后看日志。在宝塔的Tomcat设置里可以直接“查看日志”,重点看catalina.out和localhost.2025-xx-xx.log。看到Deployment of web application archive ... has finished,说明启动成功。
3.5 顺手调整Tomcat的端口和JVM参数
Tomcat默认端口是8080,如果之前的安全组和系统防火墙都放行了8080,直接用就行。但如果你希望访问项目时不带端口,也就是用80端口直接访问,可以在Tomcat的conf/server.xml里改Connector的port="80"。注意80端口不能被Nginx等程序占用,否则Tomcat起不来。
JVM参数的调整也建议顺手做了。打开Tomcat的bin/catalina.sh文件,找到JAVA_OPTS位置,设置堆内存大小:
JAVA_OPTS="-Xms512M -Xmx1024M -Dfile.encoding=UTF-8 -Duser.timezone=Asia/Shanghai"-Xms是初始堆内存,-Xmx是最大堆内存。2核4G的服务器,给到1024M就差不多了;4核8G可以给到2048M。刚开始跑个人项目不用调太大,内存不够再去改也行。改完记得重启Tomcat才会生效。
4. MySQL数据库准备:建库、导数据、让项目连得上
后端项目和Tomcat都跑起来了,接下来处理数据库。这步看着简单,但错一步项目就连不上库,所以每个细节都要走一遍。
4.1 安装MySQL后的初始化环境
如果你在宝塔软件商店里安装的是MySQL 5.7或8.0,安装完成后,宝塔会提示你设置或自动生成root密码。这一步很重要,很多人后续连接失败,就是因为用了本地开发时的密码直接连服务器的库,两边密码不匹配。
在宝塔“数据库”菜单里可以看到已安装的MySQL实例。建议在命令行里重置一次root密码,更可控:
mysql -uroot -p登录后如果需要修改root密码,执行:
ALTER USER 'root'@'localhost' IDENTIFIED BY '你的新密码'; FLUSH PRIVILEGES;注意MySQL 8.0和5.7改密码的语法稍有差异,8.0下用上面的ALTER USER就行。改完后,记得同步更新后端项目里的数据库密码。
4.2 创建数据库并导入SQL数据
在宝塔“数据库”菜单,点击“添加数据库”。名称建议跟你本地的数据库名保持一致,比如demo,编码选择utf8mb4,不要选latin1。排序规则选utf8mb4_general_ci或者utf8mb4_unicode_ci都可以,做中文项目要特别注意编码,选错会导致中文乱码。
数据库建好之后,需要导入数据。你有两种办法:
一是用宝塔的“导入”功能,选择SQL文件直接导。二是用命令行方式,项目SQL文件比较大的时候,命令行更稳定:
mysql -uroot -p demo < /path/to/demo.sql实测下来,SQL文件超过几十MB时,宝塔网页导入界面容易超时,命令行反而没那么多事。导入成功后,可以用mysql命令行验证一下:
USE demo; SHOW TABLES;能看到业务表就说明导入成功。
4.3 项目数据库配置:URL、驱动、时区、SSL
数据库就绪后,配置文件要更新。回到你的SpringBoot项目,找到application.yml或application.properties,改成这样(以spring boot 2.x + MySQL 8.0为例):
spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true username: root password: 你的数据库密码这里几个参数是怎么来的,我逐个说清楚:
serverTimezone=Asia/Shanghai:不指定时区,MySQL驱动会拿服务器默认时区去解析,可能导致时间字段差8小时。useSSL=false:本地开发时连接不走SSL,免得证书校验报错。allowPublicKeyRetrieval=true:MySQL 8.0在非SSL连接下访问,默认不允许客户端从服务器获取公钥,不加上这个参数,连接时会直接报公共密钥检索错误。
localhost是服务器本地地址,项目和数据库在同一台机器上,用localhost和127.0.0.1效果一样,别写成你的公网IP,那样反而多走一条网络链路,还有防火墙拦截风险。
如果项目是老SpringBoot 1.x项目,驱动类是com.mysql.jdbc.Driver,新版用com.mysql.cj.jdbc.Driver,别照抄旧配置,否则启动会报ClassNotFoundException。
4.4 远程连接MySQL的授权方法
如果你是本地开发,需要在Navicat之类的工具里连接服务器的MySQL,那就得在服务器这边做两个操作。
第一,安全组放行3306端口。第二,给一个允许远程登录的MySQL账号。建议不要直接用root远程连,单独建一个账号,权限只给当前业务库:
CREATE USER 'appuser'@'%' IDENTIFIED BY '你的密码'; GRANT ALL PRIVILEGES ON demo.* TO 'appuser'@'%'; FLUSH PRIVILEGES;其中%表示允许任意IP连接。测试完远程连接之后,如果暂时不需要了,把安全组里的3306放行规则删掉,减少暴露面。个人项目可以图方便,生产环境千万别这么干。
5. 前端项目打包上线:从dist目录到Tomcat root
后端和数据库都通了,最后把前端页面部署上去。这也是“前后端分离”项目里最有迷惑性的一步——前端跑起来不是靠什么“前端服务器”,它本质就是一堆静态文件,放到能提供HTTP访问的目录里就行了。咱们直接放进Tomcat的webapps目录。
5.1 打包前先改前端接口地址
这一步是前端部署的重中之重。本地开发时,前端通常走代理,比如vue.config.js里的devServer配置了proxy,接口请求全部转发到localhost:8080。打包上线后,代理是不生效的,必须把接口请求地址改成服务器上后端的实际地址。
具体位置取决于你的项目封装。Vue项目一般会有一个request.js或api.js文件,里面配置axios的baseURL。把本地开发地址改成:
// 原来可能是 http://localhost:8080 const BASE_URL = 'http://你的服务器公网IP:8080'如果你不想在每个请求文件里硬编码IP,也可以专门抽一个config文件统一管理。这个小习惯对后期维护很重要,不然上线后每次改接口地址要翻一堆文件。
这里要强调一个常踩的坑:很多人改了BASE_URL之后,忘了检查是不是有多个文件也在定义接口地址,结果只改了一处,另外几处还是localhost。部署后一打开页面,控制台里全是跨域或404请求。搜项目里所有localhost,能改的全改掉,比肉眼翻文件靠谱。
5.2 执行build并检查dist产物
代码确认没问题后,在本地前端项目根目录执行打包命令:
npm install npm run build打包完成后,项目根目录会生成一个dist文件夹,里面是index.html和静态资源目录。这里有个检查技巧:用编辑器打开dist/index.html,看看引用的JS、CSS路径是/static/xxx.js还是./static/xxx.js。
- 如果你只打算部署到Tomcat root,用
/开头的绝对路径没问题。 - 如果你想部署到某个子路径下,比如
localhost:8080/admin/,那相对路径更保险。
这个细节让人容易卡住,因为本地dev时通常不会有问题,页面能打开,但部署到Tomcat后一堆资源404,页面白屏,多半就是路径问题。
5.3 将前端文件部署到Tomcat的ROOT目录
现在把整个dist目录里的所有文件上传到Tomcat的webapps里。上一步我们已经把后端war包改名成了ROOT.war,Tomcat会自动解压出一个ROOT目录,里面放的是后端项目的内容。现在要做的是把这个ROOT目录替换成前端文件。
操作流程如下:
- 在
/www/server/tomcat/webapps下找到ROOT目录,先备份或者直接删掉其中内容。如果后端有需要对外访问的接口文档之类的文件,备份到别处,再清空。 - 把
dist目录里的所有文件上传进ROOT目录。 - 重启Tomcat。
这里有一个容易被忽略的细节:ROOT目录里不要多套一层dist目录,要把dist里面的内容直接放在ROOT根下。也就是说,访问http://IP:8080/时,Tomcat直接返回ROOT/index.html,而不是/ROOT/dist/index.html。上传的时候注意层级,我就见过有人把整个dist文件夹拖进去,结果访问URL还要多加一层/dist才能看到页面。
5.4 前端history路由刷新404的一个处理办法
如果你的前端路由用的是history模式,部署到Tomcat后会出现一个现象:首页能打开,但在非首页地址刷新页面时,Tomcat返回404。原因很简单:前端路由的路径在后端服务器上并不存在真实文件,刷新时浏览器向Tomcat请求/detail/1这个路径,Tomcat去找对应的物理资源,找不着就404了。
新手最快的解决方案是切换成hash模式:把Vue Router的createWebHistory()改成createWebHashHistory()。这个方案最省事,URL会多一个#符号,但刷新不会再404。
如果你坚持要用history模式,也可以改Tomcat配置做错误页跳转,把404重写到index.html,但涉及配置文件改动和通配符映射,对0基础来说成本稍高。先把项目跑通验证完功能,之后再考虑美化URL也不迟。
6. 踩了无数次的坑:部署排查思路与解决方案
就算照着教程一步步走,也难免遇到意外。这一章把我自己以及带过的同学在部署过程中真真切切遇到过的坑整理出来,每个问题都给出完整的排查思路,而不是只扔一个答案。你会慢慢发现,部署出问题不可怕,可怕的是不知道从哪里查起。
6.1 端口占用:Tomcat启动失败的经典开场
准备启动Tomcat,日志里突然出现Address already in use,说明端口被别的进程占用了。大概率是你不小心启动了多个Tomcat,或者之前部署的另一个服务占用了8080。
排查链路很简单:先查端口被谁占用,杀掉对应进程,再重试启动。
netstat -tlnp | grep 8080执行后会列出占用8080的进程PID,然后:
kill -9 PID之后重启Tomcat即可。如果日志里显示Port 8080 required by Tomcat v8.5 Server at localhost is already in use这种字样,排查思路完全一样。别急着卸载重装,先查端口、杀进程。
6.2 MySQL SSL连接报错与驱动类找不到
后端启动时如果报SSL connection error相关错误,最常见的原因就是JDBC连接串里没有关闭SSL,或者没有指定时区。单独把这个异常拎出来说,是因为它在MySQL 8.0 + SpringBoot的新版本组合下特别频繁。
解决方案已经有现成的,在连接串里补上三个参数即可:
useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true如果你的项目本来就配置了useSSL=false,却还是报Public Key Retrieval is not allowed,那是因为MySQL 8.0默认使用caching_sha2_password认证插件,客户端在非SSL连接下无法直接获取公钥。除了加参数,也可以把账号的认证插件改成mysql_native_password:
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '你的密码';注意:MySQL 8.0之后官方已经不太推荐mysql_native_password,这只是兼容旧客户端的临时方案,能正常跑项目后,优先保持allowPublicKeyRetrieval=true的参数方案。
6.3 三层定位数据库连接失败
项目启动后报Cannot create PoolableConnectionFactory或Access denied for user,数据库连不上。每次遇到这类问题,我都建议按三层思路来查,顺序不要乱:
第一层,验证账号密码是否正确。在服务器命令行手动登录数据库:
mysql -u用户名 -p密码 -h127.0.0.1 -P3306 数据库名能进,说明账号密码没问题,继续下一层;进不去,检查是不是密码被宝塔重置过,或者账号权限不足。
第二层,验证远程授权是否生效。如果项目里配置的数据库地址是127.0.0.1,但账号只授权了localhost,也会拒绝连接。用下面这条SQL检查授权范围:
SELECT user, host FROM mysql.user;确认你的业务账号host列包含%或具体IP,否则就单独授权:
GRANT ALL PRIVILEGES ON demo.* TO 'appuser'@'%'; FLUSH PRIVILEGES;第三层,验证端口通不通。本地命令行执行:
telnet 服务器公网IP 3306如果telnet不通,去云厂商安全组和宝塔“安全”里检查3306放行规则。这三层查完之后,90%的数据库连接问题都能定位出来。
6.4 SpringBoot版本太高与Tomcat版本不匹配
这个坑近年来出现频率非常高,因为SpringBoot 3.x开始,包的命名空间从javax.servlet换成了jakarta.servlet。如果你的SpringBoot是3.x,打成war包丢到Tomcat 9及以下版本,启动时极大概率报ClassNotFoundException: javax.servlet.Filter之类的问题,因为老Tomcat根本不认识jakarta命名空间。
版本对应关系心里要有个数:
| SpringBoot版本 | Servlet API | 配套Tomcat |
|---|---|---|
| 2.x | javax.servlet | Tomcat 8.5 / 9.x |
| 3.x | jakarta.servlet | Tomcat 10.x及以上 |
宝塔软件商店里默认装的Tomcat版本是固定的,如果你用的SpringBoot版本太高,但面板里的Tomcat是老版本,就选其中一个方向做统一:要么降SpringBoot到2.x,要么换新Tomcat。对0基础来说,降SpringBoot版本比在宝塔里装新Tomcat更可控,毕竟改动只发生在工程内部。
6.5 宝塔面板打不开怎么办
面板地址在终端里输出的那一刻还能打开,过段时间再访问怎么也打不开。大多数情况不是面板坏了,而是端口不通或进程停了。
第一步,确认面板服务还活着。在服务器终端执行:
/etc/init.d/bt status看到running就说明进程正常。这时还是打不开,基本就是端口不通。检查云厂商安全组有没有放行8888端口,宝塔“安全”里的系统防火墙是否也放行了8888。这两个地方是新手最容易漏掉的。
如果bt status显示服务未启动,执行:
/etc/init.d/bt start启动后再刷新页面。还有个常见场景:云服务器到期续费后IP变了,你还在用旧IP访问面板,也会打不开。去控制台查看当前公网IP,用新的IP登录就行。
6.6 前端白屏和接口404的检查顺序
页面部署完,访问首页一片白,或者能打开首页但接口全是404。这个问题的排查顺序很有讲究。
第一,先用浏览器的F12控制台看报错。如果是JS资源404,重点检查index.html里的资源路径。如果是接口404,重点检查axios的baseURL指向的是不是http://IP:8080,以及后端war包部署后访问路径是否匹配。
第二,检查接口请求是否带对了项目上下文。比如后端war包没改名为ROOT.war时,部署后项目路径是http://IP:8080/demo/,如果前端baseURL还是http://IP:8080/,自然404。要么把war包改成ROOT.war消掉上下文路径,要么在baseURL后面补上/demo,二选一。
第三,排查跨域。前端和后端虽然在同一个Tomcat下,但端口和路径可能不同,浏览器仍可能报跨域错误。最简单的解法是在后端加全局CORS配置,允许前端来源跨域。这块代码网上能找到很多方案,搜索“SpringBoot 全局 CORS 配置”即可。
这三种情况的排查顺序我建议固定下来:先看浏览器控制台,再查war包路径,最后才考虑跨域。新手往往一上来就怀疑跨域,结果调了半天发现是baseURL写错了。
最后再分享一点实际操作中的体会
我第一次用宝塔部署前后端分离项目,从买服务器到线上跑通,用了将近一个晚上,其中一半时间花在查端口和猜密码上。后来带过不少同学走这个流程,能明显感觉到,越早把“排查思路”建立起来,后面部署任何项目都越快。你遇到报错时,别急着东改一下西改一下,先去看日志:Tomcat看catalina.out,MySQL看宝塔的数据库日志,前端看浏览器控制台,日志会告诉你真正的方向。
这套流程熟练之后,你可以进一步去了解Nginx反向代理、域名绑定、HTTPS证书、Docker容器化这些进阶玩法。但在此之前,把Tomcat + SpringBoot + MySQL这套最经典的组合手工走通一次,医院对你理解整个Web项目的运行机制帮助极大。哪怕以后全都用自动化部署了,你也知道每一步到底在做什么。