角靴和弹簧靴未绑定在一起，因此它们在同一端口8080上运行 [英] Angular and spring boot are not binding together so they run on same port 8080
问题描述
我的angular在4200端口上运行，而我的弹簧靴在8080端口上运行.在这里，我已经通过ng build --prod生成了角度项目，并生成了dist文件夹.并且它们位于eclipse-workspace内部的同一目录中
my angular is running on 4200 port and my spring boot is running in 8080 port. Here I have build the angular project by ng build --prod and dist folder is produced. and they are in same directory inside eclipse-workspace
我在pom.xml文件中添加了插件
And i have added plugin inside the pom.xml file as
<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文件夹中是:
Inside the dist folder is:
我已经在eclipse中更新了该项目，还清理并构建了该项目，当我运行该项目时，输出却没有显示在localhost:8080中:
i have updated the project inside eclipse and also cleaned and build the project and when i run the project the output is not coming in localhost:8080 as it shwows:
我需要集成角度和弹簧项目并在端口8080上运行
I need to integrate both angular and spring project and run at port 8080
推荐答案
您想将Spring Boot应用程序和Angular SPA(单页应用程序)捆绑在一个可部署的单元中.根据您的包装，这个可部署单位最终将成为战争或罐子.假设您已经掌握了所有这些机制，那么以下是实现目标的方法:
You are wanting to bundle the Spring Boot app and the Angular SPA (single page app) in a single deployable unit. This deployable unit will finally become a war or a jar depending on your packaging. Assuming you have all these mechanics figured out, here's how to go about meeting your objectives:
-
首先确保正确构建了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应用程序中.
You can use the above as an example and tailor for your own needs. But the resoult should be that, this should produce a jar such that there is a static folder under target\classes. In that static folder you would see your index.html and other assets. This is the first step to complete. If you have gotten this far correctly, your SPA jar that you just produced, can be added as a dependency in a Spring Boot application.
-
接下来，在Spring Boot应用程序的
pom.xml中添加刚刚生成的上述模块的依赖项.
Next add the dependency of the above module you just produced in the
pom.xmlof your Spring Boot App.
接下来，您需要告诉Spring Boot如何找到index.html以响应对/的请求.为此，您可以添加如下的配置类.
Next you need to tell Spring Boot how to locate the index.html in response to requests for /. For this, you can add a configuration class as follows.
@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 .
Now you could start your Spring Boot app let's say using mvn spring-boot:run. Let's also assume that your server port is 8080. Now point your browser to http://localhot:8080/. You will see your index.html in the browser.
这篇关于角靴和弹簧靴未绑定在一起，因此它们在同一端口8080上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
