Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How Akamai Made ESI Testing Simpler

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.

How Akamai Made ESI Testing Simpler

Talk about the new demo ESI site that Javier Garza is setting up and also provide a demo of the ETS docker container we have build

Avatar for Akamai Developer

Akamai Developer

October 11, 2017
Tweet

More Decks by Akamai Developer

Other Decks in Technology

Transcript

  1. © AKAMAI - EDGE 2017 Global Consulting Services Accelerate our

    customer's business through a partnership focused on expertise, innovation, and education. [email protected] Javier Garza Senior Enterprise Architect Santa Clara, CA, USA [email protected] https://www.linkedin.com/in/jjgarza
  2. © AKAMAI - EDGE 2017 Agenda • Quick introduction to

    ESI • How the Akamai implementation differs from other ESI implementation • Examples of things you can achieve using ESI • Debugging ESI code: o ESI Web debugging tool in Luna o ESI environment with built-in debugger o ETS Server o ETS Docker image
  3. © AKAMAI - EDGE 2017 QUICK INTRODUCTION TO ESI •

    ESI (Edge Side Includes) is a small markup language for dynamic web content assembly at the Edge. Fills the gap between SSI (server) and AJAX (client) • ESI was proposed as a standard in 2001, but was not accepted by the W3C. • ESI implementations exist on a few proxy servers like Varnish, Squid and Mongrel. The Akamai implementation extended considerably the ESI 1.0 standard • Official Akamai page: https://www.akamai.com/us/en/support/esi.jsp <html> … <esi:include src=”http://3rdparty.com/ad.html"/> … </html>
  4. © AKAMAI - EDGE 2017 Akamai extensions to the ESI

    language • Ability to indicate cache settings per include • Asynchronous includes and the ability to indicate a max time to wait for a given include • stylesheet (an XSL stylesheet for XSLT) • Support for alternate methods (like POST) • Ability to dynamically add, edit or remove HTTP headers • esi:eval (include objects and evaluate the ESI fragment’s in the parent namespace) • foreach loops (iterations) • Internationalization • Functions (string manipulation, conversion, random, custom functions) • Variables, expressions, cookie support, boolean operators, etc.
  5. © AKAMAI - EDGE 2017 ESI Examples (1 of 2)

    • Allow caching the home page while customizing it for returning users <esi:choose> <esi:when test="$exists($(HTTP_COOKIE{'User'}))"> <esi:include src=”/profile/$(HTTP_COOKIE{'User'})" onerror="continue" maxwait="0" dca=“esi” no-store=“on”/> </esi:when> </esi:choose> <esi:include src=”/index_$(GEO{'country_code'}).html" alt="index_generic.html" ttl="2h" onerror="continue" maxwait=”2000"/> • Load country-specific settings (if they exist) • Load the news of the current day (if they exist) <esi:comment text=": load today’s news. For example: /news/2017/10/16/index.html"/> <esi:include src="/news/$strftime($time(), '%Y/%m/%d')/index.html" alt="/news/index.html"/>
  6. © AKAMAI - EDGE 2017 ESI Examples (2 of 2)

    •Track first time users, and greet returning users <esi:choose> <esi:when test=“$(HTTP_COOKIE{'returning_visitor'})”> Hi there, hello again! </esi:when> <esi:otherwise> Do I know you? $add_header('Set-Cookie','returning_visitor=1; expires='+$http_time($time()+36000)+';') </esi:otherwise> </esi:choose> <esi:choose> <esi:when test=”$(HTTP_COOKIE{’returning_visitor'}) && $rand(100) > 50"> <esi:include src=”/newcode.html" no-store=”on" onerror="continue" maxwait=”0"/> </esi:when> </esi:choose> • Test new code with 50% of returning users
  7. © AKAMAI - EDGE 2017 Luna Control Center’s ESI Web

    Development tool (1 of 3) Allows to run Akamai’s internal ESI debugger on an external URL: https://control.akamai.com/portal/esid_2.jsp (Short URL: https://goo.gl/ZAFVyF) Requirements: •URL must be delivered over Akamai •Allow pop-ups from control.akamai.com •Your Akamai contract needs to have the required ESI line item
  8. © AKAMAI - EDGE 2017 Luna Control Center’s ESI Web

    Development tool (2 of 3) 1) Open: https://control.akamai.com/portal/esid_2.jsp 2) Enter URL to debug (and optionally headers, client IP, etc.), and click “Submit”. The example below uses: https://playground.akawild.h2book.com/coin-toss.html ESI Debugging Report *********************Debugging Section********************* <Source url="http://playground.akawild.h2book.com/coin-toss.html"/> </Debug> //1 <html> //2 <head> //3 <title>Coin toss</title> //4 </head> //5 <body> //6 <esi:debug/> //7 <esi:choose> //8 <esi:when test="$rand(100) > 50"> //9 Heads //10 </esi:when> //11 <esi:otherwise> //12 Tails //13 </esi:otherwise> //14 </esi:choose> //15 </body> //16 </Script> </Source>
  9. © AKAMAI - EDGE 2017 Luna Control Center’s ESI Web

    Development tool (3 of 3) <EnvironmentVariables> LAST_RAND: 87 … HTTP_ETAG: "7f81a12cd7a98aaed304901ccafebbae:1506719593” </EnvironmentVariables> <Eval> [2023]: Line 8. Function rand returns value: 87. [2002]: Line 8. WHEN expression evaluated TRUE. [2004]: Your code ran successfully. </Eval> </Debug> /********************End Debugging Section*****************/ </SPAN> <html> <head> <title>Coin toss</title> </head> <body> Heads </body> </html>
  10. © AKAMAI - EDGE 2017 Built-in ESI debugger on a

    production Dev environment Requires a little effort to setup, but it is probably the best option if you have to debug ESI often. Create a dedicated hostname for ESI debugging (for example esi- debug.example.com), and enable the built-in ESI debugger via debug tag by adding the following line of advanced MD* to the Akamai configuration: <edgecomputing:esi.debug.enable-debug-tag>on</edgecomputing:esi.debug.enable-debug- tag> Insert the <esi:debug/> tag within the Web page containing the ESI code you want to debug. Open the page with a Web browser, right-click and select “View Source” to see the ESI debugging output *Note: Adding advanced Metadata requires Akamai Professional Services
  11. © AKAMAI - EDGE 2017 ESI Test Server (ETS) ETS

    is a reverse proxy built with Apache and mod_esi that can be used to test ESI-enabled content. Official images you can download from www.akamai.com: • ETS for Linux version 5.3.1.0 compiled with GCC 3.3.4 on Fedora Core 3 • ETS for Linux version 5.3.1.0 compiled with GCC 4.1.2 on Fedora Core 7 Un-official latest image (download upon request): • ETS for Linux 6.0.0.4 on Ubuntu (use ETS Docker image)
  12. © AKAMAI - EDGE 2017 ETS Docker Image Available on

    Dockerhub since July 2017. Install Docker and run the command below in a Terminal window: sudo docker run -ti -p 8080:80 akamaiesi/ets-docker:latest --debug localhost Open a Web browser and navigate to http://localhost:8080/playground Note: ETS Docker is useful for debugging basic functionality (lacks Edge server environment)
  13. © AKAMAI - EDGE 2017 ETS Docker Image Demo (1

    of 4) $ sudo docker run -ti -p 8080:80 akamaiesi/ets-docker:latest --debug localhost Unable to find image 'akamaiesi/ets-docker:latest' locally latest: Pulling from akamaiesi/ets-docker bae382666908: Pull complete … ___ __ _ _________________ / | / /______ _____ ___ ____ _(_) / ____/_ __/ ___/ / /| | / //_/ __ `/ __ `__ \/ __ `/ / / __/ / / \__ \ / ___ |/ ,< / /_/ / / / / / / /_/ / / / /___ / / ___/ / /_/ |_/_/|_|\__,_/_/ /_/ /_/\__,_/_/ /_____/ /_/ /____/ For usage information, run $ docker run -ti akamaiesi/ets-docker -h ESI and Sandbox settings: Hostname: localhost ESI port: 80 Playground path: /playground Sandbox path: /sandbox (ESI off; default ESI origin) ESI debugging: on GEO/Edgescape: on …