Micro-frontend deployments in Kubernetes

Introduction to micro-frontend deployments

To start with, 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 tutorial, I am going to talk about the following points:

1. Configuring a secure domain url
2. Using tools like Rancher as a service & POPEYE
3. An error I faced while setting up a micro-frontend in Kubernetes

Context

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 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.

1. Configuration

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):

1kubectl apply -f ./cert-manager/civoissuer.prod.yaml
2kubectl apply -f ingress-cert-civo.yaml
3kubectl get issuer -n <your namespace>
4kubectl get certificates kitchen-n <your namespace>
5kubectl 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 issuer.yaml

2. Rancher as a Service

For Rancher as a Service, I have done a video here, its basically to taking care of my deployed services and cluster as a whole. It builds on the free course available from Kubernautic.

I have used POPEYE to sanitize the cluster. The commands I ran to use it were:

1wget https://github.com/derailed/popeye/releases/download/v0.9.0/popeye\_Linux\_x86\_64.tar.gz
2tar -xvf popeye\_Linux\_x86\_64.tar.gz
3mv popeye /usr/local/bin/
4POPEYE\_REPORT\_DIR=/mnt/e/Kubernetes/ popeye --save --out html --output-file report.html

3. Front-end

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.

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.

4. Conclusion

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.

You can always visit my application at https://happilypresents.co.in/ and the code repo is @ Kitchen – “frontend” branch

Figure : Micro-Frontend pods

Figure : Micro-Frontend services

Figure : Micro-Frontend Ingress

Figure : OpenFaas pods

Figure : OpenFaas services

Figure : HappilyPresents.co.in Ingress