Introduction: Microfrontend deployments (Multiple Angular frontends from a single portal)
In continuation of my Part 1 guide Full Stack Deployment in Kubernetes (Angular, IdentityServer4, Dotnet Core, MongoDB, Civo), I would like to share my experience of how I took my idea to the next level using Civo and the tools I have used for the same. To be more precise, before I continue with the main part of the guide I am going to talk about the below points:
Configuring a secure domain url
Using tools like Rancher as Service & POPEYE
An error I faced while I set up micro-frontend in Kubernetes
I always had this weird instinct that I have the potential to build something and it will revolutionize the world. Being in the software industry I tried to look out for the opportunity but besides being busy, I couldn’t invest much into the "building" part. That was when I came across Civo’s K3s cluster beta program. Instantly I started investing time to learn Kubernetes, and tried out different tools in Civo's environment. As part of that I began to set up and launch a full stack app running in a Civo cluster. I was so excited that it even inspired me to take a couple of courses and I tried to extend and deploy the final projects into a production ready application and deploy them on a K3s cluster in Civo.
I have purchased the domain "happilypresents.co.in" and configured the Civo DNS using the guide.
The application is a set of microservices, one Angular frontend that connects to three backend services for identity, book and chapter services using bearer tokens. I used “Helm” to deploy the frontend and identity services, “OpenFaaS” deploy for a couple of microservices. After the first part, I tried to secure the application using Let’s Encrypt using the cert-manager guide here. I haven’t used the wild card issuer; I have used the conventional steps as below:
Create the issuer
Deploy the ingress with the secret key
Troubleshoot whether the certificate is the issued from Let’s Encrypt (stage/prod api):
kubectl apply -f ./cert-manager/civoissuer.prod.yaml kubectl apply -f ingress-cert-civo.yaml kubectl get issuer -n <your namespace> kubectl get certificates kitchen-n <your namespace> kubectl describe certificates <your secret> -n <your namespace>
At this step I got an error “certificate public key must be different than account key”.
I removed the certificates and repeated the steps with unique secret key which is different from the
2. Rancher as a Service
I have used POPEYE to sanitize the cluster. The commands I ran to use it were:
wget https://github.com/derailed/popeye/releases/download/v0.9.0/popeye\_Linux\_x86\_64.tar.gz tar -xvf popeye\_Linux\_x86\_64.tar.gz mv popeye /usr/local/bin/ POPEYE\_REPORT\_DIR=/mnt/e/Kubernetes/ popeye --save --out html --output-file report.html
After setting up everything my next level was to gain knowledge on a few frontend framework/library like Angular/React and build a micro- front-end based architecture. I am using the single-spa framework to bring together a couple of websites into Civo. So far I am able to build and deploy the package, only thing is getting stuck with the ingress setup:
Later, I fixed the issue by implementing the ImportMap deployer.
During this application development I had issues with my local environment and my Part 1 guide helped me to setup everything from scratch which had all the bookmarks and commands. I hope this guide will help me motivate to spend tiny bit of time to build the application in a state of the art fashion and take it to the next level. I am next planning to get Terraform to spin up the cluster and deploy the application instantly without any manual intervention.
Overall, my experience with Civo to build microservice and micro-frontends led to develop a secure happilypresents.co.in application. My future plans are to enhance it with the industry standard best practices available in Civo marketplace and contribute to the community positively.
Figure : Micro-Frontend pods
Figure : Micro-Frontend services
Figure : Micro-Frontend Ingress
Figure : OpenFaas pods
Figure : OpenFaas services
Figure : HappilyPresents.co.in Ingress