node.js - Angular2 和 Spring Boot。如何服务前端？

Question

我将 Spring Boot 作为后端，将 Angular2 作为前端。我想分别开发它们并部署到 Heroku。

它们不应该有任何共同的依赖关系，应该在单独的 git-repos 中。

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

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

2. 运行服务器以专门为 Angular 应用程序提供服务，它将与 Spring 应用程序通信(这里出现 CORS 问题？)所以总共有两个服务器

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

第二种方法有点矫枉过正，因为我有两个服务器(例如，Tomcat 和 Node.js)。如果我可以简单地将 Angular 放入 Spring 中，为什么我应该使用带有 Angular 应用程序的服务器？

有没有更正经的方式来制作上述内容？

谢谢。

Answer 1

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

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

Spring Boot 还可以通过包含以下 Web MVC 配置来支持 Angular 单页应用程序路由。这确保即使用户在浏览器中刷新页面，Spring Boot 仍会为其他 Angular 路由提供 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;
                }
            }
        }
    }
}