angular - 将 Spring boot 服务器和 Angular CLI 应用程序集成到单个可执行文件中

Question

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

现在 Spring boot 单独运行，而 Angular CLI 单独执行(npm start)。

任何想法我都可以将两者集成到一个可执行文件中，例如 dist war 或其他东西，以便我可以启动并运行两者..

Answer 1

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

我集成它的方式如下:要在 Spring 中提供 Angular 服务，您需要使用 ng build --prod 构建项目，并将此处生成的所有文件复制到 Spring 中的静态文件夹中。尽管如此，您仍然需要调整路线，即定义 Angular 和 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 是非常无聊的。因此，非常需要使用 ngserve (当然，需要启动 spring 服务器)。由于 Angular cli 在 localhost:4200 上提供服务，而 spring 在 localhost:8080 上提供服务，因此您必须在地址之间创建代理(我猜您已经这样做了，但是在无论如何...)

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

   {“/api”:{“目标”:“http://localhost:8080”，“安全”:假}}

2. 接下来，在文件 package.json 中，将 "start": "ngserve" 替换为 "start": "ngserve - -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>

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

构建 Angular 并执行 spring 后。如果您使用的是 Maven，只需执行:mvn package。