Deploying an Angular app on Google Cloud with minimal costs

Question

I am looking to deploy my Angular app to Google Cloud, including the following:

• serving static files produced by ng build
• on my custom domain: site.example.com
• proper Angular deep linking (see also Angular docs): serve index.html on site.example.com, site.example.com/home, site.example.com/profile etc, while also serving other files (e. g. /assets/icon.png) normally
• minimizing costs, as I'm on a very strict budget (<$5/month preferred)

I've tried to deploy my static files to a Google Cloud Storage bucket, and could serve index.html by setting the "website configuraton" -> "index (main) page suffix". However, I do not see a way of redirecting other routes like site.example.com/home to index.html too using only Cloud Storage.

Other things I've looked into include:

• using a Cloud Load Balancer (as suggested in this article), but I believe it will get very pricey because it uses Compute Engine (right?)
• using a custom server on Cloud Run or Computer Engine, but this seems like overkill for serving static files, and could be cost intensive
• using Google App Engine, but I am not sure whether it supports all my requirements (especially the URL rewrites for Angular), and it would be nice to be able to deploy my static files separate from my backend, however I do see this as a fallback alternative and would appreciate any guidance on how to use GAE for this

TL;DR I need help with server-side URL rewrites for Angular and minimizing costs.

Thanks a lot for any help!

Answer 1

I haven't managed to properly setup an App Engine instance to statically serve my Angular dist files and redirect routes to non static files with the root index.html without having to explicitly list all possible routes.

e.g. my current app.yaml file

# --- NOT RECOMMNENDED: need to explicitly list all Angular routes ---
runtime: nodejs22

handlers:
  - url: /
    static_files: dist/index.html
    upload: dist/index.html
  - url: /(routeA|routeB|routeC).*
    static_files: dist/index.html
    upload: dist/index.html
  - url: /
    static_dir: dist

Among others, I haven't been able to use error_handlers in a useful way.

My solution is to deploy my SPA with Firebase Hosting. The interactive firebase init command works like a charm, especially when asking about rewriting all URLs to index.html

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
? File dist/index.html already exists. Overwrite? No

Any thoughts on this alternative or how I should have configured my app.yaml?

Answer 2

As long as it's static file, I strongly recommend to use App Engine standard. You serve for free your website (no server cost, static files are served for free) and you have up to 1Gb egress free per day!

In addition, you can use custom domain to plug your DNS name on top of App Engine and let Google Cloud managing the SSL certificate.

Definitively, it's the simplest and the cheapest solution to host static websites.