Jul 22, 2021
Spring Cloud Netflix and Microservices
Amalgamate Angular with Spring Cloud Architecture through CORS
Enable Cross Origin Resource Sharing to Scale and Manage with Client Side Load Balancer
Scope
This article is written to help beginners and intermediate learners to understand how an Angular application(Single Page Application) running in a separate server communicates with Microservices deployed in another server. It explains how CORS (Cross-Origin Resource Sharing) can be enabled at Client end to make Angular application communicate with Spring Boot stack by taking advantage of Spring Cloud Netflix components for routing, client side load balancing, service discovery, and invoking microservices.
The above animated diagram shows the architecture and sequence of actions which this article will explain in detail with the help of code written specifically for this article. To try in your system, here is Link to GitHub to take a glance at the Microservices and its supporting artifacts.
Prerequisite
Minimum software requirements to design and run this project
a. Install Visual Studio Code — To design Angular application.
b. Install Node.js, which also contains NPM(Node Package Manager).
c. Spring Boot with Spring Cloud Netflix dependencies in POM.xml.
d. Eclipse flavor of your choice to import Spring Boot project given in the above GitHub link.
Context, a glance
a. Angular application runs in Live Development Server(Web-Pack Dev Server), port 4200.
b. Forex Microservice runs in Spring Boot embedded tomcat server, port 8000.
c. Currency Conversion Microservice runs in Spring Boot embedded tomcat server, port 8100.
d. ZUUL API gateway runs in Spring Boot embedded tomcat server, port 8765.
e. Eureka Discovery Service runs in Spring Boot embedded tomcat server, port 8761.
From the above points, we understand the following:
Business requirement
1. A Forex microservice will provide a conversion multiple for a source currency and target currency.
2. A Currency Conversion microservice will get the conversion multiple from Forex service as a response to its request, and then multiply the quantity with the conversion multiple to provide the conversion value.
3. Angular client application will provide the quantity to be converted and source, target currency to which the conversion multiple to be applied.
For example: EUR to INR, or USD to INR, or AUD to INR.
Technology: CORS, Spring Cloud Netflix Stack
4. Enable CORS(Cross Origin Resource Sharing) to make Angular client application deployed in Live Development server communicate with Spring Boot Embedded Tomcat server. This is done through proxy.config.json in Angular client application. This is more scalable and manageable.
5. Enable ZUUL reverse proxy. This is a spring boot project which acts as a API Gateway to the request received from Angular client application. It will then route request to Currency Conversion service through zuul.routes.path configured in the configuration file. To find the service instance of Currency Conversion service, ZUUL will use Ribbon routing filter. Ribbon routing filter will use Ribbon, client side load balancer to discover service from Eureka or through a list of servers given in configuration file. Ribbon is integrated with Client side HTTP modules namely Feign, and load balanced Rest Template.
6. Enable Eureka server. This is a spring boot project which will have microservice instance referred through Service Name. The Service Name is configured in configuration file as spring.application.name as shown in the below screen shot.
For example:
The below screen shot shows a microservice gets registered in Eureka with the following contents in the configuration file.
Similarly, for ZUUL API gateway to discover Currency Conversion Service instances in Eureka, it has to have the below configuration in its project.
To sum up, a request from Angular client application with request containing Source currency, Target currency, and quantity will get append to zuul.routes.path as shown in the above screen shot with /**
Then ZUUL API gateway will perform actions as mentioned in Point 5.
7. Angular and CORS
The below screen shot shows CORS configuration which bridge Angular client application to communicate with ZUUL API gateway running in Spring boot embedded tomcat server.
Lets Run the Application End to End
Start Eureka Server
Start ZUUL API Gateway
Start Currency Conversion Microservice
Start Forex Microservice
Start Angular Application in Live Development Server
Visual Studio Code, Integrated development environment
Point browser to localhost:4200
Click Get Conversion, and enter source currency, target currency and quantity. Then click Convert as shown in the below screen shot
Response from Currency Conversion and Forex Microservices
If you see the above response, the Forex Service has provided the conversion multiple for “EUR to INR” which is INR 75, and Currency Conversion Service has calculated the amount INR 75000 based on the quantity which is EUR 1000.
From the above screen shot output, we can see the request is served by Forex Service instance running in port 8000. Now lets test Client side load balancer by creating more instances of Forex Service and register them with Eureka and see the output.
Ribbon in action, Client side Load Balancer
A Client side load balancer provides insights on how an application itself can select instances it wants to communicate using Service name to discover from Eureka discoverer.
The below screen shot shows a new instance of Forex Service has been started in port 8001 and registered in Eureka.
As 2 instances of Forex Service are running, Ribbon Client side load balancer will pick any one instance with Service name(Forex-Service).
Eureka Dashboard
The below screen shot shows, 2 instances of Forex service, 1 instance of Currency Conversion Service, 1 instance of ZUUL API Gateway.
Lets try a new request and see how Ribbon Client side load balancer works
The below screen shot shows, the new request with “USD to INR” with quantity 2000 has provided us the response from Forex Service running in port 8001.
Sure, Ribbon Client side load balancer works!!!
Conclusion
This article with a simple business requirement was able to demonstrate the advantage of CORS and Spring Cloud Netflix stack components. Client side load balancer and CORS were the highlight in this article that provides insights on how Ribbon from the client end could discover instances from Eureka and Cross Origin bridges the communication between Live development server and Spring boot embedded tomcat server respectively.
Published on 22nd July 2021
Other medium articles, by Ganesh Nagalingam
Quest Syntax Tree and remedy Code Smell using JAPA Visitor Patterns
Asynchronous WebSocket Messaging Middleware and Microservices
Multi-Broker Insights into Apache Kafka Cluster Architecture
Remote Queue Definition: IBM MQ v9.2
Kubernetes Pods & Docker Containers: Spin VM using Virtual Box in Windows 10 Home
Federate OKTA IdP + WSO2 API Manager as Gateway to Spring boot Microservices Integration
Integrate IBM Business Process Manager with Hybrid MobileFirst application
Kerberos v5: SSO authentication in Windows 10 Home using Apache directory studio
Integrate Service providers(SPs) with OKTA Identity provider(IdP)
Integrate IBM WebSphere Service Registry and Repository with IBM Process Server
