Angular2和Spring Boot。如何服务前端？

Question

我有Spring Boot后端和Angular2前端。我想分别开发它们并部署到Heroku。

它们不应具有任何公共依赖性，并且应位于单独的git-repos中。

据我了解，主要有两种实现方式：

1. 运行npm build并将dist文件resource夹复制到Spring应用程序的文件夹中，以便最后将其作为静态内容处理

2. 运行专门为Angular应用服务的服务器，它将与Spring应用进行通信（CORS问题出现在这里？），因此总共有两台服务器

我认为第一种方法有点“肮脏”，因为我认为将文件夹从一个项目复制到另一个项目并不好。

而第二种方式是矫枉过正，因为我有两个服务器（Tomcat和Node.js，例如）。为什么我要与服务器Angular应用程序，如果我可以简单地把Angular里面Spring？

还有其他更合理的方法可以做上述事情吗？

谢谢。

Answer 1

在我的组织中，我们有很多Spring Boot和Angular应用程序。当不需要两个服务器时，Spring Boot可以从任何受支持的URL（例如“
http：”或“ file：”）提供静态内容。只需在启动时将此参数传递给您的应用即可：

--spring.resources.static-locations=<url>

通过包含以下Web MVC配置，Spring Boot还可以支持Angular单页应用程序路由。这样可以确保即使用户刷新浏览器中的页面，Spring
Boot仍将为其他角度路由提供index.html的内容。

public class SinglePageAppWebMvcConfigurer extends WebMvcConfigurerAdapter
{
    @Autowired
    private ResourceProperties resourceProperties;

    private String apiPath = "/api";

    public SinglePageAppWebMvcConfigurer()
    {
    }

    public SinglePageAppWebMvcConfigurer(String apiPath)
    {
        this.apiPath = apiPath;
    }

    protected String getApiPath()
    {
        return apiPath;
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry)
    {
        registry.addResourceHandler("/**")
            .addResourceLocations(resourceProperties.getStaticLocations())
            .setCachePeriod(resourceProperties.getCachePeriod()).resourceChain(true)
            .addResolver(new SinglePageAppResourceResolver());
    }

    private class SinglePageAppResourceResolver extends PathResourceResolver
    {
        @Override
        protected Resource getResource(String resourcePath, Resource location) throws IOException
        {
            Resource resource = location.createRelative(resourcePath);
            if (resource.exists() && resource.isReadable()) {
                return resource;
            } else if (getApiPath() != null && ("/" + resourcePath).startsWith(getApiPath())) {
                return null;
            } else {
                LoggerFactory.getLogger(getClass()).info("Routing /" + resourcePath + " to /index.html");
                resource = location.createRelative("index.html");
                if (resource.exists() && resource.isReadable()) {
                    return resource;
                } else {
                    return null;
                }
            }
        }
    }
}