Angular2和Spring Boot。如何爲前端服務？

我有Spring Boot作爲後端，Angular2作爲前端。我想分別開發它們並部署到Heroku。Angular2和Spring Boot。如何爲前端服務？

他們不應該有任何共同的依賴，應該在單獨的git-repos。

根據我的理解，存在實現方式主要有兩種：

運行npm build和dist文件夾複製到Spring應用程序，以便最後將處理它作爲一個靜態內容
運行resource文件夾服務器專門服務Angular應用程序將與Spring應用程序通信（CORS問題出現在這裏？）所以有兩個服務器總和

我覺得第一種方式有點「髒」，因爲我不認爲從一個項目到另一個項目的複製文件夾是好的。

第二種方法是過度殺毒，因爲我有兩臺服務器（例如Tomcat和Node.js）。爲什麼我應該有Angular應用程序服務器，如果我可以簡單地把Angular內Spring？

是否還有更正確的方法來提出上述問題？

謝謝。

來源

2017-01-29 user2138356

在我的組織，我們有很多的春天引導和角度的應用程序。當不需要兩臺服務器時，Spring Boot可以從任何支持的URL（例如「http：」或「file：」）提供靜態內容。只需將此參數傳遞給您的應用程序在啓動時：

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

春季啓動也可以通過包括以下Web MVC框架的配置角度支持單頁的應用程序的路由。這確保即使用戶刷新瀏覽器中的頁面，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; 
       } 
      } 
     } 
    } 
}

來源

2017-01-30 22:20:07

'application.properties'屬性就是我所需要的。謝謝，會嘗試。 – user2138356

到目前爲止，我使用一個git存儲庫創建了角度和彈簧引導的應用程序，但兩個不同的maven項目，一個用於後端，一個用於前端。

有了Maven，我用一個嵌入式Tomcat構建了一個胖jar並將其部署到Amazon EC2。

我也試驗過Heroku，你可以肯定在那裏部署相同的脂肪罐。

對於下一個項目，我會採取另一種方法並將所有靜態資源（如html，javascript等）部署到Amazon S3，並且只將spring-boot應用程序部署到像heroku這樣的提供程序。

這種方式的前端部署似乎更容易，更快，更便宜。

還有一個博客帖子大約Using AWS S3 to Store Static Assets and File Uploads

來源

2017-01-30 22:11:39

第一種方法我不喜歡個人。將maven包含在葉狀端......不。我不希望前端開發人員對Maven有所瞭解。第二種方式很不錯。 – user2138356

選項1 一個服務器進程託管REST API和託管角UI

此選項是在微服務，推薦選擇基礎的架構，其中個別的API（或小有關其它服務器進程通過將它們託管在單獨的服務器進程中來分別運行和縮放。在這種情況下，如果Angular UI也與REST API捆綁在一起，這意味着在Angular UI中的每個bug修復或增強都需要重新構建和重新部署服務。當我們開始這樣做的時候，它會打敗微服務架構的目的。

因此，在這樣的體系結構中，一個或多個服務器實例將僅託管Angular UI。 Angular UI將依次使用某種服務發現機制通過API網關調用各個API。然而，基於微服務的架構並不是微不足道的 - 它有很多移動部件。對於大型項目而言，這種複雜程度是合理的。

選項2 一個服務器進程同時承載REST API和UI角

此選項爲小到中等規模的項目，其中的用戶羣是幾百個用戶的推薦選項。

在這樣的項目中，創建一個Maven項目將包含兩個子模塊的庫 - 一個用於REST API，另一個用於Angular UI。

使用Maven插件「frontend-maven-plugin」構建UI部件。這將自動下載指定的NodeJs版本並調用適當的npm命令來構建Angular項目。最後，使用Maven元素將Angular dist文件夾複製到資源文件夾下的Spring Boot靜態文件夾中。（在.gitignore文件中排除靜態文件夾，以便角度分佈文件不會與REST API一起檢入到源代碼控制中）。

現在，隨着Java構建的啓動，它會自動在胖jar包中包含靜態文件夾，該jar文件現在可以提供API和Angular UI。

來源

2018-02-11 07:08:40

Angular2和Spring Boot。如何爲前端服務？

回答

相關問題