Modern frontend frameworks like React, Angular, and Vite produce static assets after building the project. These assets include HTML, CSS, JavaScript, and images. Since they are static, they do not require a server runtime like Node.js to serve them.
Many developers initially deploy these apps on Google Cloud Run, but that approach often introduces unnecessary complexity and cost. A much better option is deploying the static build to Google Cloud Storage (GCS) with Cloud CDN.
This article explains why Cloud Storage + CDN is faster, cheaper, and simpler, and how you can deploy your frontend application in minutes.
Why Cloud Run is Not Ideal for Static Frontends
Cloud Run is designed for containerized backend applications. When you deploy a React or Vite app there, you typically run a Node server such as serve or nginx to deliver static files.
This creates several inefficiencies:
• You pay for container compute time
• Containers need to start and scale
• Cold starts can slow down responses
• Infrastructure is more complex than necessary
For applications that only serve static assets, using a compute service is unnecessary.
Why Google Cloud Storage + CDN is Better
Google Cloud Storage can serve static files directly, while Cloud CDN caches those files at edge locations worldwide.
Benefits include:
1. Much Lower Cost
Cloud Storage only charges for storage and bandwidth, not compute time. For most frontend apps, this can reduce costs by up to 90% compared to Cloud Run.
Cloud CDN caches your assets across Google's global edge network. Users download files from a location close to them, significantly improving load times.
3. Simpler Infrastructure
There are no containers, Dockerfiles, or runtime environments to manage. You simply upload files.
4. Automatic Scalability
Static hosting with CDN scales automatically to millions of requests without configuration.
Architecture Overview
The deployment architecture looks like this:
User → Cloud CDN → Google Cloud Load Balancer → Cloud Storage Bucket
Static files are stored in the bucket, while CDN nodes cache frequently accessed files.
Step 1: Build Your Application
If you're using Vite or React, generate the production build.
npm run build
This creates a folder such as:
dist/
or for CRA:
build/
This folder contains all files required to host the application.
Step 2: Create a Cloud Storage Bucket
Create a bucket that will host the static files.
gcloud storage buckets create gs://my-react-app-bucket \
--location=us-central1
Step 3: Make the Bucket Public
Allow public access so users can retrieve the assets.
gcloud storage buckets add-iam-policy-binding gs://my-react-app-bucket \
--member=allUsers \
--role=roles/storage.objectViewer
Step 4: Upload the Build Files
Upload the contents of your build folder.
For Vite:
gcloud storage cp -r dist/* gs://my-react-app-bucket
For Create React App:
gcloud storage cp -r build/* gs://my-react-app-bucket
Step 5: Configure the Website Entry Point
Set the default page to index.html.
gcloud storage buckets update gs://my-react-app-bucket \
--web-main-page-suffix=index.html \
--web-error-page=index.html
This ensures React Router works correctly by redirecting unknown routes to index.html.
Step 6: Enable Cloud CDN
For production-grade deployments, place the bucket behind a Cloud Load Balancer with Cloud CDN enabled.
Benefits include:
• Global caching
• HTTPS support
• Custom domains
• Faster asset delivery
While optional for small projects, CDN is highly recommended for real-world applications.
Cost Comparison
Typical monthly cost for a medium frontend application:
Cloud Run Deployment
• Compute charges
• Container startup time
• Networking overhead
Estimated cost: $10–$30/month
Cloud Storage + CDN Deployment
• Storage for assets
• Bandwidth usage only
Estimated cost: $1–$5/month
When You Should Use Cloud Run Instead
Cloud Run is still the right choice when your application includes:
• Backend APIs
• Server-side rendering (Next.js SSR)
• Authentication services
• AI or database integrations
In these cases, compute is required.
Final Thoughts
If your application is a pure frontend build, deploying it on Cloud Run is unnecessary. Hosting the build on Google Cloud Storage with Cloud CDN is simpler, faster, and significantly cheaper.
By eliminating containers and compute layers, you can deliver your application globally with minimal infrastructure while benefiting from Google’s edge network.
For most React, Angular, and Vite applications, Cloud Storage + CDN is the optimal production deployment strategy.