如何借助XAMPP部署Spring/Angular应用并实现局域网访问

一、数据库配置 #

• 启动XAMPP控制面板，开启MySQL服务。
• 点击XAMPP面板里MySQL对应的「Admin」按钮打开phpMyAdmin，创建和你本地数据库同名的空数据库。
• 导入已有数据库数据：选中新建的数据库，点击「导入」，选择本地数据库的.sql备份文件，执行导入操作。
• 修改Spring Boot项目的application.properties（或application.yml），配置XAMPP MySQL的连接信息：

  spring.datasource.url=jdbc:mysql://localhost:3306/你的数据库名?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC
  spring.datasource.username=root  # XAMPP MySQL默认用户名是root
  spring.datasource.password=     # 默认密码为空，若你修改过则填新密码
  

二、Spring Boot后端（WAR包）部署 #

• 确保WAR包符合部署要求：
  1. 打开项目pom.xml，确认<packaging>war</packaging>已设置。
  2. 添加Tomcat依赖并设为provided，避免和XAMPP的Tomcat冲突：

     <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-tomcat</artifactId>
         <scope>provided</scope>
     </dependency>
     

  3. 执行mvn clean package重新打包生成WAR文件。
• 找到XAMPP安装目录下的tomcat/webapps文件夹，将WAR包复制进去。
• 启动XAMPP里的Tomcat服务，Tomcat会自动解压并部署WAR包。
• 本地测试：在浏览器访问http://localhost:8080/你的WAR包名称（比如WAR包名为demo.war，路径就是http://localhost:8080/demo），确认后端接口正常响应。

三、Angular前端部署 #

• 打开Angular项目的dist文件夹，将里面的所有文件复制到XAMPP安装目录下的htdocs文件夹，也可以在htdocs里创建子文件夹（比如my-frontend）存放这些文件。
• 若前端需要调用后端接口，修改Angular的生产环境配置文件environment.prod.ts，将接口地址改为http://你的本机局域网IP:8080/你的WAR包名称（也可以先改成本机IP，重新构建dist后再部署）。
• 启动XAMPP里的Apache服务，本地测试：浏览器访问http://localhost（放子文件夹的话就是http://localhost/my-frontend），确认页面正常加载且能和后端通信。

四、局域网访问配置 #

• 获取本机局域网IP：打开cmd输入ipconfig，找到IPv4地址（比如192.168.1.100）。
• 关闭本机防火墙，或者在防火墙里开放80端口（Apache）和8080端口（Tomcat），防止局域网设备被拦截。
• 局域网内其他设备访问：
  • 前端：设备浏览器输入http://你的局域网IP（或http://你的局域网IP/my-frontend）。
  • 后端接口：访问http://你的局域网IP:8080/你的WAR包名称/接口路径。

注意事项 #

• 若XAMPP的Tomcat或Apache端口被占用，点击面板里对应服务的「Config」按钮，修改配置文件中的端口号（比如Tomcat改8081，Apache改8080），记得同步更新前端和后端的访问路径。
• 部署出错时，可查看Tomcat日志文件tomcat/logs/catalina.out排查问题。

内容的提问来源于stack exchange，提问作者Salvatore Maruccio