Proof of concept on Pantheon + Deploy on Google Cloud Platform

Iā€™m in contact with Andrew Taylor from Pantheon, heā€™s experimenting with Frontity and wants to work on a guide to deploy Frontity on that hosting.

The conversation has started here: https://github.com/frontity/frontity/issues/111

Next steps are:

  • Andrew will work on a proof of concept.
  • He wants to use Google Cloud Platform to host the node part, so we have to take a look to this (@development-team we need your help here :blush: )
  • We will create a guide explaining the whole process

We need the help of somebody with more experience with Google Functions.

The Frontity server is a default export of a req-res function. As far as I know Google Functions accept req-res functions, although Iā€™m not sure if they need a named export or can work with the default. Exporting a named function wouldnā€™t be a problem though.

@Pablo maybe we could ask for help at Google Campus Madrid?

Iā€™ve asked :slight_smile: Letā€™s see if we can use some help from Google here!

1 Like

@andrew Iā€™ve just uploaded Frontity to GCP Functions and it works.

Things you have to do to make it work as Frontity is right now:

  • Rename /build/server.js to /build/index.js.
  • Compress index.js to a zip file.
  • Upload that zip to a Google Function.
  • Set ā€œFunction to executeā€ to default.

I havenā€™t used Google Cloud in the past so I donā€™t know how to assign a real domain to that Function, serve the other static files or use the Google CDN on top of all that. But the server works :slight_smile:

If someone with experience with GCP wants to help us out we could create a guide with instructions on:

  • How to deploy the Frontity server to Google Function.
  • How to serve the Frontity static assets using Google Cloud (Storage?).
  • How to add Google CDN on top of that.
  • How to access all that stuff on your own domain.

@luisherranz I mirrored the progress you made with a slight tweak. I have the repo on GiHub and am using GCP cloud build to build and deploy the GCP cloud function.

You can find the repo at https://github.com/ataylorme/pantheon-frontity-proof-of-concept and see the Frontity site at https://us-central1-pantheon-frontity-poc.cloudfunctions.net/frontity-server.

It is pulling content from scalewp.io, which is hosted on Pantheon.

As you noted it is still missing some things:

  • The static directory is not hosted
  • There is no custom domain
  • I havenā€™t themed anything yet
  • No CDN support on the Google side
    • The images in the content are pulling from Pantheon and use our CDN, so those are okay.

Oh, I see. Much better obviously :sweat_smile:

I add trouble using server.js so I renamed it to index.js. Thatā€™s fixed in your configuration, right?


One problem is that GC strips the folder in the server, like this:

  • /frontity-server/xxx becomes /xxx.

But in the client, well that url is obviously /frontity-server/xxx so it doesnā€™t match.

It cannot be fixed by adding the setting:

  • subfolder: "/frontity-server"

because then the client urls become /frontity-server/frontity-server/xxx.

I saw you changed your menu to fix that and it works fine with SSR, but that wonā€™t work once the client is rehydrated.

Anyway, itā€™s not that important as this should not be a problem once you add a custom domain.


For what Iā€™m reading it looks like you cannot connect a custom domain to a Function. Have you taken a look into that? People say you need to somehow use Firebase for thatā€¦

Iā€™m also afraid itā€™s going to be difficult to serve the /static/ folder with the same domain than the Function, but that can be solved using a custom publicPath in Frontity:

"publicPath": "https://static.mydomain.com"

And then just upload the /static/ folder to a bucket which uses that domain.

A customer engineering manager of Google Cloud confirmed me that there is now way to map a Google Function with a custom domain or add SSL certificate. A CNAME works, but you could not get rid of the folder (like /frontity-server/) or add SSL.

So he told me that we should try Firebase Functions instead:
https://firebase.google.com/docs/hosting/functions

It looks like in Firebase the CDN is already working on top of both the static and dynamic (serverless) hosting:
https://firebase.google.com/docs/hosting/serverless-overview

