Angular2和Spring Boot.如何为前端服务? [英] Angular2 and Spring Boot. How to serve front-end?

问题描述

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

I have Spring Boot as back-end and Angular2 as front-end. I want to develop both of them separately and deploy onto Heroku.

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

They shouldn't have any common dependencies and should be in separate git-repos.

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

As I understand, there are two main ways to implement:

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

1. run npm build and copy dist folder into resource folder of Spring application so last will handle it as a static content

运行服务器以专门为Angular应用程序提供服务，该服务器将与Spring应用程序进行通信(此处会出现CORS问题?)，因此总共有两台服务器

run server for serving exclusively Angular app which will communicate with Spring app (CORS problem appears here?) so there are two servers at sum

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

I think first way is a bit "dirty" since I do not think that copy folder from one project to another is any good.

第二种方法是过度使用，因为我有两个服务器(例如，Tomcat和Node.js).如果我可以简单地将Angular放在Spring内，为什么要安装带有Angular应用程序的服务器?

And second way is overkill because I have two servers (Tomcat and Node.js, for example). Why should I have server with Angular app if I can simply put Angular inside Spring?

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

Is there is any more rightful way to make aforementioned?

谢谢.

推荐答案

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

In my organization, we have a lot of Spring Boot and Angular apps. When two servers are unnecessary, Spring Boot can serve up the static content from any supported URL (such as "http:" or "file:"). Simply pass this argument to your app on startup:

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

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

Spring Boot can also support Angular single-page app routing by including the following web MVC configuration. This ensures that even if the user refreshes the page in the browser, Spring Boot will still serve up the contents of index.html for other angular routes.

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;
                }
            }
        }
    }
}

这篇关于Angular2和Spring Boot.如何为前端服务?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！