如何在cPanel上部署Angular+Spring Boot+MySQL价格表网站项目？

1. 配置MySQL数据库 #

cPanel自带MySQL管理工具，按以下步骤操作：

• 登录cPanel，找到MySQL Databases工具
• 创建新数据库：输入数据库名称（cPanel会自动添加你的主机用户名作为前缀，比如youruser_pricelist）
• 创建数据库用户：设置用户名和高强度密码，务必记录好数据库名、用户名、密码这三个信息
• 为用户分配数据库权限：将刚创建的用户添加到目标数据库，勾选ALL PRIVILEGES并保存
• 数据库连接主机默认是localhost，端口为3306，这些信息后续Spring Boot配置会用到

2. 部署Spring Boot后端 #

cPanel通常支持WAR包部署（基于Tomcat），先调整项目配置再打包：

2.1 调整Spring Boot项目配置 #

• 修改pom.xml（Maven项目），将打包方式改为WAR：

<packaging>war</packaging>

• 添加Tomcat依赖并设置为provided，避免与cPanel的Tomcat冲突：

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

• 修改启动类，继承SpringBootServletInitializer并重写configure方法，适配Servlet容器：

@SpringBootApplication
public class PricelistApplication extends SpringBootServletInitializer {
    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(PricelistApplication.class);
    }

    public static void main(String[] args) {
        SpringApplication.run(PricelistApplication.class, args);
    }
}

• 更新数据库配置：打开application.properties（或application.yml），填入之前记录的数据库信息：

spring.datasource.url=jdbc:mysql://localhost:3306/youruser_pricelist?useSSL=false&serverTimezone=UTC
spring.datasource.username=youruser_dbuser
spring.datasource.password=YourStrongDBPassword
spring.jpa.hibernate.ddl-auto=update # 根据需求选择create/update/validate等
spring.jpa.show-sql=true

2.2 打包并上传到cPanel #

• 本地执行Maven命令打包：mvn clean package -DskipTests，生成的WAR包在target目录下（比如pricelist-0.0.1-SNAPSHOT.war）
• 登录cPanel的File Manager，进入public_html目录（或创建子目录如backend存放后端文件）
• 上传WAR包到目标目录，右键选择Extract解压文件
• 若主机支持Setup Java App工具，也可以直接上传WAR包，设置上下文路径（比如/pricelist-api），这样后端接口访问地址为https://yourdomain.com/pricelist-api/xxx

3. 部署Angular前端 #

3.1 构建生产环境包 #

• 修改环境配置：打开src/environments/environment.prod.ts，将API地址改为后端的实际访问路径：

export const environment = {
  production: true,
  apiUrl: 'https://yourdomain.com/pricelist-api'
};

• 执行构建命令：Angular 12+用ng build --configuration production，旧版本用ng build --prod，构建后的静态文件会生成在dist/[your-project-name]目录下

3.2 上传到cPanel并配置路由 #

• 打开cPanel的File Manager，进入public_html目录（如果用子域名，进入对应子域名的根目录），将dist目录下的所有文件上传到这里
• 创建或修改.htaccess文件，解决Angular单页应用刷新404的问题：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

4. 测试与问题排查 #

• 先测试后端：访问后端健康检查接口（比如https://yourdomain.com/pricelist-api/actuator/health，需提前开启Actuator），确认接口正常响应
• 再测试前端：访问你的域名，检查页面是否加载正常，能否成功调用后端接口
• 若出现问题：
  • 查看cPanel的Errors日志（Metrics分类下）
  • 查看Spring Boot应用日志（如果用Setup Java App，日志在对应应用的日志目录中）
  • 核对数据库连接信息、用户权限是否正确，前后端跨域配置是否生效

内容的提问来源于stack exchange，提问作者Kamal Chehade