A sample QR Code Generator application built using FastAPI and Next.js, deployed on a minikube and Elastic Kubernetes cluster with infrastructure managed by Terraform.
This example project demonstrates a cloud-native app with a Next.js front-end and FastAPI backend, storing QR codes in S3. It automates DevOps by containerizing, deploying via GitHub Actions to EKS, and uses Kubernetes for scalable infrastructure. Terraform provisions AWS resources like VPC and EKS. Thanks to Rishab for the backend and front-end code. This example demonstrates how to accomplish the following tasks:
- Develop a Next.js front-end application that accepts a URL for QR code generation.
- Implement routing in FastAPI for managing API endpoints.
- Use FastAPI to store the generated QR images in an S3 bucket.
- Automate the containerization and push Docker images to Docker Hub via GitHub Actions.
- Deploy Kubernetes objects such as Deployments, Services, ConfigMaps, Secrets, and Ingress to manage the application.
- Set up automatic deployment to an EKS cluster using GitHub Actions.
- Utilize Terraform to provision a VPC and EKS cluster on AWS.
Note: This example uses AWS to create infrastructure.
In this guide, we will cover the following:
- Running the api app
- Running the QR generator front-end
- Building and running the project with docker
- Deploy the app on minikube
- Creating infrastructure using Terraform
- Deploying the app on an EKS cluster
- Setup S3 bucket api keys on aws
- Change the keys in api/app/.env file
- Install venv for python
- Activate the venv
- Install python dependencies
Run the commands to start the api app from the root of the directory
cd api
python -m venv venv
.\venv\Scripts\activate
pip install -r requirements.txt
uvicorn app.main:app --host 0.0.0.0 --port 8000
Install node version >= 18. Navigate to front-end-nextjs directory
cd front-end-nextjs
npm install
npm run dev
To test the app
http://localhost:3000/
Note: Run these command from the root of the project
To build the api app
docker build -f ./api/Dockerfile -t devops-qr-code-api:latest .
To build the front-end app
docker build -f ./front-end-nextjs/Dockerfile -t devops-qr-code-front-end:latest .
To run the api app
docker run -p 8000:8000 devops-qr-code-api:latest
To run the front-end app
docker run -p 3000:3000 -d devops-qr-code-front-end
To test the app
http://localhost:3000/
First, switch to branch named run-on-minikube. Then on windows run this command on powershell with administrator privileges. Now any 'docker' command you run in this current terminal will run against the docker inside minikube cluster.
& minikube -p minikube docker-env --shell powershell | Invoke-Expression
Build the docker image for front-end and backend
cd devops-qr-code
docker build -f .\front-end-nextjs\Dockerfile -t devops-qrcode-front-end:latest .
docker build -f .\api\Dockerfile -t devops-qrcode-api:latest .
Encode your S3 bucket keys to Base64 and replace it in Kubernetes/app-secret.yaml
AWS_ACCESS_KEY: [Your Base64 Encoded Keys]
AWS_SECRET_KEY: [Your Base64 Encoded Keys]
Install kubectl client to access minikube cluster.Deploy the files in minikube cluster.
kubectl apply -f cm.yaml
kubectl apply -f app-secret.yaml
kubectl apply -f api-dep.yaml
kubectl apply -f front-end-dep.yaml
kubectl apply -f api-service.yaml
kubectl apply -f front-end-service.yaml
Do port forwarding to test the app
kubectl port-forward svc/ui-app 3000:3000
kubectl port-forward svc/api-app 8000:8000
To test the app
http://localhost:3000
- Setup AWS CLI.
- Generate keys on AWS to use with AWS CLI.
- Create S3 bucket to store terraform state and replace the bucket name in the terraform.tf file with your bucket.
backend "s3" {
bucket = "[Your-Bucket-Name]"
key = "state/terraform.tfstate"
region = "[Your Region]"
}
- Install terraform.
- Install kubectl to interact with EKS cluster. Run the following commands to create infrastructure.
cd infra
terraform init
terraform validate
terraform plan
terraform apply
Update the kube config file so you can access the EKS cluster
aws eks update-kubeconfig --name [Your-Cluster-Name] --region [Your-Region]
To check you can access the cluster
kubectl get nodes
If you want to run code with my docker images on EKS. You can follow this procedure. Install ingress-nginx Controller on Kubernetes cluster.
kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v1.11.1/deploy/static/provider/aws/deploy.yaml
You need a domain name to test the app on EKS. Create a CNAME record in your DNS provider with the load balancer value provided after the installation of ingress-nginx controller. For example
Record Type: CNAME | my-app.example.com | examplebalancer.region.elb.amazonaws.com
Replace the container image in kubernetes/api-dep.yaml file
shariquetech1987/devops-qrcode-api:latest
with this
shariquetech1987/devops-qrcode-api:stable
Replace the container image in kubernetes/front-end-dep.yaml file
shariquetech1987/devops-qrcode-front-end:latest
with this
shariquetech1987/devops-qrcode-front-end:stable
Replace the hostname in kubernetes/ingress.yaml file
host: Your-Domain
Replace the BASE_URL in kubernetes/cm.yaml file
BASE_URL: "Your-Domain"
Encode your S3 bucket key to Base64 and replace it in kubernetes/app-secret.yaml
AWS_ACCESS_KEY: [Your Base64 Encoded Keys]
AWS_SECRET_KEY: [Your Base64 Encoded Keys]
Deploy the files
kubectl apply -f cm.yaml
kubectl apply -f app-secret.yaml
kubectl apply -f api-dep.yaml
kubectl apply -f front-end-dep.yaml
kubectl apply -f api-service.yaml
kubectl apply -f front-end-service.yaml
kubectl apply -f ingress.yaml
Wait for the ELB address assign to your domain.
kubectl get ingress -w
Then press Ctrl+c after the address appears.
If you encounter an issue or have suggestions for improving this project, please submit an issue via the "Issues" tab above.