{"id":20329768,"url":"https://github.com/f5devcentral/xcwaapcdnguide","last_synced_at":"2025-08-30T15:27:59.686Z","repository":{"id":62065741,"uuid":"553748792","full_name":"f5devcentral/xcwaapcdnguide","owner":"f5devcentral","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-20T08:11:52.000Z","size":7101,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-01-14T15:18:19.803Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/f5devcentral.png","metadata":{"files":{"readme":"README.rst","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-18T17:51:55.000Z","updated_at":"2024-05-20T08:11:56.000Z","dependencies_parsed_at":"2024-05-20T09:30:40.995Z","dependency_job_id":"5895936a-4fe2-4dac-956a-8b9786f8a68a","html_url":"https://github.com/f5devcentral/xcwaapcdnguide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f5devcentral%2Fxcwaapcdnguide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f5devcentral%2Fxcwaapcdnguide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f5devcentral%2Fxcwaapcdnguide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f5devcentral%2Fxcwaapcdnguide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/f5devcentral","download_url":"https://codeload.github.com/f5devcentral/xcwaapcdnguide/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241844521,"owners_count":20029666,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T20:13:26.592Z","updated_at":"2025-08-30T15:27:59.676Z","avatar_url":"https://github.com/f5devcentral.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"F5 Distributed Cloud CDN with WAAP\n###################################\n\n==================================================\n\n.. contents:: Table of Contents\n\nObjective\n#########\n\nUse this guide and the provided sample app to explore F5 Distributed Cloud CDN from the lens of **Application Delivery** and **Application Security**, specifically **Web Application and API Protection** (WAAP) solution area. The guide will showcase **F5 Distributed Cloud Content Delivery Network** capabilities with **F5 Distributed Cloud App Connect**, and **F5 Distributed Cloud WAF** to protect the app. In the course of the guide we will get familiar with the following features:\n\n- HTTP Load Balancer with WAF protection\n- CDN configuration \n- App protection via CDN \n\n.. figure:: assets/overview.gif\n\nThis guide can be completed step-by-step using the F5 Distributed Cloud Console, or leverage automatic configuration via included `Ansible scripts \u003c/ansible\u003e`_.\n\nPre-requisites\n##############\n\n- F5 Distributed Cloud Console account\n- A web browser to access the Console, attack the app and see the developer tools to test load time with / without CDN\n  \nFor Ansible configuration:\n- Linux-based system (or on Windows run Windows Subsystem for Linux) with configured Ansible binaries - follow the `Ansible section \u003c/ansible\u003e`_ of the guide.\n\nCreate HTTP Load Balancer with Web Application Firewall\n#######################################################\n\nFirst, we will need to create and configure an HTTP Load Balancer for our app. We will enable redirect to HTTPS and then create an origin pool for the services. Origin pools consist of endpoints and clusters, as well as routes and advertising policies that are required to make the application available to the internet. After that, we will enable and configure WAF for HTTP Load Balancer. \n\nTo start with, navigate to the **Multi-Cloud App Connect** service in the service menu.\n\n.. figure:: assets/dashboard.png\n\nSelect **Load Balancers** and then proceed to **HTTP Load Balancers**. Click the **Add HTTP Load Balancer** button to open the form of HTTP Load Balancer creation.\n\n.. figure:: assets/lb_open.png\n\nThen give it a name and move on to domain configuration.\n\n.. figure:: assets/lb_meta.png\n\nNext we need to provide a domain name for our workload: a domain can be delegated to F5, so that Domain Name Service (DNS) entries can be created quickly in order to deploy and route traffic to our workload within seconds. In this demo we use **buytime.f5-cloud-demo.com**. Enable HTTP redirecting to HTTPS, as well as adding HSTS Header. \n\n.. figure:: assets/lb_domain_ssl.png\n\nAfter that let's create a new origin pool, which will be used in our load balancer. The origin pools are a mechanism to configure a set of endpoints grouped together into a resource pool that is used in the load balancer configuration. Click **Add Item** to open the pool creation form.\n\n.. figure:: assets/lb_add_origin_1.png\n\nThen open the drop-down menu and click **Add Item**.\n\n.. figure:: assets/lb_add_origin_2.png\n\nTo configure the origin pool we'll add a pool name, followed by a set of config options for the pool. First, let's give this pool a name.\n\n.. figure:: assets/lb_add_origin_3.png\n\nNow click **Add Item** to start configuring an origin server.\n\n.. figure:: assets/lb_add_origin_4.png\n\nLet's now configure origin server. First open the drop-down menu to specify the type of origin server. For this demo select **Public IP of Origin Server**. Then specify the Public IP - **54.208.44.177**. Complete by clicking **Apply**.\n\n.. figure:: assets/lb_add_origin_5.png\n\nNext, we need to configure the port (the end point service/workload available on this port). Type in **80** and click **Add Origin Pool**.\n\n.. figure:: assets/lb_add_origin_7.png\n\nOnce done, click **Apply** to apply the origin pool to the Load Balancer configuration. This will return to the Load Balancer configuration form.\n\n.. figure:: assets/lb_add_origin_9.png\n\nIn the **Web Application Firewall** section first enable **Web Application Firewall** in the drop-down menu, and then click **Add Item** to configure a new WAF object.\n\n.. figure:: assets/lb_add_waf_1.png\n\nFirst, give firewall a name. Then specify enforcement mode in the dropdown menu. The default is Monitoring, meaning that the Distributed Cloud WAF service won't block any traffic but will alert on any request that is found to be violating the WAF policy. Blocking mode means that the Distributed Cloud WAF will take mitigation action on offending traffic. Select **Blocking** and click **Add App Firewall**.\n\n.. figure:: assets/lb_add_waf_2.png\n\nClick **Add HTTP Load Balancer** to save the HTTP Load Balancer settings.\n\n.. figure:: assets/lb_save.png\n\nTBD\n\nNow we need to copy the host name. Open the menu of HTTP Load Balancer we've just created and select **Manage Configuration**.\n\n.. figure:: assets/lb_dns_1.png\n\nCopy the host name you see in the configuration. Host name will be used as CNAME value for the domain. After copying the host name, move on and copy CNAME value. It will be used to create an HTTPS certificate.\n\nNOTE: You can skip these steps if you have `delegated your DNS domain \u003chttps://docs.cloud.f5.com/docs/how-to/app-networking/domain-delegation\u003e`_ to F5® Distributed Cloud Services.\n\n.. figure:: assets/lb_dns_2.png\n\nEdit your DNS Zone and create new CNAME records. To do that, go to the **DNS Management** service and proceed to the **DNS Management**. Select **Manage Configuration** in DNS Zone service menu.\n\n.. figure:: assets/lb_dns_3.png\n\n.. figure:: assets/lb_dns_4.png\n\nIt may take a few minutes to update the DNS info and generate and apply the certificate. You will see that the certificate is valid as in the picture below:\n\n.. figure:: assets/lb_dns_5.png\n\nCreate Content Delivery Network\n###############################\n\nLet's now create a high-performance content delivery via the F5 Global Network. Distributed Cloud CDN improves content delivery across environments providing integrated security with support for content caching and containerized edge-based workloads for richer digital experiences. \n\nOpen the service menu and select **Content Delivery Network**.\n\n.. figure:: assets/cdn_open.png\n\nNavigate to **CDN Distributions** and click the **Add CDN Distribution** button. \n\n.. figure:: assets/cdn_create_1.png\n\nFirst, give it a name, then fill in the domain with the CDN indication - **buytime-cdn.f5-cloud-demo.com**. And finally, enable HTTP redirect to HTTPS and adding HSTS Header. \n\n.. figure:: assets/cdn_create_2.png\n\nLet's now create a pool for CDN. Scroll down to the **CDN Origin Pool** section and click **Configure**.\n\n.. figure:: assets/cdn_create_3.png\n\nType in the DNS name **buytime.f5-cloud-demo.com** and click **Add Item** to add an origin server.\n\n.. figure:: assets/cdn_create_4.png\n\nIn the dropdown menu select **Public DNS Name of Origin Server** to fill in the **buytime.f5-cloud-demo.com**  DNS name. Then click **Apply**.\n\n.. figure:: assets/cdn_create_5.png\n\nTake a look at the CDN Origin Pool configuration and complete by clicking **Apply**.\n\n.. figure:: assets/cdn_create_6.png\n\nYou will see the CDN configuration. Click **Add CDN Distribution** to save the configuration and proceed.\n\n.. figure:: assets/cdn_create_7.png\n\nTBD\n\nYou can see the CDN we just created. Now that we've created a CDN, we can need to activate the certificate by specifying DNS records. Open the configuration menu and select **Manage Configuration**.\n\nNOTE: You can skip these steps if you `delegated your DNS domain \u003chttps://docs.cloud.f5.com/docs/how-to/app-networking/domain-delegation\u003e`_ to F5® Distributed Cloud Services.\n\n.. figure:: assets/cdn_dns_1.png\n\nCopy the CNAME value for the domain and service domain. \n\n.. figure:: assets/cdn_dns_2.png\n\nCreate corresponding records in your DNS Zone. Go to the **DNS Management** service and proceed to the **DNS Management**. Select **Manage Configuration** in DNS Zone service menu.\n\n.. figure:: assets/cdn_dns_3.png\n\n.. figure:: assets/cdn_dns_4.png\n\nYou will see the created CDN with the valid certificate. Let's move on and test the app. \n\n.. figure:: assets/cdn_dns_5.png\n\nTest CDN \n########\n\nFirst, let's test the app without the CDN added. As you can see in the picture below, load time is 2.04 s.\n\n.. figure:: assets/tests_waap.png\n\nNow let's see the load time for the app with CDN. As you can see in the picture below, the load time for CDN app is 1.17 s, and the **x-cache-status** is **HIT** which means that your request was served by CDN, not origin servers.\n\n.. figure:: assets/tests_cdn.png\n\nNow we will attack the app to see that the attacks are blocked by WAAP services in CDN. \n\n.. figure:: assets/test_cdn_waap.png\n\nIn case of content updates in your origin servers, you can force the CDN servers to fetch the updated content using the purge option. Open the configuration menu of the CDN and select **Purge CDN Cache**. The CDN service initiates purge for all the cache servers.\n\n.. figure:: assets/cdn_purge.png\n\n\nAutomated Config of the Demo Environment Configuration via Ansible\n##################################################################\n\nFollow the README in the `Ansible scripts \u003c/ansible\u003e`_ directory to set up the environment and the demo. You will need to configure the required Ansible Galaxy collections, tokens, and also update the playbook.yaml section in the beginning of the playbook that captures F5 Distributed Cloud environment settings.\n\nOnce configured, we recommend you review *playbook.yaml* sections, and pick those you'd like to run (such as environment setup), and comment out the rest. Of course, you can choose to run the entire playbook -- that will go through and do all of the setup \u0026 demo config steps automatically from beginning to end.\n\n\nWrap-Up\n#######\n\nAt this stage you should have set up a CDN for your app. You've configured and applied high-performance content delivery via the F5 Global Network with integrated security and support for content caching. \n\nWe hope you have a better understanding of F5 Distributed Cloud CDN and are now ready to implement it for your own organization. Should you have any issues or questions, please feel free to raise them via GitHub. Thank you!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff5devcentral%2Fxcwaapcdnguide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ff5devcentral%2Fxcwaapcdnguide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff5devcentral%2Fxcwaapcdnguide/lists"}