Skip to content

Draft: feat: Decouple frontend/backend with Nginx and update CI/CD

Idan Cohen requested to merge decouple-frontend-from-backend into genocide

Decouple Frontend from Backend with Nginx

Overview

This MR implements a modern decoupled architecture that separates the React frontend from the Node.js backend API service. The frontend is now served via Nginx which proxies API requests to the backend service.

Why?

  • Scalability: Frontend and backend can scale independently based on different load patterns
  • Maintainability: Clearer separation of concerns with dedicated services
  • Performance: Static content delivery optimized with Nginx caching and compression
  • Deployment Flexibility: Updates to either component can be made without affecting the other

Implementation Details

  • Frontend: React app served as static content through Nginx
  • Backend: Node.js Express app focused solely on API endpoints
  • Nginx Configuration: Static content serving + API request proxying
  • Kubernetes: Separate deployments for frontend and backend services
  • CI/CD: Updated pipeline to build and deploy components independently

Key Changes

  • Created multi-stage Dockerfiles for efficient container builds
  • Configured Nginx for optimal static content delivery and API proxying
  • Removed static file serving from the Express backend
  • Implemented centralized API service layer in React app
  • Created separate Kubernetes deployments with proper resource limits
  • Updated GitLab CI/CD pipeline to support the new architecture

Testing

  • Local development environment tested with both services running independently
  • Verified API communication between frontend and backend
  • Confirmed static content delivery and caching behaviors
  • Validated Kubernetes deployments in test environment

Migration Notes

This change is largely transparent to end users but requires updates to deployment processes. The database remains unchanged, and API endpoints maintain backward compatibility.

Future Considerations

  • Consider implementing a CDN for global static content delivery
  • Add API versioning strategy for future backend changes
  • Implement automated integration testing between services

Reviewers: Please focus on the Nginx configuration, API service layer implementation, and CI/CD pipeline changes.

Merge request reports