Angular 和 Spring Boot 没有绑定在一起，因此它们在同一个端口 8080 上运行

Question

我的 Angular 在 4200 端口上运行，而我的弹簧靴在 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（单页应用程序）捆绑在一个可部署的单元中。根据您的包装，这个可部署的单元最终将成为战争或罐子。假设您已经弄清楚了所有这些机制，以下是实现目标的方法：

1. 首先确保正确构建了 AngularJS SPA，它确实生成了您的 index.html、css 和 js 文件以及任何其他资产。最简单（并且会很方便）是使用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 和其他资产。这是完成的第一步。如果您已经正确地做到了这一点，那么您刚刚生成的 SPA jar 可以作为依赖项添加到 Spring Boot 应用程序中。

1. 接下来在你的Spring Boot App的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。