Introduction to Microfrontend deployments

Architecture

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:

  1. Configuring a secure domain url

  2. Using tools like Rancher as Service & POPEYE

  3. An error I faced while I set up 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):

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

2. Rancher as a Service

For Rancher as 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:

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

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.

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.

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

Micro-frontend pods

Figure : Micro-Frontend pods

Micro-frontend services

Figure : Micro-Frontend services

Ingress

Figure : Micro-Frontend Ingress

OpenFaaS pods

Figure : OpenFaas pods

OpenFaaS services

Figure : OpenFaas services

Happilypresents.co.in ingress

Figure : HappilyPresents.co.in Ingress