Angular2 i Spring Boot. Jak obsługiwać front-end?

Question

Posiadam Spring Boot jako back-end i Angular2 jako front-end. Chcę rozwijać je oddzielnie i wdrożyć na Heroku.

Nie powinny mieć żadnych wspólnych zależności i powinny znajdować się w osobnych plikach git-repos.

Jak rozumiem, istnieją dwa główne sposoby wdrożenia:

1. run npm build i skopiuj dist folder do resource folderze Spring aplikacji więc ostatni będzie obsługiwać go jako statyczny

2. run serwer do obsługi wyłącznie aplikacji Angular, która będzie komunikować się z aplikacją Spring (pojawia się tutaj problem CORS?), więc istnieją dwa serwery na sumę

Myślę, że pierwszy sposób jest trochę "brudny", ponieważ nie sądzę, że folder kopii z jednego projektu do drugiego jest dobry.

Drugi sposób to przesada, ponieważ mam dwa serwery (na przykład Tomcat i Node.js). Dlaczego powinienem mieć serwer z aplikacją Angular, jeśli mogę po prostu wstawić Angular do wnętrza Spring?

Czy jest jakikolwiek inny słuszny sposób, aby to zrobić?

Dzięki.

Answer 1

w mojej organizacji, mamy mnóstwo wiosennego Boot i kątowe aplikacji. Gdy dwa serwery są niepotrzebne, Spring Boot może obsłużyć statyczną zawartość z dowolnego obsługiwanego adresu URL (np. "Http:" lub "file:"). Wystarczy zdać ten argument w swojej aplikacji na starcie:

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

Wiosna Boot może również wspierać kątowa pojedynczej strony App routing poprzez włączenie następującą konfigurację internetową MVC. Zapewnia to, że nawet jeśli użytkownik odświeży stronę w przeglądarce, Spring Boot nadal będzie wyświetlał zawartość index.html dla innych tras kątowych.

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

Do tej pory tworzyłem aplikacje z kątowym i sprężynowym bootowaniem, używając jednego repozytorium git, ale dwa różne projekty maven, jeden dla backendu, drugi dla frontendu.

Z Mavenem skonstruowałem jeden słoik z osadzonym Tomcat i wdrożyłem go w Amazon EC2.

Eksperymentowałem również z Heroku i mógłbyś z pewnością zainstalować tam ten sam słoik.

Dla następnego projektu chciałbym zastosować inne podejście i wdrożyć wszystkie zasoby statyczne, takie jak html, javascript itp. Do Amazon S3 i tylko aplikację Spring-Boot do dostawcy takiego jak Heroku.

Rozmieszczenie frontendów w ten sposób wydaje się dużo łatwiejsze, szybsze i tańsze.

Istnieje również blogu o Using AWS S3 to Store Static Assets and File Uploads

Answer 3

Wariant 1 jeden proces serwera API gospodarzem odpoczynku i kolejny proces serwera hostingu kątowa UI

Ta opcja jest zalecana opcja w ciągu MicroServices architektura gdzie poszczególne API (lub mały związane oparciu grupa interfejsów API) są uruchamiane i skalowane oddzielnie poprzez hostowanie ich w oddzielnych procesach serwera. W takich sytuacjach, jeśli Angularny interfejs użytkownika jest również połączony z interfejsami API REST, oznacza to, że każda poprawka lub rozszerzenie w interfejsie Angular wymagałoby przebudowy i przeniesienia usług. A kiedy zaczniemy to robić, to pokonamy cel architektury opartej na Microservices.

Dlatego w takiej architekturze jedna lub więcej instancji serwera będzie obsługiwać wyłącznie interfejs Angular. Angularny interfejs użytkownika z kolei wywoływałby poszczególne interfejsy API za pośrednictwem bramy API przy użyciu mechanizmu wykrywania usług. Architektura oparta na mikroserwisach nie jest jednak trywialna - jest skomplikowana i zawiera wiele ruchomych części. Taki poziom złożoności można uzasadnić w przypadku dużych projektów.

Opcja 2 Jeden proces serwera hostingu zarówno REST API i kątowe UI

Ta opcja jest zalecana opcja dla małych i średnich projektów, w których baza użytkowników jest kilkuset użytkowników.

W takich projektach utwórz pojedyncze repozytorium, w którym projekt Maven będzie zawierał dwa podmoduły - jeden dla interfejsów REST API i drugi dla interfejsu Angular.

Użyj wtyczki Maven "frontend-maven-plugin", aby zbudować część interfejsu. Spowoduje to automatyczne pobranie określonej wersji NodeJs i wywołanie odpowiednich poleceń npm w celu zbudowania projektu Angular. Na koniec, używając elementu Maven, skopiuj folder Angular dist do folderu statycznego Spring Boot w folderze resources. (W pliku .gitignore wyklucz folder statyczny, aby pliki dystrybucji kątowej nie były zaznaczone w elemencie źródłowym razem z interfejsami API usług REST).

Teraz, po uruchomieniu kompilacji Java, automatycznie dołącza się do niej folder statyczny, który będzie teraz obsługiwał zarówno interfejsy API, jak i interfejs Angular.