풀 스택 자바 스크립트로 프론트 엔드와 백 엔드를 분리하는 방법은 무엇입니까?

앵귤러, 그런트 및 바우어를 사용하여 작성된 단일 페이지 응용 프로그램 인 프론트 엔드가 있다고 가정하십시오. 그리고 백엔드가 있다고 가정합니다. 주로 ORM 위에있는 REST API이며 grunt, express 및 sequelize와 같은 것을 사용하여 데이터베이스에서 객체를 저장 / 검색합니다.

앵귤러 어플리케이션은 사용자가 보는 모든 시각적 인 것들을 수행하지만, 백엔드가 제공하는 서비스를 GUI로하여 그렇게합니다.

독립적 인 개발, 버전 관리, 지속적인 통합, 개발로의 푸시 등을 허용하기 위해 이들을 두 개의 다른 코드베이스로 분리하는 것이 바람직합니다.

내 질문은, 이것을 깨끗하게하기 위해 어떤 방법이 있습니까? 풀 스택 자바 스크립트에 권장되는 모범 사례가 있습니까?

옵션 # 1은 단일체 인 것 같습니다. 즉 "분리하지 마십시오". 장점은 빌드 체인이 단순하고 모든 것이 한곳에 있다는 것입니다. 그러나 많은 단점이 있습니다. 독립적으로 버전을 관리하기가 어려운 경우 전면이 깨진 경우 다시 배포 할 수없는 등을 의미합니다.

옵션 # 2는 준모 놀리 식으로 보이며, 프론트 엔드 빌드 체인은 많은 파일을 백엔드에 기록합니다. dist프론트 엔드 의 디렉토리는 백엔드의 일부 디렉토리를 참조하므로 본질적으로 프론트 엔드가 축소되거나, 어색 화 될 때 모든 것이 실행되는 백엔드에 게시됩니다.

옵션 # 3은 완전히 분리 된 것처럼 보입니다. 프런트 엔드 및 백엔드 각각은 서로 다른 포트에서 자체 서버를 실행하며 완전히 별도의 프로젝트입니다. 단점은 서로의 포트에 대해 알 수 있도록 구성해야하는 것 같습니다. 백엔드는 프론트 엔드에서 CORS를 허용해야하며 프론트 엔드는 모든 엔드 포인트가 어디에 있어야하는지 알아야합니다.

옵션 # 4는 docker-compose와 같은 것을 사용하여 모든 것을 함께 조작하는 것일 수 있습니다.

다른 옵션이 있다고 확신합니다. 권장되는 모범 사례는 무엇입니까?

REST 인터페이스가 사이에있는 프론트 엔드 백엔드 애플리케이션입니다. 이미 완전히 분리되었습니다.

내 투표는 옵션 # 3에 대한 것입니다. 구성에 대해 걱정하는 것 같지만 요점입니다. 구성을 사용하면 긴밀하게 결합 된 코드 바인딩 없이도 완전히 분리 할 수 ​​있습니다. CORS가 걱정된다면 모든 것을 하나의 도메인에 두십시오. CORS가 있어야하는 경우이를 관리하는 가장 좋은 방법은 구성입니다.

그러나 여기에는 "모범 사례"가 없습니다. 모범 사례는 특정 요구 사항을 가장 잘 충족시키는 방법입니다.

예, 둘을 분리하고 프론트 엔드 앱을 타사 앱처럼 취급해야합니다. 예를 들어 모바일 앱과 같은 다른 클라이언트를 추가 할 수 있으며 첫 번째 클라이언트가 이런 방식으로 구축 된 경우 인생이 더 쉬워집니다.

도커 컨테이너 또는 다른 배포 시스템을 사용하는 것은 대부분 백엔드와 관련이 있습니다. 앱의 프런트 엔드는 해결해야하는 정적 자산 일뿐입니다. 이러한 자산을 서버에서 정적으로 호스팅하거나 클라우드 프론트와 같은 CDN과 같은 다른 곳에 호스팅 할 수 있습니다.

cors를 피하면 약간의 구성이 저장되지만 위의 답변에서 언급했듯이 이는 일종의 요점입니다. cors (및 토큰 인증)를 사용하면 다른 클라이언트를 위해 백엔드를 더 잘 준비 할 수 있습니다.

편집 : 풀 스택 js 모범 사례까지-나는 이것을 일관성있게 말하고 싶습니다. 약속을 사용하고 있다면 (양쪽에서) 약속을 수행하십시오. 동일한 js 스타일과 형식을 유지하고 가능한 경우 동일한 테스트 라이브러리를 사용하십시오.