Table of Contents for
Magento 2 - Build World-Class online stores

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Magento 2 - Build World-Class online stores by Jonathan Bownds Published by Packt Publishing, 2017
  1. Cover
  2. Table of Contents
  3. Magento 2 - Build World-Class online stores
  4. Magento 2 - Build World-Class online stores
  5. Credits
  6. Preface
  7. 1. Module 1
  8. 1. Magento Fundamentals
  9. XAMPP installation
  10. Magento
  11. Summary
  12. 2. Magento 2.0 Features
  13. An introduction to the Magento order management system
  14. Magento 2.0 command-line configuration
  15. The command-line utility
  16. Summary
  17. 3. Working with Search Engine Optimization
  18. Store configuration
  19. SEO and searching
  20. SEO catalog configuration
  21. Google Analytics tracking code
  22. Optimizing Magento pages
  23. Summary
  24. 4. Magento 2.0 Theme Development – the Developers' Holy Grail
  25. Magento 2.0 theme structure
  26. The Magento Luma theme
  27. Magento theme inheritance
  28. CMS blocks and pages
  29. Custom variables
  30. Creating a basic Magento 2.0 theme
  31. Summary
  32. 5. Creating a Responsive Magento 2.0 Theme
  33. Composer – the PHP dependency manager
  34. Building the CompStore theme
  35. CSS preprocessing with LESS
  36. Applying new CSS to the CompStore theme
  37. Creating the CompStore logo
  38. Applying the theme
  39. Creating CompStore content
  40. Customizing Magento 2.0 templates
  41. Summary
  42. 6. Write Magento 2.0 Extensions – a Great Place to Go
  43. Using the Zend framework
  44. Magento 2.0 extension structure
  45. Developing your first Magento extension
  46. The Twitter REST API
  47. The TweetsAbout module structure
  48. Using TwitterOAuth to authenticate our extension
  49. Developing the module
  50. Summary
  51. 7. Go Mobile with Magento 2.0!
  52. Adjusting the CompStore theme for mobile devices
  53. The Magento 2.0 responsive design
  54. The Magento UI
  55. Implementing a new CSS mixin media query
  56. Adjusting tweets about extensions for mobile devices
  57. Summary
  58. 8. Speeding up Your Magento 2.0
  59. Indexing and caching Magento
  60. Indexing and re-indexing data
  61. The Magento cron job
  62. Caching
  63. Fine-tuning the Magento hosting server
  64. Selecting the right Magento hosting service
  65. Apache web server deflation
  66. Enabling the expires header
  67. Minifying scripts
  68. Summary
  69. 9. Improving Your Magento Skills
  70. Magento knowledge center
  71. Improving your Magento skills
  72. Summary
  73. 2. Module 2
  74. 1. Magento 2 System Tools
  75. Installing Magento 2 sample data via GUI
  76. Installing Magento 2 sample data via the command line
  77. Managing Magento 2 indexes via the command line
  78. Managing Magento 2 cache via the command line
  79. Managing Magento 2 backup via the command line
  80. Managing Magento 2 set mode (MAGE_MODE)
  81. Transferring your Magento 1 database to Magento 2
  82. 2. Enabling Performance in Magento 2
  83. Configuring Redis for backend cache
  84. Configuring Memcached for session caching
  85. Configuring Varnish as the Full Page Cache
  86. Configuring Magento 2 with CloudFlare
  87. Configuring optimized images in Magento 2
  88. Configuring Magento 2 with HTTP/2
  89. Configuring Magento 2 performance testing
  90. 3. Creating Catalogs and Categories
  91. Create a Root Catalog
  92. Create subcategories
  93. Manage attribute sets
  94. Create products
  95. Manage products in a catalog grid
  96. 4. Managing Your Store
  97. Creating shipping and tax rules
  98. Managing customer groups
  99. Configuring inventories
  100. Configuring currency rates
  101. Managing advanced pricing
  102. 5. Creating Magento 2 Extensions – the Basics
  103. Initializing extension basics
  104. Working with database models
  105. Creating tables using setup scripts
  106. Creating a web route and controller to display data
  107. Creating system configuration fields
  108. Creating a backend data grid
  109. Creating a backend form to add/edit data
  110. 6. Creating Magento 2 Extensions – Advanced
  111. Using dependency injection to pass classes to your own class
  112. Modifying functions with the use of plugins – Interception
  113. Creating your own XML module configuration file
  114. Creating your own product type
  115. Working with service layers/contracts
  116. Creating a Magento CLI command option
  117. 3. Module 3
  118. 1. Planning for Magento
  119. Technical considerations
  120. Global-Website-Store methodology
  121. Planning for multiple stores
  122. Summary
  123. 2. Managing Products
  124. Managing products the customer focused way
  125. Creating products
  126. Managing inventory
  127. Pricing tools
  128. Autosettings
  129. Related products, up-sells, and cross-sells
  130. Importing products
  131. Summary
  132. 3. Designs and Themes
  133. The concept of theme inheritance
  134. Default installation of design packages and themes
  135. Installing third-party themes
  136. Inline translations
  137. Working with theme variants
  138. Customizing themes
  139. Customizing layouts
  140. Summary
  141. 4. Configuring to Sell
  142. Payment methods
  143. Shipping methods
  144. Managing taxes
  145. Transactional e-mails
  146. Summary
  147. 5. Managing Non-Product Content
  148. Summary
  149. 6. Marketing Tools
  150. Promotions
  151. Newsletters
  152. Using sitemaps
  153. Optimizing for search engines
  154. Summary
  155. 7. Extending Magento
  156. The new Magento module architecture
  157. Extending Magento functionality with Magento plugins
  158. Building your own extensions
  159. Summary
  160. 8. Optimizing Magento
  161. Indexing and caching
  162. Caching in Magento 2 – not just FPC
  163. Tuning your server for speed
  164. Summary
  165. 9. Advanced Techniques
  166. Version control
  167. Magento cron
  168. Backing up your database
  169. Upgrading Magento
  170. Summary
  171. 10. Pre-Launch Checklist
  172. System configurations
  173. Design configurations
  174. Search engine optimization
  175. Sales configurations
  176. Product configurations
  177. Maintenance configurations
  178. Summary
  179. Index

