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

Question

我的后端是Spring Boot，前端是Angular2 .我想分别开发它们，并将它们部署到Heroku上。

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

据我所知，有两种主要的实施方式：

1. 运行npm build并将dist文件夹复制到Spring应用程序的resource文件夹中，以便最后将其作为静态内容处理
2. 运行服务器专为Angular应用提供服务，该应用程序将与Spring应用程序通信(CORS问题出现在这里吗？)所以总共有两台服务器

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

第二种方法是过分的，因为我有两个服务器(例如Tomcat和Node.js )。如果我可以简单地将Angular放在Spring中，为什么我要使用Spring应用程序来提供服务器？

还有什么更合理的方法来做上述的事情吗？

谢谢。

Answer 1

在我的组织里，我们有很多Spring和角应用程序。当没有必要使用两个服务器时，Spring可以从任何受支持的URL (如"http:“或”file：：“)中提供静态内容。只需在启动时将此参数传递给应用程序：

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

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

Answer 2

选项1一个服务器进程承载REST，另一个服务器进程承载角度UI

此选项是基于MicroServices的体系结构中的推荐选项，在该体系结构中，通过将单个API(或与之相关的小组API)单独运行和扩展到单独的服务器进程中。在这种情况下，如果角UI也与REST捆绑在一起，就意味着每个错误修复或增强都需要重新构建和重新部署您的服务。当我们开始这样做的时候，它就会违背基于微服务的体系结构的目的。

因此，在这样的体系结构中，一个或多个服务器实例将只承载角UI。角度UI将使用某种服务发现机制通过API网关调用各个API。然而，基于微服务的体系结构并不简单--它具有许多移动部件的复杂性。对于大型项目来说，这样的复杂程度是合理的。

选项2托管REST和用户界面的一个服务器进程

对于用户基数为几百个的中小型项目，此选项是推荐的选项。

在这些项目中，创建一个单独的存储库，其中一个Maven项目将包含两个子模块-一个用于REST，另一个用于角度UI。

使用Maven插件“前端-maven- plugin”构建UI部件。这将自动下载指定的NodeJs版本，并调用适当的npm命令来构建角项目。最后，使用Maven元素将角dist文件夹复制到资源文件夹下的Spring静态文件夹。(在.gitignore文件中，排除静态文件夹，这样就不会将角分布文件与REST一起签入源代码控制中)。

现在，当Java构建开始时，它将自动将静态文件夹包含在fat jar中，这个文件夹现在将同时服务于API和角度UI。

Answer 3

到目前为止，我使用一个git存储库创建了带有角引导和spring引导的应用程序，但是使用了两个不同的maven项目，一个用于后端，一个用于前端。

使用Maven than，我用嵌入式Tomcat构建了一个胖jar，并将其部署到亚马逊EC2。

我也用Heroku做了实验，你当然可以在那里部署同样的脂肪罐。

对于下一个项目，我将采取另一种方法，将所有静态资源(如html、javascript等)部署到Amazon上，而只将spring引导应用部署到像heroku这样的提供者。

这种方式的前端部署似乎要容易得多，速度更快，成本更低。

还有一篇关于使用AWS S3存储静态资产和文件上载的博客文章