Deploying Microfrontends to GKE - PoC for DevFest Mangalore 2025

Create home page using React

npm create vite@latest home

Create about page using Vue

npm create vite@latest about

Run the servers, in both /home and /about folder

npm run dev

Use Gemini / Antigravity to create a home page

Copy the Dockerfile and nginx.conf file

Build docker images

docker build --platform linux/amd64 -t mfe-vue-about .
docker build --platform linux/amd64 -t mfe-react-home .

Architecture Differences: Kind vs GKE

Aspect	Kind (Local)	GKE (Production)
Service Type	NodePort	LoadBalancer
Access	Port forwarding required	Public IP addresses
Image Registry	Local images	Google Artifact Registry
Image Architecture	Host architecture (ARM64/AMD64)	AMD64 (x86_64)
Scalability	Single node	Multi-node with autoscaling
Cost	Free	~$105/month

---

Login to GCP and configure project

# Login to GCP
gcloud auth login

# List available projects
gcloud projects list

# Set your project (replace with your project ID)
export PROJECT_ID="your-project-id"
gcloud config set project $PROJECT_ID

# Verify billing is enabled
gcloud billing projects describe $PROJECT_ID

# Enable required APIs
gcloud services enable container.googleapis.com
gcloud services enable artifactregistry.googleapis.com
gcloud services enable compute.googleapis.com

Push image to artificat registry

# Set variables
export REGION="us-central1"
export REPO_NAME="micro-frontend-demo"

# Create repository
gcloud artifacts repositories create $REPO_NAME \
  --repository-format=docker \
  --location=$REGION \
  --description="Micro frontend container images"

# Configure Docker/Podman authentication
gcloud auth configure-docker ${REGION}-docker.pkg.dev

Tag and push images

# Tag images for Artifact Registry
docker tag mfe-react-home \
  ${REGION}-docker.pkg.dev/${PROJECT_ID}/${REPO_NAME}/mfe-react-home:latest

docker tag mfe-vue-about \
  ${REGION}-docker.pkg.dev/${PROJECT_ID}/${REPO_NAME}/mfe-vue-about:latest

# Push to Artifact Registry
docker push \
  ${REGION}-docker.pkg.dev/${PROJECT_ID}/${REPO_NAME}/mfe-react-home:latest

docker push \
  ${REGION}-docker.pkg.dev/${PROJECT_ID}/${REPO_NAME}/mfe-vue-about:latest

# Verify images
gcloud artifacts docker images list \
  ${REGION}-docker.pkg.dev/${PROJECT_ID}/${REPO_NAME}

Create GKE Cluster

# Set cluster configuration
export CLUSTER_NAME="micro-frontend-demo-cluster"
export ZONE="${REGION}-a"

# Create cluster
gcloud container clusters create $CLUSTER_NAME \
  --zone=$ZONE \
  --num-nodes=2 \
  --machine-type=e2-medium \
  --disk-size=20GB \
  --enable-autoscaling \
  --min-nodes=2 \
  --max-nodes=4 \
  --enable-autorepair \
  --enable-autoupgrade

# Get credentials
gcloud container clusters get-credentials $CLUSTER_NAME --zone=$ZONE

# Verify cluster
kubectl cluster-info
kubectl get nodes

Copy the deployment YAML files

# Apply deployments
kubectl apply -f k8s/gke-react-deployment.yaml
kubectl apply -f k8s/gke-vue-deployment.yaml

# Monitor deployment
kubectl get deployments -w

# Check pod status
kubectl get pods

# View events
kubectl get events --sort-by='.lastTimestamp'

Get loadbalancer IP

# Check services
kubectl get svc

# Wait for external IPs (takes 2-5 minutes)
kubectl get svc -w

# Get specific IPs
export MF1_IP=$(kubectl get svc mfe-reactjs-service -o jsonpath='{.status.loadBalancer.ingress[0].ip}')
export MF2_IP=$(kubectl get svc mfe-vuejs-service -o jsonpath='{.status.loadBalancer.ingress[0].ip}')

echo "React.js App: http://$MF1_IP"
echo "Vue.js App: http://$MF2_IP"

Update them in .env file

Rebuild and restart containers

# Rebuild with new URLs
docker build --platform linux/amd64 -t mfe-react-home:latest home/
docker build --platform linux/amd64 -t mfe-vue-about:latest about/

# Tag and push
docker tag mfe-react-home:latest \
  ${REGION}-docker.pkg.dev/${PROJECT_ID}/${REPO_NAME}/mfe-react-home:latest
docker push \
  ${REGION}-docker.pkg.dev/${PROJECT_ID}/${REPO_NAME}/mfe-react-home:latest

docker tag mfe-vue-about:latest \
  ${REGION}-docker.pkg.dev/${PROJECT_ID}/${REPO_NAME}/mfe-vue-about:latest
docker push \
  ${REGION}-docker.pkg.dev/${PROJECT_ID}/${REPO_NAME}/mfe-vue-about:latest

# Restart deployments
kubectl rollout restart deployment/mfe-reactjs
kubectl rollout restart deployment/mfe-vuejs

Verify the deployments by visiting the IP Addresses