Question

我的angular在4200端口上运行，而我的弹簧靴在8080端口上运行。在这里，我已经通过ng build --prod构建了角度项目，并生成了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中：

我需要集成角度和弹簧项目并在端口8080上运行

Answer 1

您想将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应用程序中。

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

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

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

角靴和弹簧靴未绑定在一起，因此它们在同一端口8080上运行

1 个答案: