CDN Link when using AppEngine Page Speed - google-app-engine

I'm using PageSpeed for my app; I see that my css files are being combined into one but it uses google static content https://1-ps.googleusercontent.com/sx/s....
I need to have this final file loaded from my cdn (Cloudfront with active mapping to the same origin). It works on normal pagespeed installations on nginx.
How do I rewrite domains for pagespeed optimized file which is being loaded from google static server?
Thanks.

This may be confusing because there are several distinct PageSpeed optimization products:
mod_pagespeed/ngx_pagespeed are modules you install on your server, they allow you to rewrite resources onto any other domain (including your CDN).
PageSpeed Service is a service run by Google. You change your DNS to point to Google's servers and Google's serve the HTML and all the resources. When using PageSpeed Service, all resources get rewritten to the googleusercontent.com domain. I don't believe there is any option to change that to point to your CDN instead.
If you signed up for PageSpeed through App Engine, you are using PageSpeed Service and AFAIK there is no way to rewrite resources to a separate CDN.
Note that googleusercontent.com has many of the advantages of a CDN, it provides caching and low latency serving across the globe.

Related

How can I use Google Cloud CDN for static website hosted on Google App Engine?

I am serving a super simple static website on Google App Engine. I chose the Zurich location which serves content pretty decently within all locations that I tested within Europe. Speed tests that I did online show <1s page load speeds within Europe. In the US, especially west coast, South America, Asia and Australia the page load time is, however, over 3s which is for me not acceptable.
Therefore I thought of using Google Cloud CDN. Unfortunately their CDN seems to require some HTTPS load balancers and I have no idea how to set that up. Seems silly if Google had their own CDN but that doesn't work with their App Engine so I'd have to go to Cloudflare.
Unfortunately, you're not able to use Google Cloud CDN for you site on Google App Engine. Nowadays Cloud CDN could be used to serve content that originates from Cloud Storage buckets, Compute Engine instance groups, and Compute Engine network endpoint groups.
Have a look at the documentation Overview of Cloud CDN:
The Cloud CDN content delivery network works with HTTP(S) load
balancing to deliver content to your users. The HTTP(S) load balancer
provides the frontend IP addresses and ports that receive requests and
the backends that respond to the requests.
Cloud CDN content can be sourced from various types of backends:
Instance groups
Zonal network endpoint groups (NEGs)
Internet network endpoint groups (NEGs) (Beta), for endpoints that are outside of Google Cloud (also known as custom origins)
Buckets in Google Cloud Storage
I found at Google Public Issue Tracker two feature requests about adding Cloud CDN support for App Engine Standard and Flexible - you can join these cases, comment and track progress.
Possible workaround for a simple site you can find in this article.

Why can't I deploy a React app to Google Cloud Storage?

In the past when I've created a client-side web app using a framework like React, I can create a browser build and push it to a static hosting platform like AWS S3.
For Google Cloud Platform, it seems like the go-to approach is to deploy it to App Engine. If I'm understanding correctly, GAE is a combination of storage and compute resources.
Why can't I simply host the JavaScript app as prepared by webpack?
Google Cloud Storage (GCS) would be the way to go to host your static website on Google Cloud Platform (GCP). Notice that in order to use GCS you'll need to have a domain as well as a GCP project. The documentation is very straightforward on how to achieve this. Here you can find some examples and other useful information.
You could also host your static website on Google App Engine (GAE). But in this case you'll need to cleverly build your app.yaml file in order to manage your URL handlers, as well as structuring your project in a particular way. Simply uploading the JS app as prepared by webpack won't work. You can find all the useful information here in order to use GAE to host your static website.

Create a CDN with Google Cloud and Image Optimization

I have many websites and also websites made by clients which I would like to optimize. I am currently using different CDN providers but I would like to simplify my workflow and hopefully also lower the costs.
I would like to have a CDN with a Pull Zone, and that CDN would also optimize the images (while not modifying the other static resources).
Ideally, I would also have access to statistics for each Pull Zone (since I would like to charge my clients for this service instead of guessing).
What are the different ways to do this with the Google Cloud? Is there a way to do this only using Google Functions, CDN, and Google Storage? Of course, I guess that having a little NodeJS app running to optimize the images would be needed as well. I just wonder about the general architecture and if it is even possible (I know it is with Azure and AWS but I am already running a few things on the Google Cloud).
Thanks a lot :)
In GCP a pull zone can be created by associating a HTTP(S) Load Balancer to a Cloud Storage Bucket and enabling Cloud CDN.
Having a different bucket for every client will break down the logs on your project, but not the billing for it.
To be able to separate billing you can always export the logs to a BigQuery and use it to break down the billing costs per client based on their use.
Regarding the optimization of the images, Google CDN will not perform any operation, neither GCS Bucket.
The only operation available in this direction is when using and serving GZip-compressed files.
I suggest you to dedicate one Instance to be able to prepare the images before storing or to add/replace the optimized versions of the images already inside the bucket.

Using Google App Engine as a CDN

I'm building a static site which deploys to Google App Engine. Are there any advantages of storing the assets (js, css, imgs) in CloudStorage. All of the assets are going be under 32MB (if thats a limit).
Based on this slide (slides 24-28), it sounds like requests for static assets of a GAE app would use Google's special infrastructure designed for serving static assets. However its not clear about how its performance compares to Google CloudStorage.
Any clarifications on this would be much appreciated. Similar questions on Stackoverflow exists, but they are fairly dated (2010), and Google's Cloud products have changed since then.
Setting your cache headers will result in similar performance AFAIK.
Both GAE and GCS use Google Edge cache.
GCS is probably easier to manage your static resources, whereas it takes a redeploy to GAE to add/remove static resources.
Other important note : GCS as CDN does not work over HTTPS with custom domains. GAE does support HTTPS with custom domains.

Does Google App Engine use google CDN to distribute static resources?

I find a lot of articles on the web describing how GAE can be used as a CDN. But, I could not locate any mention about CDN in Google's documentation of App Engine.
Can somebody please point me to some official document/article mentioning how applications developed on top of GAE benefit from Google CDN servers?
Thanks in advance :)
Yes, GAE uses google's infrastructure for static content.
Have a look at this session at Google IO 2009 and read slides 24-28.
The static content is handled by specialized infrastructure. App runtimes don't serve them.
Using App Engine as distributed file hosting isn't really an "official" usage of the service, so that's why it's never mentioned in any official documentation.
App Engine apps are served out of multiple Google production datacenters, so in theory your app will serve requests (more or less) as quickly as GMail or Docs.
If all your app does is serve static files, then you've basically got a free (to a point) CDN built on Google's servers.
Some googling finds many examples of how to accomplish this.

Resources