将 Spring 引导服务器和 Angular CLI 应用程序集成到一个可执行文件中

Question

我设计了一个解决方案，其中包含 websocket 功能的 Spring Boot 应用程序从客户端接收套接字连接，同时也使用来自 Angular CLI 应用程序的 REST API 调用。

现在 Spring boot 单独运行，Angular CLI 单独执行（npm start）。

任何想法我都可以将两者集成到一个单一的可执行文件中，比如 dist war 或其他东西，这样我就可以同时启动并运行两者..

Answer 1

我有一个项目，它使用 Spring Boot 作为后端并在前端使用 Angular。我使用 Spring 提供角度服务。因此，可以根据需要生成.jar 或.war。

我的集成方式如下：要在spring中提供angular，你需要用ng build --prod构建你的项目，并将这里生成的所有文件复制到spring中的静态文件夹中。尽管如此，您需要调整路线，即定义角度和弹簧责任。

要调整路线，您可以包括以下配置：

@Configuration
public class AngularConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

      registry.addResourceHandler("/**/*")
        .addResourceLocations("classpath:/static/")
        .resourceChain(true)
        .addResolver(new PathResourceResolver() {
            @Override
            protected Resource getResource(String resourcePath,
                Resource location) throws IOException {
                Resource requestedResource = location.createRelative(resourcePath);
                return requestedResource.exists() && requestedResource.isReadable() ? requestedResource
                : new ClassPathResource("/static/index.html");
            }
        });
      
    }
}

在开发阶段，构建 Angular 非常无聊。因此，使用ng serve 是非常理想的（当然，在启动弹簧服务器的情况下）。由于 angular cli 在localhost:4200 上提供服务，在localhost:8080 上提供服务，你必须在地址之间建立一个代理（我猜你已经这样做了，但无论如何......）

1. 在项目根目录中，您必须包含一个名为 proxy.conf.json 的文件，其中包含：

   { "/api": { "目标": "http://localhost:8080", “安全”：假 } }

2. 接下来，在文件package.json 中，将"start": "ng serve" 替换为"start": "ng serve --proxy-config proxy.conf.json"

给你！它应该可以工作。

最后，复制和粘贴构建是非常无聊的。因此，如果您使用的是 maven，则可以在每次启动 spring 时包含一个规则来为您制定。把它放在你的pom.xml：

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                      <execution>
                          <id>copy-resources</id>
                          <phase>validate</phase>
                          <goals><goal>copy-resources</goal></goals>
                          <configuration>
                              <outputDirectory>${basedir}/src/main/resources/static/</outputDirectory >
                              <resources>
                                  <resource>
                                      <directory>${basedir}/../frontend/dist</directory >
                                  </resource>
                              </resources>
                          </configuration>
                      </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

当然，你应该根据你的项目设置路径。

在构建角度并执行弹簧之后。如果您使用的是 maven，只需执行以下操作：mvn package。