Search code examples
reactjsdockernginxdocker-composedeployment

Deploy React App behind Nginx Reverse Proxy with Docker Compose


I need to deploy a docker compose project which includes several services (two APIs, database and others). In order to expose the two APIs to the network I configured an Nginx container which acts as a reverse proxy.

I also need to expose a Web App which was developed in React and therefore produces a completely static build.

Since all the other services in the Docker Compose consist of a separate project with its own GitHub repository with its own pipeline that builds a docker image and pushes it to the registry, I would like to do the same for the React App.

Should I build a custom Nginx image including the React App files in the container and then let Nginx perform reverse proxying while also serving the Web App's files, or should I deploy the React App as a docker image with its own HTTP server and let Nginx proxy requests to the new container as I'm doing with the other services?

The seconds solution seems better since it allows me to treat the React App as "one of the services" but I'm worried it could be uslessly complicated and/or less performant.

Thank you!


Solution

  • Both approaches are valid, and the choice depends on your specific requirements.

    Approach 1: Nginx Serving React App Files

    Pros:

    Simplicity: Single Nginx container serving both API requests and static files. Consistency: Treats all services similarly. Cons:

    Performance: Nginx might be less performant for serving static files compared to a specialized web server.

    Approach 2: Separate Docker Image for React App

    Pros:

    Isolation: Each service in its own container for higher isolation. Scalability: Allows independent scaling of the React App. Cons:

    Complexity: Managing multiple containers can introduce complexity. Resource Overhead: Running a separate HTTP server might introduce some resource overhead.

    Recommendation: If simplicity and consistency are priorities, go with Approach 1. If you prioritize service isolation and scalability, choose Approach 2. Test and monitor to ensure performance meets your requirements.