Cache dynamic content ā€” You can configure caching of your dynamic content on a global CDN.
For example, if a function generates new content only periodically, you can speed up your app by caching the generated content for at least a short period of time. You can also potentially reduce execution costs because the content is served from the CDN rather than via a triggered function or containerized app.

And it supports custom domains with SSL certificates:
https://firebase.google.com/docs/hosting/custom-domain

In general, it looks like a much simpler solution to setup than GCP.

@andrew1 are you familiar with Firebase? Is there any reason why you need to use GCP?

are you familiar with Firebase? Is there any reason why you need to use GCP?

I am not familiar with Firebase - Iā€™ll have to do some reading. The main reason I wanted to do this with GCP is that Pantheon runs on GCP so integrating Frontity into our product would require the use of GCP. Requiring folks to create their own Firebase account and do set up is not ideal.

Ok, I see, thanks.

We have another approach planned that would work in this scenario. We call it the ā€œPHP theme bridgeā€ internally. It wonā€™t be a theme actually, but a feature of our PHP plugin that overrides the real theme with a HTTP call to a Frontity server that retrieves the final HTML. Something like this:

It has some advantages and some disadvantages, of course, but it works and would allow you to use Google Functions from GCP. Actually, I think this setup would be much simpler in your case, because you can keep both SSL and the CDN of WordPress. Oh, and it doesnā€™t need two different domains either.

That looks really great! Email me when the PHP them bridge is ready to test and Iā€™ll happily provide some feedback. For now I think we can close this thread as the exploration into GCP ended in use Firebase.

Sure, weā€™ll let you know. It shouldnā€™t be difficult to do, but I donā€™t know yet when weā€™ll be able to do it. Right now weā€™re still working on the long-term roadmap so Iā€™ll probably know more in 1-2 months.

1 Like

Google Cloud Run looks really promising. Itā€™s serverless but based on docker. It supports custom domains with HTTPS provided by Letā€™s Encrypt

The only drawback right now is that it doesnā€™t work with the Google Cloud CDN.

Iā€™m going to ask them if they have plans to add CDN support in the near future.


@andrew, It looks like Pantheon CDN is based on Fastly (not Google) and you have a pretty powerful invalidation plugin for WP, right? So I guess that for Pantheon use case it doesnā€™t make sense to make this work with Google CDN anyway.

1 Like

@luisherranz that is interesting. I am traveling this week but will take a look at it when I can. You are right that Pantheon has a global CDN based on Fastly. However, that only works when DNS is pointed at Pantheon. Iā€™m not sure if we will be able to do that with Google Cloud Run custom domains.

Our cache invalidation works when WordPress is serving the front-end. It works for REST API routes too but wonā€™t clear cache in Frontity (or other decoupled front-ends), though it could be modified to call an API to do just that when a post is edited.

2 Likes

Ok. Looks like the ā€œPHP Theme Bridgeā€ is going to be the ideal option for your case because everything youā€™ve already built is going to work out of the box. Good to know!

Have fun in WordCamp NYC! :slight_smile:

Just for the record: Yes, they plan to do so before the end of the year.

Hi @luisherranz and @Pablo, Iā€™m another developer at Pantheon and Iā€™m doing some follow up work on what Andrew had started last summer.

Iā€™m curious how the development of the Theme Bridge is going. Over the weekend I was able to connect my personal blog to a Frontity instance running on a Cloud Function. Iā€™m using some proxy code in PHP thatā€™s conceptually like the Theme Bridge idea.

Hereā€™s PHP loading an admin path: https://pr-77-stevector-composer.pantheonsite.io/wp/wp-admin/
And hereā€™s PHP proxying to a Cloud Function with Frontity https://pr-77-stevector-composer.pantheonsite.io/

Maybe we could combine efforts.

2 Likes

Hey @stevepersch that is awesome :clap::smile:

We are still gathering requirements, so no code yet. But itā€™s one of our top priorities right now and my guess is that we will be able to start the work at the end of March.

Absolutely! What about a call to meet each other?

Hey Steve!

Welcome to Frontity and glad the read that you are taking over Andrewā€™s research. It would be great to have a quick call to see how we can collaborate, your PoCs look great.