DEV Community: Victor Webster

Designing a Secure Two-Tier Cloud Architecture on Google Cloud to Survive Traffic Spikes

Victor Webster — Sat, 01 Aug 2026 02:27:02 +0000

When you're building an application, it's tempting to deploy everything onto a single virtual machine. It's simple, inexpensive, and gets you to production quickly. For many startups, that's exactly how things begin.

Imagine FreshCart, a fast-growing online grocery platform. During most of the week, a single server comfortably handles browsing, product searches, and checkout requests. Then the marketing team launches a "Weekend Mega Sale" campaign.

Within minutes, thousands of users visit the site.

Pages begin loading slowly. Checkout requests queue up. CPU utilization reaches nearly 100%, memory becomes exhausted, and eventually the server stops responding. Every customer is trying to access the same machine, and because that machine hosts the application and is directly exposed to the internet, it becomes both the performance bottleneck and the biggest security risk.

This scenario is common because a single exposed VM has several limitations:

Every request is handled by one server.
If that server fails, the application becomes unavailable.
The backend is directly reachable from the internet, increasing the attack surface.
Scaling often means replacing the VM with a larger one instead of distributing traffic across multiple servers.

To address these problems, I designed and built a secure two-tier architecture on Google Cloud Platform (GCP). The architecture separates public traffic from the application layer, removes direct internet access to backend servers, and introduces redundancy so the application can continue serving requests even if one backend instance becomes unavailable.

Architecture Overview

The architecture consists of two logical tiers:

Presentation Layer

Global HTTP Load Balancer
Static website hosted in Cloud Storage
HTTPS managed by Google-managed certificates

Application Layer

Two backend Compute Engine instances
Private subnet
No public IP addresses
Cloud NAT for outbound internet access only

The backend servers are never directly exposed to users. Every request must first pass through Google's Load Balancer, which distributes traffic across healthy backend instances.

(Insert your final architecture diagram here.)

Architecture Components

Custom VPC

The first step was creating a dedicated Virtual Private Cloud (VPC).

Rather than using Google's default network, I created a custom VPC to have complete control over IP ranges, firewall rules, and network segmentation.

gcloud compute networks create "$VPC_NAME" \
  --subnet-mode=custom \
  --bgp-routing-mode=regional

Using a custom VPC keeps the infrastructure isolated and easier to manage as the application grows.

Public and Private Subnets

Next, I created separate subnets.

Public subnet
Private subnet

The public subnet is intended for internet-facing resources, while backend application servers reside entirely inside the private subnet.

gcloud compute networks subnets create "$SUBNET_PUBLIC"

gcloud compute networks subnets create "$SUBNET_PRIVATE"

The private subnet also enables Private Google Access, allowing instances without public IPs to communicate securely with Google services.

Restrictive Firewall Rules

Instead of allowing unrestricted access, firewall rules follow the principle of least privilege.

SSH access is permitted only through Google's Identity-Aware Proxy (IAP).

gcloud compute firewall-rules create allow-ssh-iap

This eliminates the need to expose port 22 to the internet.

Similarly, backend servers only accept HTTP traffic from Google's Load Balancer health check ranges.

gcloud compute firewall-rules create allow-lb-health-check

Because users cannot directly reach the backend VMs, the attack surface is significantly reduced.

Cloud NAT

Backend servers require internet connectivity for activities such as:

Installing packages
Downloading updates
Pulling dependencies

However, exposing them with public IP addresses would undermine the security model.

Cloud NAT solves this problem.

gcloud compute routers create "$ROUTER_NAME"

gcloud compute routers nats create "$NAT_NAME"

Cloud NAT provides outbound internet connectivity while preventing unsolicited inbound connections.

This means the backend servers can install software updates without ever becoming publicly accessible.

Backend Compute Engine Instances

To eliminate a single point of failure, I deployed two backend servers.

Zone A
Zone B

Each VM:

uses the lightweight e2-micro machine type
has no external IP address
resides inside the private subnet

gcloud compute instances create freshcart-backend-a
gcloud compute instances create freshcart-backend-b

Deploying backend instances across multiple zones increases availability.

If one zone experiences an outage or maintenance event, traffic can continue flowing to the healthy instance in the remaining zone.

Global HTTP Load Balancer

Instead of allowing users to connect directly to backend servers, every request first reaches Google's Global HTTP Load Balancer.

The load balancer performs continuous health checks against the backend instances.

gcloud compute health-checks create http freshcart-health-check

Healthy instances receive traffic.

Unhealthy instances are automatically removed from rotation.

