ÃÛ¶¹ÊÓƵ

Cloud 5 - Bring Your Own Cloudflare CDN

Explore how to configure your own Cloudflare CDN into Edge Delivery Services.

video poster

Transcript
Hello, my name is James Talbot and welcome to the AEM Edge Delivery interview series. I’m here with Kumar Saluja, who is a cloud architect in the AEM engineering team at ÃÛ¶¹ÊÓƵ, and he’s going to talk to us today about the bring your own CDN philosophy behind Edge Delivery Services. We’re very much looking forward to hearing from him. Kumar, do you mind giving your quick introduction to yourself? Sure, James. Hi, everyone. My name is Kumar Saluja and I’ve been working with AEM and Edge Delivery Services for a few years now and happy to be here, James. Great. Well, let’s get right into it. First of all, does a customer have to use a CDN when launching an AEM Edge Delivery site? James, at the time of the launch, customers have the option to launch their AEM site with their custom domains by bringing a CDN of their choice, or they can launch a site without one. So some common CDNs that we’ve been seeing with customers is Cloudflare, Akamai, Cloudfront, but customers can bring their own CDN, so it’s all good. So today we’ll discuss about Cloudflare CDN being used as the custom CDN to launch AEM sites. Great. Great. Well, let’s talk about Cloudflare and let’s talk about the main steps that you need to do to configure this bring your own CDN setup with Cloudflare. So James, main steps to configure the Cloudflare as a CDN in front of the AEM Edge Delivery site includes a few steps. First is to create a Cloudflare site using the Cloudflare dashboard. Then we have to do the DNS setup that includes a CNAME record creation. Then we need to configure the SL and the TLS setup, that is to always use the HTTPS by default. Then we need to configure caching, that includes setting the caching level and the browser cache TTL. Then we’ll also have to create a page rule to set the caching level, the browser cache TTL, and the origin cache control headers. Once that is done, then we’ll have to create workers and align those workers with the worker routes. That makes sense, Kunwar. Now, I know you can use either Google Drive or SharePoint for the content source, but is there anything we need to do on that content source side to make this setup that you’re talking about actually work? Yes, James. So we need to do an extra step, that is to configure the push invalidation for the cache in our content source. So it can be the SharePoint or Google Drive, right? So just to give you some insight, the push invalidation automatically purges the content in the customer’s CNAME such that whenever an author publishes or changes the content and previews and publishes it, the new content is visible on the live site. So to achieve that, we need to configure a few parameters on the content source side. So we have a config file, a config spreadsheet that we need to align some few parameters with and we can get these parameters from the Cloudflare dashboard. I see. I see. Fantastic. And I think I can showcase you along with that, I think we can have a look at that, the content source and the Cloudflare dashboard so you can get those parameters in and see that in action. Yeah, let’s do a quick demo. Yeah. So this is one of the sample sites on AEMH delivery. And if you see this is a dot helix folder. Within that folder, we have a config file. It’s a spreadsheet. All these parameters such as CDN prod host, CDN prod type, prod plan, zone ID and API tokens have to be set to configure the push caching validation successfully. So these parameters, like say for example, the CDN prod host, right? This is the actual domain that you will be putting in. The prod type can be the CDN type, Cloudflare, Akamai, Cloudfront and so on. The other things are specific, be it zone ID, API token ID and so on. So going back to the Cloudflare dashboard, this is a sample site that we can have a look at. So looking at on the right hand side bottom, we can find all these parameters that we can put that in the content source, be it zone ID, the account ID, and we can also generate our API token. That’s fantastic. It’s amazing how edge delivery makes this so easy. All you have to do is update a spreadsheet. That’s fantastic. Can you go over how to actually create Cloudflare workers and worker routes? Sure, James. We can create workers and worker routes using the Cloudflare dashboard. So navigating to the actual site and the worker routes, we can create a route by just saying www.xyz.com. So this would have a worker ready and be in action with this specific route. To create the route, what we need to do is we need to go into the actual worker setup, click on manage workers, create an application, create a worker and just deploy. And once the sample worker is deployed, you can change the code to render the content from the AEMH delivery site. The sample code for these Cloudflare workers to serve content from the AEMH delivery site is available on our documentation, which is AEM.live. You can search for bring your own CDN with Cloudflare and you can find the sample code on that. So once this Cloudflare worker is created, you can just see it. So this is the sample worker that I created and you can edit the code. This includes like how the content is being rendered from the edge delivery origin. This also includes the origin hostname, a bunch of headers that we need to set and then we deploy. So once this worker is ready to go, we also have to create the variable which is the original variable that the Cloudflare worker relies on and that the value has to point to the actual .live URL for your edge delivery site. I see. That makes sense, Kunmar. Fantastic. Another quick question. Is it possible to just serve a portion of the website with the routes being over to edge delivery and using a specific folder for those routes? Sure, James. So for the subset of the site, you can adjust the worker code or the worker routes to serve the portion of the site using the Cloudflare CDN. I see. That makes a lot of sense. Thank you. Kunmar, this has been very helpful, very enlightening. It’s really fantastic to see the ease of use of edge delivery services. For those of you who are interested in doing an even deeper dive, what we can do is we can share the documentation. You’ll see the link to the documentation on your screen here. Here you can see the link to the documentation right here on aem.live just as Kunmar mentioned. And again, you can also click on the link and this will take you right to the documentation if you need some more information and you want a review of what Kunmar just outlined for us. But again, thank you very much, Kunmar. That was super helpful and we will talk to you next time. Thank you. Thanks, James. Thank you. Thanks, James.

Additional Resources

Watch related videos on the Cloud 5 season 3 page.

recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69