2016-08-24 3 views
1

저는 꽤 큰 Spring MVC + AngularJS 앱을 가지고 있습니다. 스프링 MVC는 주로 REST API로 작동하지만 완전히 개발되지는 않았지만 (보안, 일부 라우팅, Wro4j 리소스 패키징) 웹 프로젝트를 처음 시작한 시점에서 많은 경험을하지 못했습니다.Spring MVC AngularJS 백 엔드가있는 별도의 프런트 엔드

응용 프로그램이 Amazon Elasticbeanstalk에 배포되었습니다.

프런트 엔드 사용자가 나를 참여시키고 우리는 어떻게 든 dev 프로세스를 분리해야합니다.

Qeustions

은 다음과 같습니다

  1. 내가이 애플 리케이션으로 그들을 분리 할 수있는 기본 단계는 무엇입니까?

  2. 배포 프로세스 란 무엇입니까? 프런트 엔드/백 엔드가 별도의 앱으로 배포되어야합니까?

  3. 일반적으로 모범 사례에 대한 조언이 있습니까?

답변

-1

"MVC"는 Model View Controller를 나타냅니다. "보기"는 html 또는 jsp 일 수 있습니다 (서블릿에서보기 세부 사항을 지정합니다). 별도로 배포 할 필요는 없습니다. 어떻게 프로젝트를 구축하고 있습니까? Maven은 좋은 생각입니다. 모든 프론트 엔드 및 백엔드 코드를 war/jar 파일로 래핑 한 다음 서버에 배치해야합니다.

귀하의 AngularJS 코드는 봄 "보기"에 통합되며 JS의 일부는 app.js에 있습니다. 따라서 별도로 유지할 필요가 없습니다. 프런트 엔드 사용자는 프런트 엔드 코드를 작성할 수 있으며 빌드하고 배포하기 전에 프런트 엔드 코드를 프로젝트에 통합해야합니다.

그러나 절대적으로 분리해야하는 경우 생각할 수있는 옵션은 하나뿐입니다. war 파일과 함께 Tomcat의 "webapp"폴더에 폴더 (모든 내용은 프로젝트 '라고 부름)에 모든 UI 코드 (HTML, CSS, JS)를 넣으십시오 (project-war.war) . 배포 할 때 URL이 올바르게 매핑되어 있는지 확인하면됩니다. 예를 들어 app.js (project/js/app.js에 있음)가 /controller/action의 Java 서비스를 호출하려는 경우 URL은 ../../../project-war/controller/action이어야합니다.

당신이/스프링 MVC를 실행 바람둥이에서 포스트 데이터를 얻을, 노드 또는 라이트 서버 나 아파치에 프론트 엔드 프로젝트를 배포 할 수 있습니다
+1

죄송합니다,하지만 내 질문은 분리에 대해이었다. 나는이 단계에서 분리하는 것이 더 낫다는 것을 안다. 더 - 더 혼란. 당신의 대답은 전혀 대답하지 않습니다. – user1935987

+0

진심으로, 당신은 방금 Spring + AngularJS 앱을 만드는 것에 대해 이야기하고 있습니다. 그리고 이것은 질문이 아닙니다. 그러면 답을 삭제하면됩니다. – user1935987

+0

와우, @ user1935987. 도움을 많이 주려고합니다. 나는 아직도 내 대답을 남겨 둘 것이다. – javaGirl243

0

, 당신은 도메인 간 문제가있을 수 있습니다, 당신은에

<mvc:cors> <mvc:mapping path="/**" /> </mvc:cors>

을 사용할 수 있습니다 도메인 간 문제를 해결하십시오.

+0

또한 완전한 대답이 아닙니다. – user1935987

2

응용 프로그램이 매우 크고 백엔드 빌드가 많은 시간 (10 분 이상)이 걸리거나 좋은 이유가있을 때마다 모든 응용 프로그램을 다시 작성하지 않으려는 경우 별도로 배포해야한다고 생각합니다. . Spring MVC에서 angularJS 응용 프로그램을 사용하더라도 스프링 페이지를 사용하면 스프링 생태계, 중앙 집중식 보안, 로그인 및 액세스 제어, SSO, 많은 통합, 봄철 사회 등을 사용할 수 있습니다. 정말 필요한지 확실하지 않습니다. 그들을 2 개의 앱으로 나눕니다. 하지만 어쨌든.

1) angularJS 앱을 분리하려면 컨트롤러 또는 jsp 파일에서 angularjs 앱으로 라우팅에 대한 모든 로직을 이동해야합니다. 토큰 기반 인증/로그인을 구현하십시오.그런 다음 REST_BASE_URL을 일정한 각도 블록으로 정의하고 모든 URL ($ http, $ resource)을 사용하여 요청 URL을 생성 할 수 있습니다. 기본적으로 각도 부분에서 작업하는 경우 원격 서버에서 백엔드를 설정하고 nginx 또는 작은 서버를 사용하여 각도 애플리케이션 만 로컬로 실행할 수 있으며 Google Crome에서 작업합니다 (이 도구를 사용하여 크롬을 실행하십시오 : --args --disable- 웹 보안 - 사용자 - 데이터 - 디렉토리/). 불행히도 Firefox에서는 CSRF 확인을 비활성화 할 수 없습니다.

2) 2 개의 앱을 별도로 빌드하고 배포 할 수있어 좋을 것입니다.

3) 당신은 또한 자신의 AuthenticationEntryPoint를을 만들고 스프링 나머지 대신 로그인 페이지의) SC_UNAUTHORIZED (401 반환해야합니다. 각 측이이 같은 로그인 페이지 또는 대화 상자 (401)을 잡아 보여 글로벌 인터셉터를 추가 할 수 있습니다 :

.factory('authHttpResponseInterceptor',['$q','$location',function($q,$location){ 
 
     return { 
 
      response: function(response){ 
 
       if (response.status === 401) { 
 
        console.log("Response 401"); 
 
       } 
 
       return response || $q.when(response); 
 
      }, 
 
      responseError: function(rejection) { 
 
       if (rejection.status === 401) { 
 
        window.location.reload(); 
 
       } 
 
       return $q.reject(rejection); 
 
      } 
 
     } 
 
    }])

관련 문제