Setting Up AWS CloudFront for Spring Boot and Angular with Redirection

Setting up CloudFront for a Spring Boot backend and then redirecting to an Angular app involves a series of steps. Here’s a step-by-step guide:

Deploy Your Spring Boot Application:

First, make sure your Spring Boot application is deployed and accessible over the web, preferably with an HTTPS endpoint. AWS Elastic Beanstalk, EC2, or any other cloud platform that supports Java applications can be used.

Create a CloudFront Distribution for Spring Boot:

1. Navigate to the CloudFront service in the AWS Management Console.
2. Click on “Create Distribution.”
3. Choose “Web” distribution.
4. In “Origin Settings”, for the “Origin Domain Name,” provide the domain name or IP address of your Spring Boot application.
5. Under “Default Cache Behavior Settings”, set the allowed HTTP methods based on your application’s requirements. Typically, for an API, you might allow GET, POST, HEAD, PUT, PATCH, DELETE.
6. Adjust other settings as necessary, but most can be left as their defaults for now.
7. Click on “Create Distribution.” It will take a while for the distribution to be deployed.

Redirection in Spring Boot:

Since you want to redirect to the Angular app from Spring Boot, create an endpoint in your Spring Boot application for this:

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class RedirectController {
    @GetMapping("/")
    public String redirectToAngularApp() {
        return "redirect:YOUR_ANGULAR_APP_URL";
    }
}

Replace YOUR_ANGULAR_APP_URL with the URL of your Angular application.

CloudFront for the Angular App:

If you haven’t already, set up another CloudFront distribution for your Angular app. This is similar to the process described above, but the origin would be your S3 bucket or wherever your Angular app is hosted.

CORS Configuration:

If your Angular application makes API calls to the Spring Boot backend, ensure that CORS is correctly configured in your Spring Boot application to accept requests from the Angular app’s domain.

Here’s a simple configuration to add to your Spring Boot application:

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("YOUR_ANGULAR_CLOUDFRONT_URL")
                        .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS");
            }
        };
    }
}

Replace YOUR_ANGULAR_CLOUDFRONT_URL with the CloudFront URL of your Angular application.

Test Everything:

Access the / endpoint from your Spring Boot CloudFront URL to check if it redirects correctly to your Angular app.
Also, test the API endpoints from your Angular app to ensure they communicate without CORS issues.

By following these steps, you’ll have both your Angular frontend and Spring Boot backend behind CloudFront, with the ability to redirect between them as needed.