The backend service combines both instance groups into a single logical service.

gcloud compute backend-services create freshcart-backend-service

Finally, a URL map, HTTP proxy, and forwarding rule expose one public endpoint.

gcloud compute forwarding-rules create freshcart-http-rule

This architecture dramatically improves resilience during traffic spikes.

Instead of overwhelming a single server, incoming requests are distributed between multiple healthy backend instances.

Static Website Hosting

FreshCart's landing page, images, JavaScript, and CSS are excellent candidates for static hosting.

Rather than serving these files from the backend VMs, they are stored in Google Cloud Storage.

gcloud storage buckets create "gs://$BUCKET_NAME"

A Backend Bucket connects Cloud Storage to Google's Load Balancer.

gcloud compute backend-buckets create freshcart-static-backend

A managed SSL certificate provides HTTPS without manual certificate management.

gcloud compute ssl-certificates create freshcart-managed-cert

Separating static content from the backend significantly reduces unnecessary requests hitting the application servers.

For example, if 20,000 visitors all request the homepage logo, CSS, and JavaScript, those assets are served directly from Cloud Storage rather than consuming backend CPU cycles.

Lifecycle Management

Static assets accumulate over time.

Rather than storing old files indefinitely in expensive Standard Storage, I configured a lifecycle policy.

gcloud storage buckets update \
    --lifecycle-file=/tmp/lifecycle.json

Objects older than 30 days automatically transition to Nearline Storage, reducing storage costs.

Objects older than 90 days are automatically deleted.

This ensures long-term storage costs remain predictable without requiring manual cleanup.

How This Architecture Handles Traffic Spikes

Returning to FreshCart's flash sale scenario, consider what happens when thousands of customers visit the website simultaneously.

Instead of every request hitting a single VM, users first connect to Google's Global HTTP Load Balancer.

The load balancer distributes incoming traffic across both backend instances. If one backend becomes overloaded or unhealthy, health checks detect the issue and automatically stop routing requests to it. Customers continue interacting with the remaining healthy backend while the unhealthy instance is repaired or replaced.

At the same time, static resources such as HTML, images, CSS, and JavaScript are served directly from Cloud Storage over HTTPS. These requests never reach the backend servers, significantly reducing CPU utilization and improving response times.

The backend servers remain private throughout this process. They can still install security updates and software packages using Cloud NAT, but because they have no public IP addresses, attackers cannot connect to them directly.

The result is an architecture that is considerably more resilient, secure, and scalable than a single exposed virtual machine.

Key Design Decisions

1. Why two backend instances instead of one?

Running a single VM would have been cheaper and simpler, but it would also remain a single point of failure.

Deploying backend instances across two availability zones increases fault tolerance. If one instance or zone becomes unavailable, the load balancer automatically routes traffic to the remaining healthy backend.

The trade-off is slightly higher infrastructure cost, but the improvement in availability justifies the additional expense.

2. Why remove public IP addresses?

Many beginner deployments expose backend servers directly to the internet.

I deliberately avoided this.

Instead, every backend VM resides inside a private subnet and communicates externally only through Cloud NAT.

This dramatically reduces the attack surface while still allowing package updates and outbound connections.

The trade-off is that administrators must connect using Identity-Aware Proxy instead of traditional SSH over the public internet.

3. Why separate static content from the backend?

Initially, it might seem easier to let the backend server host everything.

However, every image, stylesheet, and JavaScript file consumes server resources.

Hosting static assets in Cloud Storage allows the backend to focus exclusively on business logic such as authentication, inventory, and checkout.

This improves scalability and reduces infrastructure costs.

What I Would Build Next

If FreshCart continued growing, this architecture would evolve further.

The first improvement would be replacing unmanaged instance groups with Managed Instance Groups to enable automatic scaling during periods of high demand.

I would also place Cloud CDN in front of the Cloud Storage bucket so static assets are cached at Google's global edge locations, reducing latency for customers worldwide.

For observability, I would integrate Cloud Monitoring, Cloud Logging, and alerting policies to monitor CPU usage, request latency, backend health, and application errors in real time.

Finally, I would migrate the application database to Cloud SQL configured for high availability, ensuring the data layer matches the resilience of the application tier.

Conclusion

Designing cloud infrastructure isn't simply about deploying servers—it's about making deliberate architectural decisions that balance security, scalability, availability, and cost.

By introducing a custom VPC, private backend instances, Cloud NAT, a Global HTTP Load Balancer, Cloud Storage for static assets, and automated lifecycle policies, FreshCart is now significantly better equipped to withstand sudden traffic spikes than it would be with a single exposed virtual machine.

