강연정리) The ideal micro-frontend platforms (Architecture 중심)

개요

• Micro FrontEnd가 무엇인가?
• 예시) Formula 1.com의 예전 Architecture
• 예시) CMS 활용 (ContentFul)
• 예시) ECS 구성 활용
• 예시) 최종 형태

 

---

Micro Frontend가 무엇인가?

• 프론트 애플리케이션을 독립적으로 배포 및 개발할 수 있는 작은 단위로 분할
• 팀 간 병렬작업과 코드베이스의 유비보수를 용이하게 하는 방법론
• 애플리케이션 자체가 점점 커지면서 확장 가능한 아키텍처가 필요함
• 결국 Front도 서버처럼 MicroService 형태로 발전하는 걸로 보임

---

예시) Formula 1.com의 예전 Architecture

• 전통적인 3 tier architecture
• 정해진 수로만 확장가능 ( Auto Scaling )
• 릴리스 (배포) 시 사소한 변경사항에 대해 전체 테스트를 진행해야 함( 모놀리식 )

---

CMS 활용 (ContentFul)

• 기존 모놀리식 형태는 유지
• Content는 ContentFul 을 활용
  • ContentFul은, CMS (Headless Content Management System)으로 콘텐츠를 구조화하고 API를 통해 다양한 플랫폼을 지원
  • 콘텐츠 자체를 따로 구성 가능

내가 잘 이해가 안되서... CMS를 사용하면 좋은점

• CMS 사용 전 구성
  • 주로 백엔드에서 데이터를 관리 (Database) (API 통신)
  • Frontend -> Backend -> Database 의 전통적인 통신방식
  • Frontend에서 API 호출과 렌더링을 담당
  • 콘텐츠 수정의 경우
    • 새로운 페이지 추가 및 블로그 수정 시 백엔드 및 프론트 개발자가 직접 코드를 수정
    • 배포과정이 필요하고 그에따라 서버가 잠시 다운될 수 있음
• CMS를 사용한다면
  • 관리자가 Contentful 웹사이트에 직접 글, 이미지, 동영상을 추가 및 수정 가능
  • 프론트엔드에서 API를 통해서 데이터를 가져올 수 있다. (백엔드 없어도... API 통신을 통해서)
  • CMS 내용만 바꾼다면 배포가 없어도 프론트에서 자동반영된다 -> 비개발자가 프론트까지 직접 관리할 수 있음

 

---

ECS 구성 활용

---

최종형태 

• Front 서버앞단은 ALB 통해서 제공
• Routing은 CloudFront을 사용해서 구성

 

참고

• https://www.youtube.com/watch?v=J_y4-haLf8s&t=1760s
• https://github.com/awslabs/frontend-discovery-service