Configuring Magento 2 with CloudFlare

Are you managing an international-based brand-serving customer all over the globe? Then, using a Content Delivery Network (CDN) is the best idea. CDNs are a well-known technique to manage high-traffic websites. It is commonly used to distribute static assets such as images, CSS, and JavaScript as quickly as possible to the nearest location of the customers, which decreases the download times of the website.

The modern CDNs have much more to offer than just serving the assets to the customer. Currently, they improve the user experience with optimized HTML output, merging and deferring JavaScript, TCP optimization, and much more. Basic or advanced security is also top-of-mind, such as (D)DoS protection, SSL, Web Application Firewall (WAF), and much more.

Tip

Before using a CDN on production, test which CDN provider fits best for your purpose. Make sure that the POP locations that they serve match your customer locations.

Getting ready

For this recipe, we will use a Droplet created in Chapter 1, Magento 2 System Tools, at DigitalOcean, https://www.digitalocean.com/. We will be using NGINX, PHP-FPM, and a Composer-based setup including sample data connected to the CloudFlare CDN. No other prerequisites are required.

How to do it…

For the purpose of this recipe, let's assume that we need to create a Magento 2 Varnish setup. The following steps will guide you through this:

  1. First, we need to create an account at CloudFlare. Go to https://www.cloudflare.com/a/sign-up and complete the supplied form.
  2. Now add a website URL. Choose the default URL of your Magento website, (We can add more URLs under the same CloudFlare account later.) and press Scan DNS Records:
    How to do it…
  3. Once completed, we need to verify that all of our DNS records are listed. This step is really important so make sure to check your current DNS settings and compare or add them to your CloudFlare DNS setup. By default, CloudFlare cannot match all the DNS records automatically.

    Changing your records in this screen will not change anything in production yet. We still need to adjust the primary and secondary Nameservers before everything works. We will do this as shown in the following screenshot:

    How to do it…
  4. Choose your CloudFlare plan. Let's start with the Free Website plan. In a production environment, upgrading to a Pro or Business account is simple; just complete the billing form and you are all set. All new features will be available on the fly and ready to use:
    How to do it…
  5. Now we need to update our Nameservers. CloudFlare will list the Nameservers that we need to complete the last step.

    Depending on your current DNS provider, this could be a simple or hard step. Changing the Nameservers is not always allowed by your provider.

    Tip

    When ordering a new domain, check whether your provider allows you to change the Nameservers. Choosing the correct domain provider is not always a simple job.

  6. After changing the Nameservers, we need to wait a maximum of 24 hours. The time depends on how quickly your current DNS provider updates them.

    You can check your e-mail or refresh the CloudFlare dashboard to check whether your domain is Active:

    How to do it…
  7. Let's go to the DNS dashboard and check whether our domain name is served using the CloudFlare accelerated and protection technique.

    Once the cloud is orange, including an arrow passing through, then you are connected. Click on the cloud icon to change it:

    How to do it…
  8. Let's check whether the DNS server is serving the correct records and CloudFlare is working. Run the following command on the shell of your current server:
    dig yourdomain.com NS +short

    The output looks as follows:

    root@mage2cookbook:~# dig mage2cookbook.com NS +short