This architecture provides a solid production-ready foundation while remaining simple enough to understand, extend, and discuss during technical interviews or portfolio reviews.

Build a simple react application to implement the contextApi (useContext)

Victor Webster — Tue, 10 Jan 2023 22:08:34 +0000

Let's build a simple react application to implement the contextApi.

Create a new react app using the command:

npx create-react-app

The following dependencies will be required for the application:
react-router-dom: To help with routing between pages in our application

react-error-boundary: To help with implementing error boundary

tailwindcss: A low utility css framework to help with styling our application

To install these dependencies, use the command:

npm install react-router-dom react-error-boundary

Let's talk briefly about the project structure.

Components: This folder will hold all our reusable components like Navbar, Sidebar, etc.
Context: This folder will house our userContext configuration file.
Hooks: This will hold our custom hooks file.
Pages: The different pages in our application will be here.

Build the Navbar component
Inside the components folder, create a Navbar.jsx file and put this code.

import React, { useState, useContext } from 'react';
import { UserContext } from "../context/UserContext";

const Navbar = () => {
  const [navbar, setNavbar] = useState(false);
  const { isAuth, userInfo, logout } = useContext(UserContext);

  const onLogout = (e) => {
    e.preventDefault();
    logout();
  };

   return (
     <nav className="w-full bg-blue-800 shadow">
       <div className="justify-between px-4 mx-auto lg:max-w-7xl md:items-center md:flex md:px-8">
         <div>
           <div className="flex items-center justify-between py-3 md:py-5 md:block">
             <a href="/">
               <h2 className="text-2xl font-bold text-white">AltSchool</h2>
             </a>
             <div className="md:hidden">
               <button
                 className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
                 onClick={() => setNavbar(!navbar)}
               >
                 {navbar ? (
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     className="w-6 h-6 text-white"
                     viewBox="0 0 20 20"
                     fill="currentColor"
                   >
                     <path
                       fillRule="evenodd"
                       d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                       clipRule="evenodd"
                     />
                   </svg>
                 ) : (
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     className="w-6 h-6 text-white"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
                     strokeWidth={2}
                   >
                     <path
                       strokeLinecap="round"
                       strokeLinejoin="round"
                       d="M4 6h16M4 12h16M4 18h16"
                     />
                   </svg>
                 )}
               </button>
             </div>
           </div>
         </div>
         <div>
           <div
             className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${
               navbar ? "block" : "hidden"
             }`}
           >
             <ul className="items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0">
               <li className="text-white hover:text-indigo-200">
                 <a href="/">Home</a>
               </li>
               <li className="text-white hover:text-indigo-200">
                 <a href="/about">About</a>
               </li>
               <li className="text-white hover:text-indigo-200">
                 <a href="/contact">Contact</a>
               </li>
             </ul>

             <div className="mt-3 space-y-2 lg:hidden md:hidden">
               {!isAuth ? (
                 <a
                   href="/login"
                   className="inline-block w-full px-4 py-2 text-center text-white bg-gray-600 rounded-md shadow hover:bg-gray-800"
                 >
                   Sign in
                 </a>
               ) : (
                 <>
                   <p className="inline-block w-full px-4 py-2 text-center text-white">
                     Welcome, {userInfo?.username}
                   </p>
                   <button
                     onClick={onLogout}
                     className="inline-block w-full px-4 py-2 text-center text-white bg-gray-600 rounded-md shadow hover:bg-gray-800"
                   >
                     Logout
                   </button>
                 </>
               )}
             </div>
           </div>
         </div>
         <div className="hidden space-x-2 md:flex">
           {!isAuth ? (
             <a
               href="/login"
               className="px-4 py-2 text-white bg-gray-600 rounded-md shadow hover:bg-gray-800"
             >
               Sign in
             </a>
           ) : (
             <>
               <div class="overflow-hidden relative w-10 h-10 bg-gray-100 rounded-full dark:bg-gray-600">
                 <svg
                   class="absolute -left-1 w-12 h-12 text-gray-400"
                   fill="currentColor"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
                     fill-rule="evenodd"
                     d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                     clip-rule="evenodd"
                   ></path>
                 </svg>
               </div>
               <div className="px-4 py-2 text-white">
                 <p>Welcome, {userInfo?.username}</p>
               </div>
               <button
                 onClick={onLogout}
                 className="px-4 py-2 text-white bg-gray-600 rounded-md shadow hover:bg-gray-800"
               >
                 Logout
               </button>
             </>
           )}
         </div>
       </div>
     </nav>
   );
   }

export default Navbar

Inside of the App.js file, import the navbar component.

import Navbar from "./components/Navbar.jsx";

const App = () => {
  return (
    <div className="App">
      <Navbar />
    </div>
  )
}

Set up userContext
Inside the context folder, create a userContext.js file and put this code.

import React, { createContext, useState, useEffect } from "react";

const initialState = {
  userInfo: null,
  isAuth: false,
};

export const UserContext = createContext(initialState);

export const UserContextProvider = ({ children }) => {
  const [userInfo, setUserInfo] = useState(null);
  const [isAuth, setIsAuth] = useState(false);

  useEffect(() => {
    const storedUser = localStorage.getItem("user");
    if (storedUser) {
      setUserInfo(JSON.parse(storedUser));
      setIsAuth(true);
    }
  }, []);

  const login = (username, password) => {
    setIsAuth(true);
    setUserInfo({ username, password });
    localStorage.setItem("user", JSON.stringify({username, password}));
    localStorage.setItem("auth", "true");
  };

  const logout = () => {
    fetch("/logout").then((res) => {
      setIsAuth(false);
      setUserInfo(null);
      localStorage.removeItem("user");
      localStorage.removeItem("auth");
    });
  };

   const value = {
      userInfo,
      setUserInfo,
      isAuth,
      setIsAuth,
      login,
      logout,
   };

   return (
      <UserContext.Provider value={value}> {children} </UserContext.Provider>
   );
};

export default UserContext;

We start by setting our default states for the user which is null for userInfo and false for isAuth. We can then use the createContext by react to create the userContext using the default states. Next, we create the contextProvider which takes a props of children and also create functions to handle login and logout in our application. When a user logs in, we update the user state and also store the updated user state in the localStorage to persist the details i.e it does not return to default on refresh.

We should have something like this on our screen when we run our application.

Set up Routing
Now, let's set up our routing. First, we build all the pages and components needed like our dashboard, 404, Login, About and Contact pages and import them into out App.js file then we set up error boundary using the react-error-boundary package we installed earlier.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { ErrorBoundary } from "react-error-boundary";

import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import NotFound from "./pages/404"
import Dashboard from "./pages/Dashboard";
import Navbar from "./components/Navbar.jsx";
import Login from './pages/Login';

const ErrorFallback = ({ error }) => {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: "red" }}>{error.message}</pre>
    </div>
  );
};
const App = () => {
  return (
    <div className="App">
      <ErrorBoundary FallbackComponent={ErrorFallback}>
        <Navbar />
        <Router>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/login" element={<Login />} />
            <Route path="/dashboard" element={<Dashboard />}/>
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </Router>
      </ErrorBoundary>
    </div>
  );
};

export default App;

Set up Custom hook
We will now set a custom hook to get the user from the userContext and can be used anywhere in our code. Inside the hooks folder, create a getUser.js file and add this:

import { useContext } from 'react';
import { UserContext } from "../context/UserContext";

const useGetUser = () => {
  const { userInfo, isAuth } = useContext(UserContext);
  return {userInfo, isAuth};
};

export default useGetUser;

The useGetUser hook can now be used anywhere in our code to get the current logged in user.

Set up protected routing
The protected routing is used to protect our routes from being accessed by unauthorized users. So, a user has to be logged in before they can access a route that is protected.

import { Navigate } from "react-router-dom";

export const ProtectedRoute = ({ children }) => {
   const isAuth = localStorage.getItem("auth");
   if (!isAuth) {
     // user is not authenticated
     return <Navigate to="/login" />;
   }
   return children;
};

Import the protectedRoute into the App.js file and wrap the elements of the routes you want to protect like this:

            <Route
              path="/dashboard"
              element={
                <ProtectedRoute>
                  <Dashboard />
                </ProtectedRoute>
              }
            />
            <Route
              path="/about"
              element={
                <ProtectedRoute>
                  <About />
                </ProtectedRoute>
              }
            />
            <Route
              path="/contact"
              element={
                <ProtectedRoute>
                  <Contact />
                </ProtectedRoute>
              }

The project should look something like this at the end:

When Unauthorized:

Authorized:

The link to the complete project has been provided below as well as the project link and other important documentations for packages and dependencies used in this application. In case you encounter errors or have any questions, you can go through the links or ask me in the comment section.

Thank you for reading!

Github Repo
https://github.com/ChukwurahVictor/altschool_exam

Project live link
https://zippy-kheer-15c249.netlify.app/

Tailwind Docs
https://tailwindcss.com/docs/guides/create-react-app