API와 프론트를 완전하게 분리하는 구조를 Step별로 설명합니다.

샘플진행은 Net+Angular 조합이지만

여기서 진행되는 웹앱 개발 컨셉은 특정 플랫폼을 강제하 지 않습니다.

  • Spring Boot + React
  • Net + Vue

등 컨셉의 차이가 없기때문에 플랫폼 구성의 조합 제약이 없습니다.


목표 컨셉

  • API를 완전하게 책임지는 API개발자
  • 프론트를 완전하게 책임지는 프론트개발자

이 컨셉은,웹 프레임워크에서 적어도 메이저급  Top5에 드는 프레임워크중에 백엔드/프론트 각각  선택가능하며


프레임워크 자체보다는, 책임지는 숙련된 개발자가 훨씬 중요한 요소입니다.

  • 백엔드 : Spring Boot(JAVA) / .Net Core등
  • 프론트엔드 : Angular / Vue / React 등

적어도 3년이내에 안정적인 개발방식의 구성과 목표를 모던웹 어플리케이션이라 부르겠습니다.(미래는 또 더 좋은 방식이 등장할수 있습니다.)


요즘은 이둘의 경계선을 합하여, 단일 Stack으로 가기 위한 몇가지 방법도 존재합니다.

반대편에 있는 기술을 살펴보는것도 추천합니다. 


첫 어플리케이션 API 생성

모던웹 어플리케이션의 시작은 API Base에서 시작하는것입니다.  여기서 Angular 템플릿을 선택할수 있지만

MS가 강제하는 템플릿의 형태가 될것이며,  다른 언어 플랫폼에서 활용이 어려울수 있습니다.

고난이 예상되더라도, API만 제공되는 깡통모델에서 시작하겠습니다.


첫 웹 Appliation LayOut

백엔드

  • Controllers : API 를 정의하고 구현할수 있습니다.
  • Dockerfile : 이제 도커화는 선택이 아닌 필수입니다. 처음부터 도커를 통한 CI/CD 자동화를 염두화하지 않는다면 이후는 없습니다.
  • Program.cs : 프로그램의 진입점이며 StandAlone으로 시작됩니다.
  • appsetting.json : 환경별로 환경을 주입할수 있습니다. 환경설정이 늘어남에 따라 환경별 일관성을 유지할수 있습니다.

프론트

  • 규모가 있는 시스템은 다양한 js/css/image가 필요하며 이것을 효율적으로 관리해야합니다.
  • 빌드된 리소스는 미들웨어에 포함될수도 있으며, 완전하게 독립될수도 있습니다.
  • 최종목표는 리소스를 압축하고 단일화하여 네트워크 트래픽을 줄임과 동시에 성능 최적화의 목적을 가지고 있습니다.
  • 모던 웹(Angula/Vue/React)에서 Webpack을 활용한 CLI툴이 사용됩니다.

프론트는 분리된 네임스페이스(Front)에서 Webpack을 활용하여 JS와 관련된 환경구축을 각각할수 있습니다.

분리된 API/FRONT의 다른 Port를 Proxy를 활용하여 하나의 도메인에 묶을수 있으며

개발환경에서 발생할수 있는 크로스도메인 문제없이 디버깅 환경을 구축할수 있습니다.


API + FRONT

  • Admin : 미들웨어 담당으로 API를 제공하고 기능 책임
  • Front : 프론트의 순수 코드만 존재하고 API를 이용
  • AdminCompose : 도커를 이용 Admin+Front를 하나의 앱처럼 작동시킴


DockerCompose로 통합환경

각각의 독립 프로젝트( API + FRONT)는 DockerCompose를 통해 단일 도메인으로 운영가능하며

로컬을 포함 다양한 테스트환경에서 응용가능합니다.

version: '3.4'
 
services:
  web-api:
    image: ${DOCKER_REGISTRY-}web-api
    build:
      context: .
      dockerfile: ../WebApi/Dockerfile    
    links:
      - "web-front:web-front"
    environment:
      ASPNETCORE_ENVIRONMENT: Alpha
    ports:
      - 5001:5000
    depends_on:
      - web-front

  web-front:
    image: ${DOCKER_REGISTRY-}web-front
    build:
      context: .
      dockerfile: ../WebFront/Dockerfile    
    ports:
      - "4201:4200" 
      - "49153:49153"

Front를 미들웨어의 리소스로 포함하는것이아닌, 각각의 독립된 버전으로 업데이트가 가능하며
API에의한 Proxy를 이용한 도메인 통합이 됩니다. WebResource가 필요할시 미들웨어는

도커의 빠른 내부 통신을 통해 자원을 반환합니다. 


연구 저장소

더 자세한 문서는 Git에 통합되어 있으며,

모놀리식을 지양하고 클린 헥사고널 아키텍쳐를 지향하며 다음 레파지토리에서 샘플을 확인할수 있습니다.

git : https://github.com/psmon/ModernWeb


  • No labels