Day 12 – Hands-On Project: Deploying a Web App Across AWS & GCP

Introduction

Theory builds knowledge, but projects build expertise. In the world of multi-cloud engineering, nothing teaches better than deploying a real-world workload across two different providers.

In this lab, we’ll build and deploy a simple web application split between AWS and Google Cloud Platform (GCP):

●      Frontend: Hosted on AWS (using S3 + CloudFront).

●      Backend API: Deployed on GCP (Cloud Run or GKE).

●      Database: Optionally in AWS RDS (PostgreSQL).

●      Networking: Cross-cloud communication secured with HTTPS.

At CuriosityTech.in, learners complete similar projects in guided workshops, where the goal is not just to deploy—but to understand why each choice is made.

Step 1 – Architecture Blueprint

Diagram (explained in words):

This hybrid deployment illustrates cross-cloud dependency management.

Step 2 – Prerequisites

●      AWS Account + CLI configured.

●      GCP Account + gcloud CLI configured.

●      Basic knowledge of containerization (Docker).

●      A sample web app (React frontend + Node.js backend).

Step 3 – Frontend Deployment on AWS

1.    Create an S3 bucket → Enable static website hosting.

2.    Build the React app → npm run build.

3.    Upload files to S3 → aws s3 sync build/ s3://myfrontend-bucket/.

4.    Configure CloudFront → Point to S3 as origin, enable HTTPS.

5.    DNS setup → Use Route 53 to map domain → CloudFront.

Checkpoint:
 Visiting your domain should load the static frontend.

Step 4 – Backend Deployment on GCP

1.    Containerize the Node.js backend

○      Create Dockerfile.

○      Build & push to Google Container Registry (GCR).

gcloud builds submit –tag gcr.io/PROJECT_ID/backend-app

2.     

Deploy to Cloud Run (serverless container hosting):

 gcloud run deploy backend-app \

–image gcr.io/PROJECT_ID/backend-app \

–platform managed \

–allow-unauthenticated

3.     

4.    Note the generated HTTPS endpoint → e.g., https://backend-app-xyz.a.run.app.

Checkpoint:
 Run curl <endpoint> to verify backend works.

Step 5 – Database on AWS

1.    Create RDS instance (PostgreSQL).

2.    Enable security group access for GCP backend IP ranges.

3.    Store DB credentials in AWS Secrets Manager (optional).

4.    Update backend app to connect to RDS endpoint.

Checkpoint:
 Backend should return live data from RDS.

Step 6 – Connect Frontend & Backend

1.    In React frontend → update API base URL to GCP backend endpoint.

2.    Rebuild & re-upload to S3.

3.    Test full flow → Frontend (AWS) → API (GCP) → Database (AWS).

Step 7 – Monitoring & Logging

●      AWS CloudWatch → Monitor S3/CloudFront.

●      GCP Cloud Monitoring → Monitor backend API.

●      Export logs into a centralized Grafana dashboard.

At CuriosityTech.in labs, we show how to use OpenTelemetry to collect unified metrics across both clouds.

Step 8 – Cost Optimization Considerations

●      Use AWS S3 + CloudFront for cost-efficient global content delivery.

●      Cloud Run charges only per-request, saving idle costs.

●      RDS reserved instances reduce DB spend.

●      Monitor data egress costs between AWS and GCP—often overlooked.

Step 9 – Security Controls

●      HTTPS enforced for all communication.

●      IAM roles: principle of least privilege across both clouds.

●      Store secrets in AWS Secrets Manager or GCP Secret Manager.

●      Enable logging for all API calls (CloudTrail + GCP Audit Logs).

Step 10 – Real-World Pitfalls

●      Latency: Cross-cloud communication can add milliseconds → consider caching.

●      IAM Confusion: Mixing AWS IAM + GCP IAM roles leads to misconfigurations.

●      Debugging: Errors may occur in one cloud but surface in another.

●      Billing Surprises: Inter-cloud data transfer adds hidden costs.

Lab Extension (For Advanced Learners)

●      Deploy backend on GKE (Google Kubernetes Engine) instead of Cloud Run.

●      Use Terraform to define infrastructure in both clouds.

●      Add CI/CD pipelines with GitHub Actions → AWS + GCP deploys.

●      Experiment with multi-cloud failover (if GCP API fails → switch to AWS Lambda).

Conclusion

This project shows how a single application can span AWS and GCP, demonstrating the realities of multi-cloud engineering: balancing performance, security, and cost while managing complexity.

At CuriosityTech.in, we emphasize hands-on labs because reading about multi-cloud isn’t enough. Engineers must deploy, break, fix, and optimize in real projects to gain mastery. Completing this lab is the first step toward becoming a multi-cloud architect capable of bridging platforms seamlessly.