java - Angular 和 spring boot 没有绑定(bind)在一起，所以它们在同一个端口 8080 上运行

Question

我的 Angular 在 4200 端口上运行，而我的 Spring Boot 在 8080 端口上运行。在这里，我通过 ng build --prod 构建了 Angular 项目，并生成了 dist 文件夹。它们位于 eclipse-workspace 内的同一目录中

我在 pom.xml 文件中添加了插件

<plugin>
    <artifactId>maven-resources-plugin</artifactId>
    <executions>
          <execution>
              <id>copy-resources</id>
              <phase>validate</phase>
              <goals><goal>copy-resources</goal></goals>
              <configuration>
                  <outputDirectory>${basedir}/target/classes/static/</outputDirectory >
                  <resources>
                      <resource>
                          <directory>${basedir}/../Angular6SpringBoot-Client/dist/Angular6SpringBoot</directory >
                      </resource>
                  </resources>
              </configuration>
          </execution>
    </executions>
</plugin>

dist 文件夹内有:

我已经在 eclipse 中更新了项目，还清理并构建了项目，当我运行项目时，输出没有出现在 localhost:8080 中，因为它显示:

我需要整合angular和spring项目，并运行在8080端口

Answer 1

您希望将 Spring Boot 应用程序和 Angular SPA(单页应用程序)捆绑在一个可部署单元中。根据您的包装，这个可部署单元最终会变成 war 或 jar 。假设您已了解所有这些机制，下面是如何实现您的目标:

1. 首先确保 AngularJS SPA 构建正确，它会生成您的 index.html、css 和 js 文件以及任何其他 Assets 。最简单(也很方便)是使用 frontend-maven-plugin。以下是示例 pom.xml 的一部分:

   <artifactId>xxxxx</artifactId>
   <name>Angular UI</name>
   <description>Some AngularJS UI project</description>
   <packaging>jar</packaging>
   
   <build>
       <plugins>
           <plugin>
               <groupId>com.github.eirslett</groupId>
               <artifactId>frontend-maven-plugin</artifactId>
               <version>1.6</version>
               <configuration>
                   <nodeVersion>v7.10.1</nodeVersion>
                   <npmVersion>4.2.0</npmVersion>
                   <installDirectory>nodejs</installDirectory>
               </configuration>
               <executions>
   
                   <execution>
                       <id>Install node and npm if needed</id>
                       <goals>
                           <goal>install-node-and-npm</goal>
                       </goals>
                       <phase>validate</phase>
                   </execution>
   
                   <execution>
                       <id>List current node and npm config</id>
                       <goals>
                           <goal>npm</goal>
                       </goals>
                       <phase>validate</phase>
                       <configuration>
                           <arguments>run config</arguments>
                       </configuration>
                   </execution>
   
                   <execution>
                       <id>Install all node packages requested by this app</id>
                       <goals>
                           <goal>npm</goal>
                       </goals>
                       <phase>validate</phase>
                       <configuration>
                           <arguments>install</arguments>
                       </configuration>
                   </execution>
   
                   <execution>
                       <id>Run tests</id>
                       <goals>
                           <goal>npm</goal>
                       </goals>
                       <phase>test</phase>
                       <configuration>
                           <arguments>run test</arguments>
                       </configuration>
                   </execution>
   
                   <execution>
                       <id>Build distributable</id>
                       <goals>
                           <goal>npm</goal>
                       </goals>
                       <configuration>
                           <arguments>run deploy:prod</arguments>
                       </configuration>
                   </execution>
   
               </executions>
           </plugin>
   
           <plugin>
               <groupId>org.apache.maven.plugins</groupId>
               <artifactId>maven-resources-plugin</artifactId>
               <version>3.0.2</version>
               <configuration>
                   <nonFilteredFileExtensions>
                       <nonFilteredFileExtension>woff</nonFilteredFileExtension>
                       <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
                       <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
                       <nonFilteredFileExtension>eot</nonFilteredFileExtension>
                       <nonFilteredFileExtension>swf</nonFilteredFileExtension>
                       <nonFilteredFileExtension>ico</nonFilteredFileExtension>
                       <nonFilteredFileExtension>png</nonFilteredFileExtension>
                       <nonFilteredFileExtension>svg</nonFilteredFileExtension>
                       <nonFilteredFileExtension>jpg</nonFilteredFileExtension>
                       <nonFilteredFileExtension>jpeg</nonFilteredFileExtension>
                   </nonFilteredFileExtensions>
               </configuration>
           </plugin>
       </plugins>
       <resources>
           <resource>
               <directory>dist</directory>
               <targetPath>static</targetPath>
               <filtering>true</filtering>
           </resource>
       </resources>
   </build>
   

您可以以上述为例，根据自己的需要量身定制。但结果应该是，这应该会生成一个 jar，使得 target\classes 下有一个 static 文件夹。在该 static 文件夹中，您会看到您的 index.html 和其他 Assets 。这是完成的第一步。如果您已经正确地做到了这一点，那么您刚刚生成的 SPA jar 可以作为依赖项添加到 Spring Boot 应用程序中。

1. 接下来在您的 Spring Boot 应用程序的 pom.xml 中添加您刚刚生成的上述模块的依赖项。

2. 接下来您需要告诉 Spring Boot 如何定位 index.html 以响应对 / 的请求。为此，您可以添加一个配置类，如下所示。

   @Configuration
   @Order(Ordered.HIGHEST_PRECEDENCE)
   public class YourWebConfiguration extends WebMvcConfigurerAdapter{
   
       @Override
       public void addViewControllers(ViewControllerRegistry registry) {
           registry.addViewController("/").setViewName("forward:index.html");
       }
   }
   

3. 现在您可以使用 mvn spring-boot:run 启动您的 Spring Boot 应用程序。我们还假设您的服务器端口是 8080。现在将您的浏览器指向 http://localhot:8080/。您将在浏览器中看到您的 index.html。