How to serve Angular deeplinks from a Cloud CDN storage bucket

2
votes

I am using a Google Cloud Storage bucket to serve my Angular website through Google Cloud CDN. It works when I am trying to access mysite.com/index.html, but some actions on my website are doing url rewrite.

I can end up having urls like mysite.com/myaction

And when the user refreshes via F5 or navigate back there is an error message and the content is not served.

There is no such option in the load balancer, in the bucket or in cloud cdn.

How can I serve such deep links using this configuration?

1
google-cloud-platform

1 Answers

2
votes

As long as 'myaction' is not a file, Cloud CDN will not find it in the Cloud Storage bucket and will throw an error ('No such keys') meaning that it didnt't find any object named 'myaction'.

This error is like a 404. Your angular website being a single page application, you want to always serve index.html, therefore you can use the gcloud commands:

gsutil web set -m index.html gs://name_of_your_bucket
gsutil web set -e index.html gs://name_of_your_bucket

This will set index.html as the default page when no file is specified in the url or the landing page in case of a 404 error.