将 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 中的静态文件夹中。尽管如此，您需要调整路线，即定义角度和弹簧责任。

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

@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（当然，在 spring 服务器启动的情况下）。由于 Angular cli 在 onlocalhost:4200和 spring on 上提供服务localhost:8080，您必须在地址之间创建代理（我猜您已经这样做了，但无论如何......）

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

   { “/api”: { “目标”: “http://localhost:8080”, “安全”: false } }

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。