I am trying to implement blue/green deployment for my application. I am using istio VirtuaService for navigating to blue environment or green environment based on clientId in request header. Backends are working fine.
My concern is the frontend. How can I implement blue green for Angular ui at frontend? Since it’s a single page application, entire ui loads up during initial load.
What should be the strategy for angular blue/green deployment?
It's hard for you to get an unambiguous answer about
What should be the strategy for angular blue / green deployment?
It may all depend on how you set up the cluster, what your application configuration looks like, what your network settings are, and much more. However, you can use many guides on how to correctly create a blue / green deployment:
One more point to consider. You will need two separate complete environments to be able to create a blue / green update. Look at the differences between blue/green deployments and rolling update:
In Blue Green Deployment, you have TWO complete environments. One is Blue environment which is running and the Green environment to which you want to upgrade. Once you swap the environment from blue to green, the traffic is directed to your new green environment. You can delete or save your old blue environment for backup until the green environment is stable. In Rolling Deployment, you have only ONE complete environment. Once you start upgrading your environment. The code is deployed in the subset of instances of the same environment and moves to another subset after completion
So if you decide to blue/green update, you need to create 2 separate, equivalent environments, then modify the environment with Angular UI, and then update.