Using Nginx to Front Both Backend and Frontend

When setting up a web application with a Spring Boot backend and a React frontend, you can choose to deploy them directly or use Nginx as a reverse proxy. Both options are viable, but using Nginx offers several advantages, especially for production environments.

1. Without Nginx: Direct Setup

In this scenario, the backend and frontend are served directly to clients on their respective ports:

• Frontend URL: http://localhost:4200 (React)
• Backend URL: http://localhost:8085 (Spring Boot)

Pros:

• Simplicity: No need for additional tools or configuration.
• Direct Access: Requests go straight to the backend or frontend, minimizing latency.

Cons:

• CORS Issues: Since frontend (React) and backend (Spring Boot) are hosted on different origins, you'll need to configure CORS in Spring Boot. This adds complexity and potential security risks.

Note: An origin is defined by the combination of the protocol, host, and port. Therefore, the URLs above are considered different origins because the ports (4200 vs. 8085) differ, even though the protocol and host are the same.

Handling CORS in Spring Boot

Spring Boot provides the @CrossOrigin annotation, which allows fine-grained control over cross-origin resource sharing. Here’s an example of how to configure a specific controller to handle CORS requests:

@CrossOrigin
@RestController
@RequestMapping("/account")
public class AccountController {

    @GetMapping("/{id}")
    public Account retrieve(@PathVariable Long id) {
        // Fetch account details
        return new Account(); // Example logic
    }
}

Explanation:

1. @CrossOrigin: This annotation, when used with its default configuration, enables cross-origin requests for all origins.
2. Controller-level CORS Configuration: You can apply this annotation to individual methods or at the class level for all endpoints within the controller.
3. Methods Supported: In the example, both GET and DELETE requests are exposed for CORS handling.

While this approach is effective, it requires specifying the allowed origins manually and might not scale well for dynamic environments.

2. With Nginx: Reverse Proxy Setup

Using Nginx as a reverse proxy creates a unified entry point for both services. Nginx routes requests based on their paths:

• Frontend URL: http://localhost:9002 (Served through Nginx)
• Backend API: http://localhost:9002/api

Pros:

• Unified Access Point: Both services are accessible on the same port. For example:
  • / serves the React app.
  • /api/* routes to the Spring Boot backend.
• Avoid CORS Issues: Since Nginx proxies requests internally, the frontend and backend appear as a single origin.
• SSL Termination: Nginx can handle HTTPS traffic, enhancing security in production.
• Load Balancing: Distributes traffic among multiple instances of your backend or frontend.
• Static Content Caching: Speeds up static file delivery and reduces backend load.
• Enhanced Security: Supports rate limiting, IP filtering, and other protective measures.

Example Nginx Configuration

Here’s a sample Nginx.conf for routing requests to the frontend and backend:

server {
    listen 80;

    # Route requests for the React frontend
    location / {
        proxy_pass http://localhost:4200;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # Route API requests to the Spring Boot backend
    location /api/ {
        proxy_pass http://localhost:8085;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

Conclusion

• Without Nginx: Best for local development or simple setups where CORS issues can be managed, and scalability isn’t a concern.
• With Nginx: Ideal for production environments requiring unified access, better security, and scalability.

Whether you choose to go with or without Nginx depends on your specific use case, but understanding how to handle CORS is essential for smooth backend and frontend communication. Let me know if you’d like to dive deeper into any aspect of this configuration!

---

Happy coding! 💻