rocky.ns.cloudflare.com.
kate.ns.cloudflare.com.

    You can also use the following command to check the IPs:

    dig yourdomain.com +short

    The output looks as follows:

    root@mage2cookbook:~# dig mage2cookbook.com +short
104.18.56.216
104.18.57.216
  9. Congratulations, you just finished configuring a CloudFlare CDN server with Magento 2.

How it works…

Let's recap and find out what we did throughout this recipe. In steps 1 through 9, we installed CloudFlare as a CDN to optimize our worldwide performance.

In steps 1 through 8, we created an account and moved our domain to the CloudFlare DNS. In step 7, we activated the orange cloud in DNS to start using the CDN optimization.

There's more…

If you are interested in how to test the performance of the CloudFlare setup, stay put. Here are some basic commands that you can use:

time curl --I http://yourdomain.com

The output looks as follows:

time curl -I http://mage2cookbook.com
HTTP/1.1 200 OK
X-Magento-Cache-Debug: HIT
Server: cloudflare-nginx
CF-RAY: 257330a8444d2bd6-AMS

real    0m0.198s
user    0m0.006s
sys     0m0.005s

Without CloudFlare, it looks as follows:

time curl -I http://mage2cookbook.com
HTTP/1.1 200 OK
X-Magento-Cache-Debug: HIT

real    0m0.253s
user    0m0.011s
sys     0m0.010s

Keep in mind that this current website is using Varnish. Our Magento 2 server is located in New York while our test server is located in Amsterdam. As you can see, in this test, we save 0.055s. This test is done from server to server. Doing a test from server to real browser clients on a desktop, or mobile device, will result in larger numbers. Larger numbers result in slower connections, which will result in lesser user experience.

Another great load testing tool is Siege. Using Siege helps you to understand how many concurrent clients can visit your website during high loads. We will just cover the basics of Siege here. Install Siege on another Droplet somewhere else in the world. Use the following command to install Siege:

apt-get install siege

Now let's run the following command. We will simulate 50 concurrent users for a period of three minutes. The –d option is the internal delay, in seconds, for which the users sleeps:

siege -c50 -d10 -t3M http://yourdomain.com

Without CloudFlare, the output looks as follows:

siege -c50 -d10 -t3M http://mage2cookbook.com

Transactions:                   1732 hits
Availability:                 100.00 %
Elapsed time:                 179.79 secs
Data transferred:              15.47 MB
Response time:                  0.18 secs
Transaction rate:               9.63 trans/sec
Throughput:                     0.09 MB/sec
Concurrency:                    1.71
Successful transactions:        1732
Failed transactions:               0
Longest transaction:            0.34
Shortest transaction:           0.15

With CloudFlare, the output looks as follows:

siege -c50 -d10 -t3M http://mage2cookbook.com

Transactions:                   1716 hits
Availability:                 100.00 %
Elapsed time:                 179.74 secs
Data transferred:              14.05 MB
Response time:                  0.10 secs
Transaction rate:               9.55 trans/sec
Throughput:                     0.08 MB/sec
Concurrency:                    0.96
Successful transactions:        1716
Failed transactions:               0
Longest transaction:            0.62
Shortest transaction:           0.08

In the last test, we can see that the Response time is 0.10 seconds compared to 0.18 seconds.

The test Droplet that we used was located in Amsterdam using two CPUs and 4 GB memory. For a real browser test, it is best to use tools such as Chrome developer tools. Those timings are more accurate and give you a better idea of the real user experience. Testing on a mobile device is a totally different ball game and is out of the scope of this book.