Lab 6: Introduction to Content Delivery Networks (CDN)

F5 Distributed Cloud CDN (Content Delivery Network) provides integrated security with support for content caching and containerized edge-based workloads for richer digital experiences. Built on a high-performance, secure global private network, F5 Distributed Cloud CDN enables rich digital experiences for end users. Distributed Cloud CDN integrates with critical app security services to empower your organization as it pursues multi-cloud and edge-based initiatives.

This lab provides an introduction to CDN services available within Distributed Cloud. The following steps will demonstrate the process of configuring CDN features within F5 Distributed Cloud Console. These steps will outline the process of creating CDN Distribution, and the steps involved for CDN Verification & viewing the Dashboard.

Task 1: Create CDN Distribution

  1. Login as SecOps, NetOps, or DevOps User

  2. Select ‘Content Delivery Network’ from Common Services.

    ../_images/lab6-001.PNG

You can also select it from the left drop-down menu.

../_images/lab6-002.PNG
  1. Select Manage > Distributions > Add Distribution

    ../_images/lab6-003.PNG
  2. Enter the following variables:

    Variable

    Value

    Name

    <namespace-cdn>

    Domains

    <namespace-cdn.lab-sec.f5demos.com>

    ../_images/lab6-004.PNG

    Variable

    Value

    Type of CDN Distribution

    HTTP

    ../_images/lab6-005.PNG

    Variable

    Value

    Automatically Manage DNS Records

    Enabled/Checked

    ../_images/lab6-006.PNG
  3. Under ‘CDN Origin Pool’ select ‘Configure’.

    ../_images/lab6-007.PNG
  4. Enter the following variables under ‘Origin Host Header’

    Variable

    Value

    DNS Name:

    appedge.one

    Enable TLS for Origin Servers

    No TLS

    ../_images/lab6-008b.PNG
  5. Select ‘Add Item’ under the ‘List of Origin Servers’.

    ../_images/lab6-009.PNG

    Variable

    Value

    Type of Origin Server:

    Public DNS Name of Origin Server

    DNS Name

    appedge.one

    ../_images/lab6-010b.PNG
  6. Select ‘Apply’ > ‘Apply’ > ‘Save and Exit’.

    ../_images/lab6-011.PNG
  7. The CDN Distribution will take a few moments to deploy. You can click the ‘Refresh’ button to monitor the status as it goes from ‘Pending’ to ‘Active’.

    ../_images/lab6-012.PNG
  8. Once the CDN Distribution is active you can launch a new browser window and navigate to <namespace-cdn.lab-sec.f5demos.com

    Note: It may take 1-2 minutes before the site loads

    ../_images/lab6-013.png
  9. In chrome, right click on the screen and navigate to developer tools (Inspect). Then click on the “Network’ tab and check the ‘Disable cache’ option before refreshing the page a few times.

  10. Select the upper lefthand menu and navigate to the various sub-pages to generate some traffic.

    ../_images/lab6-014b.PNG

    Congratulations!! You successfully deployed a CDN Distribution within F5XC.

  11. Now you will see monitoring/performance statistics within the F5XC dashboard.

  12. Naviate to the Monitoring > Performance section within the CDN configuration. Then select the CDN Distribution you just created (namespace-cdn).

    ../_images/lab6-015.PNG
  13. Click around to review to the dashboard statistics.

    ../_images/lab6-016.PNG
  14. On the main dashboard, you will notice requests being categorized as ‘Hits’ or ‘Misses’.

    A cache miss occurs when a client device makes a request to the CDN and the CDN cache does not have the requested content.

    A cache hit occurs when the CDN cache has the requested content. Content is delivered with lower Time-To-First-Byte (TTFB) on a cache hit because the CDN can immediately deliver the content to the end user without having to make an origin pull.

    An origin pull occurs anytime the CDN server needs to pass a request to the origin server. This typically occurs on a cache miss. On an origin pull, the CDN will cache the content contained in the origin server’s response. Subsequent requests for the same content will result in a cache hit and lower latency for end users.

  15. You will notice a series of ‘Misses’ after refreshing the page serveral times. The reason the requests are identified as ‘misses’ is due to the ‘Cache-Control’ headers that are being injected into the request/resonse and origin caching. Distributed Cloud CDN allows you to configure advanced “Header Controls’ and additional ‘Cache Options’.

  16. Lets go back into the CDN Distribution configuration by navigating to Manage > Distributions.

  17. Under the ‘Actions’ Column, click the ellipses (ie. three dots), then select Manage Configuration.

    ../_images/lab6-017.png ../_images/lab6-018.PNG
  18. In the upper right hand corner, select ‘Edit Configuration’.

    ../_images/lab6-019.PNG
  19. At the bottom of the screen, under ‘Advanced Configuration’, select the ‘Show Advanced Fields’ toggle button.

    ../_images/lab6-020.PNG ../_images/lab6-021.PNG
  20. Under ‘More Options’ > ‘Header Control’ select ‘Configure’

    ../_images/lab6-022.PNG
  21. We are now going to remove the ‘Cache-Control’ header from both the origin request and response. Select ‘Configure’ under the ‘Remove Origin Request Header’ option.

    ../_images/lab6-023.PNG
  22. Select ‘Add Item’

    ../_images/lab6-024.PNG
  23. Enter ‘Cache-Control’ as the header name. Then select ‘Apply’ at the bottom of the screen.

    ../_images/lab6-025.PNG
  24. Perform the same step for the ‘Remove Response Header’ option.

    ../_images/lab6-025b.PNG
  25. Select ‘Add Item’

    ../_images/lab6-026.PNG
  26. Enter ‘Cache-Control’ as the header name. Then select ‘Apply’ at the bottom of the screen.

    ../_images/lab6-027.PNG
  27. You will now see the ‘Remove Origin Request Headers’ and ‘Remove Response Headers’ configured. Click ‘Apply’ at the bottom of the screen.

    ../_images/lab6-028.PNG
  28. You will now be returned to the main Distributed configuration. The final step is to change the ‘Default Cache TTL’ value from the origin server for demonstration purposes. Select ‘Configure’ under the ‘Cache Options’.

    ../_images/lab6-029.PNG
  29. Under the ‘Cache Settings’ menu, select ‘Default Cache TTL’ and set the ‘Default Cache TTL’ value to ‘5d’ then click ‘Apply’.

    ../_images/lab6-030b.PNG
  30. Once ‘Header Control’ and ‘Cache Options’ are configured click Save and Exit at the bottom.

    ../_images/lab6-031.PNG
  31. With the advanced options configured, we can now retest/refresh the application to see the new results.

  32. Now you will see the ‘hits’ counter increase.

    ../_images/lab6-032.PNG
  33. Lab Completed!