Chuyển tới nội dung chính

Tổng quan kiến trúc

High-level Architecture​

Stack tổng thể​

Frontend​

  • React 18 + TypeScript cho UI
  • Vite 7 + @module-federation/vite cho build & MFE runtime
  • Tailwind CSS v4 với custom theme DSL

State & Data​

  • Redux Toolkit cho global state (auth, store selection)
  • RTK Query cho server state (API caching, auto-refetch)
  • React Hook Form + Zod cho form management

Monorepo tooling​

  • pnpm workspaces: apps/* + core
  • Turborepo: parallel builds, caching, task dependencies
  • @vppos/core: shared UI, hooks, utils, types — tất cả modules import từ đây

Infrastructure​

  • Docker multi-stage builds (1 Dockerfile per MFE)
  • Kubernetes deployments (1 pod per MFE)
  • Nginx reverse proxy
  • GitLab CI/CD pipeline

Luồng request (Production)​

Nguyên tắc thiết kế​

  1. Module Independence: Mỗi MFE là 1 ứng dụng độc lập, có thể build & deploy riêng
  2. Shared Nothing (gần như): Chỉ share React, ReactDOM, Router, Redux qua Module Federation singleton
  3. Core Library: UI components, hooks, utils chung nằm trong @vppos/core — build-time dependency, không phải runtime
  4. Single Source of Truth: Route config, MFE registry, permissions đều khai báo tại Container
  5. Convention over Configuration: Tất cả modules tuân theo cùng folder structure, naming convention, coding patterns