{"id":9580,"date":"2018-04-25T06:00:54","date_gmt":"2018-04-25T10:00:54","guid":{"rendered":"https:\/\/blog.litespeedtech.com\/?p=9580"},"modified":"2018-04-25T06:00:54","modified_gmt":"2018-04-25T10:00:54","slug":"cloudfront-cdn-and-litespeed-cache","status":"publish","type":"post","link":"https:\/\/lswp.store\/index.php\/2018\/04\/25\/cloudfront-cdn-and-litespeed-cache\/","title":{"rendered":"WpW: Setting up Cloudfront in LSCache"},"content":{"rendered":"

\"WordPress<\/a><\/p>\n

Welcome to another installment of WordPress Wednesday<\/a>!
\nToday\u2019s topic is: Using Cloudfront with LiteSpeed Cache for WordPress<\/strong><\/p>\n

Disclaimer<\/strong>: The information contained in this post is accurate for LSCWP v2.2.2 [release log<\/a>]. If you are using a newer version of the plugin, some details may have changed. Please refer to our wiki<\/a> for the latest!<\/em><\/p>\n

You can configure the LiteSpeed Cache plugin to work with almost any content delivery network. Today, we\u2019ll show you how to set up CDN support, if you are using CloudFront.<\/p>\n

Set Up in CloudFront<\/h2>\n

\"CloudFront<\/a><\/p>\n

Set up your CloudFront CDN according to the AWS instructions<\/a>.<\/p>\n

Make a note of the Domain Name<\/strong> they give to you (i.e. d111111abcdef8.cloudfront.net<\/code>).<\/p>\n

Enter that domain name directly into your browser and make sure that your site comes up. If it does, then everything is in working order, and you are ready to move on to the next step.<\/p>\n

Set Up in LSCache Plugin<\/h2>\n

\"CloudFront<\/a><\/p>\n

From the WordPress Dashboard, navigate to LiteSpeed Cache > Settings > CDN<\/strong>, and do the following:<\/p>\n

    \n
  1. Set Enable CDN<\/strong> to ON<\/code><\/li>\n
  2. Enter CDN URL<\/strong>. This is the Domain Name<\/strong> you received earlier from CloudFront.<\/li>\n
  3. If CloudFront will be handling your image, CSS, or JS files, set the appropriate\u00a0Include<\/strong>\u00a0buttons to ON<\/code>.<\/li>\n
  4. If you set any of the above buttons to OFF<\/code>, check the Include File Types<\/strong> box and make sure the relevant file extensions are not<\/em> listed. For the example outlined in red above, Include JS<\/strong> is set to OFF<\/code> and so we also need to remove .js<\/code> from Include File Types<\/strong><\/li>\n
  5. Set Original URL<\/strong> to your site\u2019s domain name (i.e. \/\/example.com\/wordpress<\/code>).<\/li>\n
  6. Save your changes.<\/li>\n<\/ol>\n

    Verify<\/h2>\n

    In our example, Include CSS<\/strong> was set to ON<\/code> and Include JS<\/strong> was set to OFF<\/code>. To verify that everything is working as expected, we need to take a look at the Request URL<\/strong> in the headers and see from where both CSS and Javascript are being served.<\/p>\n

    To do so, navigate to your site, and press F12 to bring up the developer tools in the Network<\/strong> tab. Reload the page.<\/p>\n

    \"CloudFront<\/a><\/p>\n

    First, check for CSS. Select the CSS<\/strong> tab, and then choose the first file listed to the left. Make note of the Request URL<\/strong> header. Is it coming from the CloudFront domain? If so, then CSS is being served correctly.<\/p>\n

    \"CloudFront<\/a><\/p>\n

    Now, check for JS. Select the JS<\/strong> tab, and then choose the first file listed to the left. Make note of the Request URL<\/strong> header. Is it coming from your original domain? If so, then JS is being served correctly.<\/p>\n

    —<\/p>\n

    Have some of your own ideas for future WordPress Wednesday<\/a> topics? Leave us a comment!<\/p>\n

    Don\u2019t forget to meet us back here next week for the next installment. In the meantime, here are a few other things you can do:<\/p>\n