603: Enhancing mobile device experience with NetScaler MobileStream Hands-on Lab Exercise Guide Christopher Rudolph January 2015 1
Table of Contents Contents... 2 Overview... 3 Scenario... 6 Lab Preparation... 7 Exercise 1: Load Balancing Web Servers... 9 Exercise 2: Image Optimization...25 Exercise 3: JavaScript Optimizations...38 Exercise 4: HTML/CSS Optimizations...51 Exercise 5: Domain Sharding...63 Appendix...75 2
Overview Hands-on Training Module Objective This training will provide hands-on experience with using NetScaler VPX virtual appliances to implement NetScaler front-end optimization features. Prerequisites This training focuses on using NetScaler to front-end optimize web traffic. It is assumed that the student already knows the basics of web servers and web traffic flow. Audience Citrix Partners, Customers, Sales Engineers, Consultants, Technical Support. Lab Environment Details The system diagram of the lab is shown below: The Student Desktop is accessed remotely using Citrix Receiver running on your workstation. All Windows applications such as the XenCenter (the XenServer GUI management tool), are accessed from the Student Desktop. 3
Lab Guide Conventions This symbol indicates particular attention must be paid to this step Special note to offer advice or background information reboot Start Text the student enters or an item they select from a dropdown menu is printed like this Bold text indicates reference to a button or object Focuses attention on a particular part of the screen (R:255 G:20 B:147) Shows where to click or select an item on a screen shot (R:255 G:102 B:0) 4
List of Virtual Machines Used VM Name IP Address Description / OS AD.training.lab 192.168.10.11 Active Directory Server / Win 2012 R2 NetScaler 192.168.10.20 NetScaler 10.5 VPX WebServer_1 192.168.10.30 Debian 6 Web Server WebServer_2 192.168.10.40 Debian 6 Web Server Required Lab Credentials The credentials required to connect to the environment and complete the lab exercises are shown within the step by step instructions and are summarized below: VM Name Username Password Description AD.training.lab administrator Citrix123 Active Directory Domain Controller NetScaler nsroot nsroot NetScaler 10.5 VPX Appliance Reserved IP Ranges IP range Description 192.168.10.50 192.168.10.60 NetScaler VIPs 5
Scenario Training Labs, Inc. is in the process of developing their own e-commerce website and are expecting a considerable amount of traffic for their site. They have purchased a NetScaler for the purpose of load balancing their two new web servers and providing traffic optimization for their new website. Your task is to configure the NetScaler for front-end optimization using the following guidelines: Load balance the two web servers in a least connection/round robin method. Configure front end optimization actions and policies for each of the major areas of optimization: o o o o o Images CSS JavaScript HTML Domain Sharding Test the new policies and actions on the provided test site for Training Labs, Inc. 6
Lab Preparation Attach XenCenter to Your XenServer Overview XenCenter is a graphical user interface application used for managing one or more XenServers. You will be using XenCenter to manage the XenServer needed for the lab. Step by step guidance Step Action 1. From your Student Desktop, launch Citrix XenCenter. 2. Double-click on the xenserver entry in the left pane of XenCenter. 7
3. Enter your physical XenServer parameters from your welcome screen. Username Password admin Your XenServer password You may find it easier to copy and paste the password to ensure it is entered correctly. Click Add. 4. Your Physical XenServer name will be different. XenCenter will connect and synchronize to your physical XenServer. 5. Summary You have connected to your XenServer. 8
Exercise 1: Load Balancing Web Servers Module Description and Summary In this exercise, you will configure the NetScaler appliance to load balance the two web servers in the lab environment in a round-robin method. Step by step guidance Estimated time to complete this exercise: 30 minutes. Step Action 1. On the student landing desktop virtual machine, launch Firefox. Click the NetScaler bookmark in the bookmark bar. This will open the login page of the Configuration Utility. 2. Type nsroot for the User Name and nsroot for the Password and click Login. 9
3. Front end optimization policies need to be attached to a load balancing virtual server in order to function, therefore we are going to create a load balancing virtual server to test all of the front end optimization features. First thing we need to do is load-balance the two web servers that are in the lab environment. In the NetScaler user interface, navigate to Traffic Management > Load Balancing > Servers and then click Add. 10
4. In the Server Name field type web_1. In the IP Address field type 192.168.10.30. Click Create. 5. Now that we have the first server added to the NetScaler, let s add the second web server. Click Add again. 11
6. In the Server Name field type web_2, then type 192.168.10.40 in the IP Address field. Click Create. 7. At this point, you should have two servers added to the NetScaler, and both should show as Enabled. 12
8. Now that we have the two web servers added to the NetScaler, we can create the load balancing services for those two servers. In the NetScaler user interface; navigate to Traffic Management > Load Balancing > Services. Click Add. 13
9. Type svc_web_1 in the Service Name field, then select the Existing Server radio button and select web_1 (192.168.10.30) from the Server drop-down list box. Then click OK. 10. Click Done. 14
11. Now that we have the first service created, let s create the second service. Click Add again. 12. Type svc_web_2 in the Service Name field, then select the Existing Server radio button and select web_2 (192.168.10.40) from the Server drop-down list box. Then click Continue. 15
13. Click Done. 14. At this point, you should have two load-balancing services added to the NetScaler, and both should show as Up. 16
15. Now that we have the two web servers added, and the two load-balancing services created, we can create the load-balancing virtual server. In the NetScaler user interface; navigate to Traffic Management > Load Balancing > Virtual Servers. Click Add. 16. Type lb_vsrv_mobilestream in the Name field, type 192.168.10.70 in the IP Address field, then click OK. 17
17. Under the Service section, click No Load Balancing Virtual Server Service Binding. 18. Under Select Service, click the > button. 18
19. Select the radio button next to svc_web_1 and then click OK. Then click Bind. 20. Under the Service section, click 1 Load Balancing Virtual Server Service Binding. Click Add Binding. 19
21. Under Select Service, click the > button. Select the radio button next to svc_web_2 and then click OK. Click Bind. 20
22. Click Close. Click OK. Click Done. 23. The load-balancing virtual server should be displaying an Up state and and Up effective state. 21
24. Click the save icon in the upper-right corner of the user interface to save the NetScaler configuration. Click Yes to save the running configuration. 22
25. To test to make sure that the load-balancing virtual server is functioning, open a new tab in Firefox and click the Mobilestream Test bookmark in the toolbar. The page that displays should look like this: 23
26. There is one more piece of housekeeping that needs to be done to make Front End Optimization work correctly. We need to increase the size of the available cache for Integrated Caching. Switch to XenCenter and select the NetScaler virtual machine. Then select the Console tab. Log on to the NetScaler CLI using the nsroot/nsroot credentials. Next, type the following command and press Enter. set cache parameter memlimit 1024 Finally, while still in the NetScaler console, type the following two commands and press Enter after each to save the NetScaler configuration and reboot the appliance. save config reboot When the NetScaler restarts, it will have the new maximum cache limit set for integrated caching. Exercise Summary In this exercise, you added two servers to the NetScaler, then created two load-balancing services that were then bound to those two servers that were added. Finally, a load-balancing virtual server was created and had the two load-balancing services bound to it. The method and persistence of the new load-balancing virtual server were set. Finally the new virtual server was tested for functionality. 24
Exercise 2: Image Optimization Overview In this exercise, you will enable the Front End Optimization feature on the NetScaler, create and test FEO policies for image optimization. In this exercise you will: Enable the Front End Optimization feature on the NetScaler Create an FEO action for image optimization (including lazy loading and convert GIF to PNG) Create an FEO policy for image optimization and bind the policy to the FEO test virtual server. Test the image optimization policy using the FEO test site. Step by step guidance Estimated time to complete this exercise: 30 minutes. Step Action 1. While still logged on to the NetScaler, enable the Front End Optimization feature. Navigate to Optimization and then right-click Front End Optimization. Then click Enable Feature. Repeat the same process for Integrated Caching. 25
2. Click the save icon in the upper-right corner of the user interface to save the NetScaler configuration. Click Yes to save the running configuration. 26
3. Next, create a Front End Optimization (FEO) action for image optimization. Navigate to Optimization > Front End Optimization > Actions. Click Add. 27
4. In the pane that appears, type feo_act_image in the name field, and then select Make Inline, Optimize, Convert GIF to PNG, and Lazy Load. Then click Create. 28
5. Now that an action has been created, a policy needs to be created to operate using the action that was just created. Navigate to Optimization > Front End Optimization > Policies. Click Add. 6. In the new page that appears, type feo_pol_images in the Name field, select feo_act_image from the Action drop-down list box, type HTTP.REQ.IS_VALID in the Expression field, and then click Create. 29
7. Now that an action has been created and added to a policy, the policy can be bound to a loadbalancing virtual server to test the action. Navigate to Traffic Management > Load Balancing > Virtual Servers. Select lb_vsrv_mobilestream from the list and click Edit. 30
8. In the Advanced column to the right, select Policies. Then click the + symbol in the newly added policies ribbon. 31
9. In the pane that appears, select Front End Optimization and then click Continue. Under Select Policy, click the > button. 10. Select the radio button next to feo_pol_images and click OK. 32
11. Click Bind. Click Done. 33
12. Click the save icon in the upper-right corner of the user interface to save the NetScaler configuration. Click Yes to save the running configuration. 13. Now that the policy has been bound to the MobileStream test virtual server, it can be tested for effectiveness. Open a new Firefox browser tab and click the MobileStream Test bookmark in the toolbar. 14. In the Toolbar of the Firefox window, click the Firebug button to enable the web development tool. This tool will allow you to see the underlying code in a webpage, which is where most of the Front End Optimization takes place. In the pane that appears at the bottom of the browser window, click the Net tab then click Images. 34
15. On the FEO Test site, click the GIF to PNG Conversion Test link. 16. As the page is loading, look at the Images pane in Firebug, and watch the loading time and the file types. Click the + symbol next to the first GET URL and scroll down to the Request Headers section. Here you will see that the request by the NetScaler is for an image/png. This shows that the NetScaler converted the file-type on the fly and then recoded it as a png on the request. 35
17. Next, take a look at lazy loading. Keep the Firebug pane open and return to the MobileStream site homepage (http://mobilestream.training.lab). Click on the Image Lazy Load Test link. 18. If you recall how FEO works in the NetScaler, it is all about the NetScaler caching the responses. The first time the page loads, it will cache all of the images on the page. Click the Clear button in the Firebug pane and then click the Refresh button a couple of times in Firefox. 36
19. As the page loads from cache, only the images that are displayed on the screen are displayed. 20. Scroll down on the webpage and watch as more images appear in the Firebug pane. This is a successful test of the FEO Image Lazy Load feature. Exercise Summary In this exercise, you created a Front End Optimization action and policy, bound the new FEO policy to a load-balancing virtual server, and then tested both the GIF to PNG conversion, and the image lazy loading features of FEO. 37
Exercise 3: JavaScript Optimizations Overview In this exercise, you will create and test FEO policies for JavaScript optimization. In this exercise you will: Create an FEO action for JavaScript optimization (including minification and moving the script inline) Create an FEO policy for JavaScript optimization and bind the policy to the FEO test virtual server. Test the JavaScript optimization policy using the FEO test site. Step by step guidance Estimated time to complete this exercise: 30 minutes. Step Action 38
1. While still logged on to the NetScaler user interface, navigate to Optimization > Front End Optimization > Actions. Click Add. 39
2. In the pane that appears, type feo_act_javascript in the name field, select Move to End of Body Tag under JavaScript, and then click Create. 40
3. Now that an action for JavaScript optimization has been created, a policy needs to be created to execute the new action. Navigate to Optimization > Front End Optimization > Policies. Click Add. 4. In the new page that appears, type feo_pol_javascript in the Name field, select feo_javascript_test from the Action drop-down list box, type HTTP.REQ.IS_VALID in the Expression field, and then click Create. 41
5. Now that an action has been created and added to a policy, the policy can be bound to a load-balancing virtual server to test the action. Navigate to Traffic Management > Load Balancing > Virtual Servers. Select lb_vsrv_mobilestream from the list and click Edit. 6. Click 1 Front End Optimization Policy Binding. 42
7. Select the feo_pol_images policy and click Unbind. Click Yes in the Confirm box that appears. 8. Click Bind. 43
9. A new pane appears, check the box to the left of the feo_pol_javascript policy and click Insert. Click OK. 10. Click Done. 44
11. Click the save icon in the upper-right corner of the user interface to save the NetScaler configuration. Click Yes to save the running configuration. 12. Now that the policy has been bound to the MobileStream test virtual server, it can be tested for effectiveness. Open a new Firefox browser tab and click the MobileStream Test bookmark in the toolbar. 13. In the Toolbar of the Firefox window, click the Firebug button to enable the web development tool. In the pane that appears at the bottom of the browser window, click the Script tab. 45
14. On the FEO Test site, click the JavaScript Minimization Test link. 15. Click the Refresh button a couple of times in Firefox. This will place all of the JavaScript in the cache of the NetScaler and implement the action that was created in the previous steps. 16. In the Script pane, scroll down to see the bottom of the body tag, there you will see the JavaScript has been moved to the end of the body tag. 46
17. Let s go back and change the JavaScript FEO action to Make Inline. Switch to the NetScaler user interface tab and navigate to Optimization > Front End Optimization > Actions. Select feo_act_javascript and click Edit. 47
18. Uncheck the Move to End of Body Tag box and check the Make Inline and Minify boxes, and then click OK. 48
19. Click the save icon in the upper-right corner of the user interface to save the NetScaler configuration. Click Yes to save the running configuration. 20. Switch back to the FEO test website and click the Ext JS File button on the screen. 21. Next, select the HTML tab in the Firebug frame, then expand the <script src= javascript/click_me.js > node. Here you will see that the JavaScript file was loaded and moved inline with the script tag. 49
Exercise Summary In this exercise, you created a Front End Optimization action and policy, bound the new FEO policy to a load-balancing virtual server, and then tested both the JavaScript move to end of body tag functionality, and move JavaScript inline features of FEO. 50
Exercise 4: HTML/CSS Optimizations Overview In this exercise, you will create and test FEO policies for HTML and CSS Optimization. In this exercise you will: Create an FEO action for HTML and CSS optimization. Create an FEO policy for HTML and CSS optimization and bind the policy to the FEO test virtual server. Test the HTML and CSS optimization policy using the FEO test site. Step by step guidance Estimated time to complete this exercise: 30 minutes. Step Action 51
1. While still logged on to the NetScaler user interface, navigate to Optimization > Front End Optimization > Actions. Click Add. 52
2. In the pane that appears, type feo_act_html_css in the name field, select Move to Head Tag and Minify under CSS, and select Remove comments from HTML under HTML. Then click Create. 53
3. Now that an action for HTML/CSS optimization has been created, a policy needs to be created to execute the new action. Navigate to Optimization > Front End Optimization > Policies. Click Add. 4. In the new page that appears, type feo_pol_html_css in the Name field, select feo_act_html_css from the Action drop-down list box, type HTTP.REQ.IS_VALID in the Expression field, and then click Create. 54
5. Before the policy is bound to the test virtual server, let s take a look at the HTML/CSS Optimization Test page first. Open a new Firefox browser tab and click the MobileStream Test bookmark in the toolbar. 6. In the Toolbar of the Firefox window, click the Firebug button to enable the web development tool. In the pane that appears at the bottom of the browser window, click the HTML tab. 7. On the FEO Test site, click the HTML Optimization Test link. 55
8. Expand all of the nodes in the Firebug pane and view the comments and Style code. Note the locations of the comments and the Style tags. If you don t see any comments, click on the down arrow next to the HTML tab, and select Show Comments. 56
9. Now that we can see what we are working with on the page and we have created the action and the policy, the policy can be bound to a load-balancing virtual server to test the action. Navigate to Traffic Management > Load Balancing > Virtual Servers. Select lb_vsrv_mobilestream from the list and click Edit. 10. In the virtual server page, click 1 Front End Optimization Policy Binding. 57
11. Select the feo_pol_javascript policy and click Unbind. Click Yes in the Confirm box that appears. 12. Click Bind. 58
13. A new pane appears, check the box to the left of the feo_pol_html_css policy and click Insert. Click OK. 14. Click Done. 59
15. Click the save icon in the upper-right corner of the user interface to save the NetScaler configuration. Click Yes to save the running configuration. 16. Now that the HTML/CSS optimization policy has been bound to the FEO test virtual server, it can be tested for effectiveness. Open a new Firefox browser tab and click the MobileStream Test bookmark in the toolbar. 17. In the Toolbar of the Firefox window, click the Firebug button to enable the web development tool. In the pane that appears at the bottom of the browser window, click the HTML tab. 60
18. On the FEO Test site, click the HTML Optimization Test link. 19. Click the Refresh button a couple of times in Firefox. This will place all of the HTML and CSS in the cache of the NetScaler and implement the action that was created in the previous steps. 20. Now that the policy has been invoked on the test server, you can see that the comments that were in place before are now removed and the CSS link has been moved to the header of the HTML document. If the comments never disappear and/or the CSS link code does not move into the header, the NetScaler cache is full. In XenCenter, right click on the NS1 virtual machine and click Restart. This will clear the cache of the NetScaler. Wait about three minutes and reopen the FEO test site, then retry steps 20-22. 61
Exercise Summary In this exercise, you created a Front End Optimization action and policy, bound the new FEO policy to a load-balancing virtual server, and then tested the CSS move to head feature, as well as the HTML remove comments feature. 62
Exercise 5: Domain Sharding Overview In this exercise, you will create and test FEO policies for Domain Sharding. In this exercise you will: Create an FEO action for Domain Sharding. Create an FEO policy for Domain Sharding and bind the policy to the FEO test virtual server. Create the necessary subdomains on the AD.training.lab domain controller virtual machine. Test the Domain Sharding policy using the FEO test site. Step by step guidance Estimated time to complete this exercise: 30 minutes. Step Action 1. While still logged on to the NetScaler user interface, navigate to Optimization > Front End Optimization > Actions. Click Add. 63
2. In the pane that appears, type feo_act_domain_sharding in the name field. Scroll down to Miscellaneous optimization and type mobilestream.training.lab in the Domain Name field. Then type mobilestream.domain1.training.lab in the Shard Names field and click the + symbol. Repeat this process for mobilestream.domain2.training.lab and mobilestream.domain3.training.lab. Finally, click Create. 64
Step Action Now that an action has been created, a policy needs to be created to operate using the action that was just created. Navigate to Optimization > Front End Optimization > Policies. Click Add. 3. In the new page that appears, type feo_pol_domain_sharding in the Name field, select feo_domain_sharding_test from the Action drop-down list box, type HTTP.REQ.IS_VALID in the Expression field, and then click Create. 65
4. Now that we can see what we are working with on the page and we have created the action and the policy, the policy can be bound to a load-balancing virtual server to test the action. Navigate to Traffic Management > Load Balancing > Virtual Servers. Select lb_vsrv_mobilestream from the list and click Edit. 5. In the virtual server page, click 1 Front End Optimization Policy Binding. 66
6. Select the feo_pol_html_css policy and click Unbind. Click Yes in the Confirm box that appears. 7. Click Bind. 67
8. A new pane appears, check the box to the left of the feo_pol_html_css policy and click Insert. Click OK. 9. Click Done. 68
10. Click the save icon in the upper-right corner of the user interface to save the NetScaler configuration. Click Yes to save the running configuration. 11. To correctly support domain sharding, we need to create extra subdomains at the DNS level. Open XenCenter, and select the AD.training.lab virtual machine and select the Console tab. 12. Click the DNS Manager icon in the taskbar of the AD.training.lab desktop. 69
13. Expand the Forward Lookup Zones node and select training.lab. 14. Right click on training.lab and select New Domain. 70
15. In the dialog box that appears, type domain1 and then click OK. Repeat this process for both domain2 and domain3. 16. For each new domain, a new A Record needs to be created for mobilestream. Right click on domain1 and select New Host (A or AAAA). 71
17. In the New Host window that appears, type mobilestream in the Name field and then type 192.168.10.70 in the IP address field. Then click Add Host. 18. Click OK in the confirmation window when it appears. Click Done. Repeat this process for both domain2 and domain3. 72
19. Now that the Domain Sharding policy has been bound to the FEO test virtual server, it can be tested for effectiveness. Minimize XenCenter, and return to Firefox. Open a new Firefox browser tab and click the MobileStream Test bookmark in the toolbar. 20. On the FEO Test site, click the Domain Sharding Test link. Click the Refresh button a couple of times in Firefox. This will place all of the HTML and CSS in the cache of the NetScaler and implement the action that was created in the previous steps. 73
21. Now that the domains are being sharded by the NetScaler, you can check to see if the NetScaler has used domain sharding from the Front End Optimization statistics page. Switch to the NetScaler GUI, and navigate to Optimization > Front End Optimization. Click the Statistics link. 22. In the Statistics window, you can see that the NetScaler has completed domain sharding using the policy and action you created. Exercise Summary In this exercise, you created a new FEO action and policy for domain sharding. The new policy was then bound to the FEO test virtual server. You then created new domains at the DNS level for the NetScaler to interact with to load the images faster over multiple domains. Finally, all of these settings were tested using the FEO test virtual server. 74
Appendix Appendix 1: Resetting the lab Overview This appendix shows you how to reset the lab in preparation to execute any module. The lab is usually executed in order, starting with module 1. However it is possible to reset the lab so that it is ready to execute any module using a NetScaler batch file. This script will copy a master configuration file from the \var directory on the NetScaler, and place it in the \nsconfig file, then perform a warm reboot of the NetScaler. Step by step guidance Estimated time to complete this exercise: 3 minutes. Step Action 1. Open XenCenter, and select the NetScaler virtual machine, then select the Console tab. 2. Press Enter a few times to display the login: prompt. 3. Log on using the nsroot/nsroot credentials. 75
4. Type the following command and press Enter: Batch -filename /var/ex#.txt Substitute the # with the exercise number you would like to work on next. 5. The NetScaler will perform a warm reboot and be ready to start again in about 2 minutes. Appendix Summary You have learned how to reset the lab ready to execute any module. 76
Revision: Change Description Updated By Date 1.0 Original Christopher Rudolph January 2015 About Citrix Citrix (NASDAQ:CTXS) is a cloud company that enables mobile workstyles empowering people to work and collaborate from anywhere, securely accessing apps and data on any of the latest devices, as easily as they would in their own office. Citrix solutions help IT and service providers build clouds, leveraging virtualization and networking technologies to deliver high-performance, elastic and cost-effective cloud services. With market-leading cloud solutions for mobility, desktop virtualization, networking, cloud platforms, collaboration and data sharing, Citrix helps organizations of all sizes achieve the speed and agility necessary to succeed in a mobile and dynamic world. Citrix products are in use at more than 330,000 organizations and by over 100 million users globally. Annual revenue in 2012 was $2.59 billion. Learn more at www.citrix.com. 77