Spring 4.3.12.RELEASE中REST API与ngx-admin WebApp同项目部署咨询

Hey there! Let's walk through how to set up and deploy your combined Spring REST API + ngx-admin WebApp project, even if you haven't had formal Spring training yet. I'll break this down into clear, actionable steps.

1. 调整项目结构（关键！） #

First, let's align your project structure with Spring's conventions so it can automatically pick up your WebApp resources. Here's the recommended layout:

your-project/
├── src/
│   ├── main/
│   │   ├── java/
│   │   │   └── com/yourcompany/yourapp/  # 存放你的Spring REST API代码
│   │   ├── resources/
│   │   │   ├── static/           # Spring默认的静态资源目录
│   │   │   │   └── dist/         # 把ngx-admin编译后的dist文件夹移到这里
│   │   │   └── application.properties  # Spring核心配置文件
│   └── test/
└── pom.xml (Maven) / build.gradle (Gradle)

Why this structure? Spring automatically serves static content from the static directory, so moving your dist here eliminates most path-related headaches.

2. Spring 静态资源与API路径配置 #

Next, configure Spring to properly serve your WebApp and avoid conflicts between static resources and API endpoints.

Option 1: 使用application.properties配置 #

Add these lines to src/main/resources/application.properties:

# 告诉Spring去哪里找WebApp的静态资源
spring.web.resources.static-locations=classpath:/static/dist/
# 给API设置前缀，避免和静态资源路径冲突（所有API都以/api开头）
server.servlet.context-path=/api

Option 2: 使用Java配置类（更灵活） #

If you prefer Java-based config, create a WebConfig class in your Java source directory:

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 映射所有请求到dist目录下的静态资源
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/static/dist/");
    }
}

3. 修正ngx-admin的资源引用路径 #

Your current index.html references resources with resources/inline.bundle... — this won't work with the new structure. Fix this in one of two ways:

重新编译ngx-admin（推荐） #

When building your ngx-admin project, use this command to set the correct base path:

ng build --prod --base-href="/"

This generates an index.html where all resource paths are relative to the root (e.g., <script src="inline.bundle.js">), which Spring can resolve correctly from the static/dist directory.

手动修改已编译的index.html #

If you can't recompile, edit the index.html inside dist:
Change all instances of resources/inline.bundle... to just inline.bundle... (remove the resources/ prefix). For example:

<!-- 之前的写法 -->
<script type="text/javascript" src="resources/inline.bundle.xxxx.js"></script>
<!-- 修改后 -->
<script type="text/javascript" src="inline.bundle.xxxx.js"></script>

4. 编写你的REST API #

Even without deep Spring knowledge, writing a basic REST endpoint is straightforward. Here's a simple example:

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Arrays;
import java.util.List;

@RestController
@RequestMapping("/users")
public class UserController {
    // 访问路径：http://localhost:8080/api/users
    @GetMapping
    public List<String> getAllUsers() {
        return Arrays.asList("Alice", "Bob", "Charlie");
    }
}

With the server.servlet.context-path=/api config, this endpoint will be accessible at /api/users.

5. 部署方案 #

本地开发测试 #

• 启动你的Spring Boot应用（运行带有@SpringBootApplication注解的主类）。
• 在浏览器访问http://localhost:8080 — 就能看到你的ngx-admin WebApp。
• 在Angular代码中调用API时，使用完整的相对路径。比如在Angular服务中：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}

  getUsers() {
    // 匹配Spring的API路径
    return this.http.get('/api/users');
  }
}

这里不会有跨域问题，因为前端和后端从同一个端口提供服务。

生产部署 #

方式1：打包成可执行Jar（最简便）

• Maven：运行mvn clean package — 在target目录生成jar文件。
• Gradle：运行gradle bootJar — jar文件在build/libs目录。
• 部署时执行：java -jar your-project-name.jar
• 应用启动后，可通过http://your-server-ip:8080访问。

方式2：部署到Tomcat（War包）

• 如果需要部署到传统Tomcat服务器：
  1. 在pom.xml中修改打包方式为war：<packaging>war</packaging>
  2. 运行mvn clean package生成war文件。
  3. 将war文件复制到Tomcat的webapps目录。
  4. 启动Tomcat — 应用可通过http://your-server-ip:8080/your-project-name访问（路径与war文件名一致）。

常见问题排查 #

• 静态资源404: 检查dist是否在src/main/resources/static目录下，以及Spring配置是否指向正确位置。
• API调用失败: 确认Angular代码中的API路径与Spring控制器的@RequestMapping加上server.servlet.context-path一致。
• 页面加载但样式/脚本缺失: 确保index.html中的资源路径正确（没有多余的resources/前缀）。

内容的提问来源于stack exchange，提问作者Enrique Lopez