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

问题描述

我的角度在 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 上运行

标签： javaspringangularspring-boot

您希望将 Spring Boot 应用程序和 Angular SPA（单页应用程序）捆绑在一个可部署的单元中。根据您的包装，这个可部署的单元最终将成为战争或罐子。假设您已经弄清楚了所有这些机制，以下是实现目标的方法：

首先确保正确构建了 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，这样static在target\classes. 在该static文件夹中，您将看到您的index.html资产和其他资产。这是完成的第一步。如果您已经正确地做到了这一点，那么您刚刚生成的 SPA jar 可以作为依赖项添加到 Spring Boot 应用程序中。

pom.xml接下来在Spring Boot App中添加刚刚生成的上述模块的依赖项。

接下来，您需要告诉 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");
    }
}

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

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

问题描述

解决方案

推荐阅读