One Page Zen

Web Design. Simplified.

Setup CloudFlare CDN for WordPress on Google Cloud

Leron Amin 52 Comments

LinkedIn

In this tutorial you will learn how to setup Cloudflare CDN for your WordPress website on Google Cloud. When configured correctly, Cloudflare CDN can provide huge performance and security benefits for your website.

Serving your website’s content from CloudFlare’s CDN will lead to huge performance benefits, including shorter load times and protection from DDOS attacks.

Benefits of using a CDN

A CDN is a network of globally distributed servers that store and distribute your website’s content.

With a CDN configured, your website’s content will load quickly for all users, regardless of their geographic location.


diagram of cdn network
Without a CDN, your website is served from a single server, meaning slow load times for international visitors. With a CDN, your website is stored and served from many servers around the world, meaning consistently shorter load times for visitors.

Getting Started

Before getting started with this tutorial, you should have already:

  1. Installed WordPress on Google Cloud
  2. Setup a Domain Name for your website
  3. Reserved a Static IP Address for your website.
  4. Configured SSL for your website (optional).

Combine Cloudflare CDN + SSL (optional)

If you don’t want to install your own SSL certificate, it is possible to use Cloudflare’s SSL service with your CDN. You will have the option to apply this setting in step 3 of this tutorial.

Learn more about the advantages and disadvantages of using Cloudflare’s SSL service with your CDN by clicking here.

There are 6 steps in this tutorial:

1. Create a Cloudflare account

visit cloudflare.com in your web browser
In your web browser, navigate to the Cloudflare signup page.
enter email and password to create a cloudflare account
On the signup page, choose an email and password to use for your account, and click the Create Account button.
click the add a site button to configure your website with cloudflare
After creating an account, click the + Add a Site button to configure your website with Cloudflare.
click the next button to query dns records
Click the Next button to query your DNS records.
select the free plan option
Select the FREE option to get started with a free account, then click on the Confirm Plan button.
click the continue button to confirm nameservers
After Cloudflare has verified your website’s DNS records, click the Continue button.
copy cloudflare nameservers
Copy the two nameservers that Cloudflare provides and paste them into Notepad – you will need these in the future steps.

2. Change domain nameservers

visit the domain name provider where you registered your domain name namecheap.com
Visit the domain name provider where you registered your website’s domain name. Namecheap is used in this example, but there are hundreds of other domain name registrars to choose from.
paste the cloudflare nameservers
Once you’ve logged in to your domain name registrar, navigate to the settings page of the domain that you want to configure. Select the Custom DNS option, then paste the two Cloudflare nameservers that we copied from step 1 of this tutorial.

3. Configure Cloudflare SSL settings

click the link to the website you want to configure
Go back to your Cloudflare homepage and click on your website.
click on the crypto settings to configure cloudflare ssl settings
Click on the Crypto icon at the top of the page to configure your Cloudflare SSL settings.
select the full strict ssl setting
On the Crypto page, select the Full (Strict) SSL setting if you already have SSL configured on your website. If you want to use Cloudflare’s SSL, choose the Full SSL setting.
Click here to learn more about the different SSL settings.

4. Configure Cloudflare caching settings

click icon to configure caching settings
Next, click on the Caching icon at the top of the page to configure your caching settings.
configure caching settings
Set your Browser Cache Expiration setting to 1 month, or choose Respect Existing Headers if you’ve already configured caching on your origin server.

5. Test website performance

visit gtmetrix.com in your web browser
Now that you’ve configured Cloudflare CDN, the next step is to check that it is working properly. In your browser, open a new tab and visit GTMetrix. Then, enter your website’s URL in the search field and click the span style=”background-color: #eee”>Analyze button.
check for leverage browser caching
First, under the PageSpeed tab, check that the Leverage browser caching criteria has a high score.
check that content delivery network and expires headers are configured properly
Next, navigate to the YSlow tab and check that the Use a Content Delivery Network (CDN) and the Add Expires headers criteria are both met.

6. Additional considerations

Combining Cloudflare CDN and SSL

Cloudflare offers three separate settings for handling your website’s encryption with SSL. The three settings are Flexible SSL, Full SSL, and Full SSL (Strict).

Full SSL (Strict) provides the highest level of SSL security, however, it requires that you setup SSL on your origin server beforehand.

  • 1. Flexible SSL

    • Flexible SSL is the easiest setting for configuring Cloudflare’s SSL with your website, but unfortunately does not encrypt the connection between your website’s server and Cloudflare (your website will still show the green padlock).

    full ssl setting for cloudflare

    2. Full SSL

    Unlike Flexible SSL, the Full SSL setting provides encryption between your server and Cloudflare. The only drawback is that your connection between your server and Cloudflare isn’t authenticated.

    cloudflare full ssl setting

  • 3. Full SSL (Strict)

    • Out of the three available settings, Full SSL (Strict) provides the highest level of security. Unlike Full SSL, the Full SSL (Strict) setting ensures than the connection between your website’s server and cloudflare is authenticated with a signed SSL certificate.

    cloudfare full strict ssl setting

  • Which setting should you choose?

    • Try to avoid using the Flexible SSL setting. If you’re running any of the ‘pre-configured’ stacks from the Google Cloud solutions library, then it’s likely your server came pre-configured with self-signed SSL certificates. This means that the Full SSL setting is available to you by default.

    We strongly suggest that people use Strict mode with a valid cert on their origin. –Nick Sullivan, Head of Cryptography, Cloudflare Inc.

    However, if you want to take your security a bit further, you can use the Full SSL (Strict) setting. This setting requires that you already have SSL configured on your server (with valid certificates).

    If you plan to use the Full SSL (Strict) setting but haven’t yet configured SSL certificates on your server, check out the SSL tutorials for the Click-to-deploy or Bitnami Google Cloud LAMP stacks.

    References

    1. Recommended first steps for Cloudflare users
    2. How does Cloudflare work?
    3. Universal SSL: Encryption all the way to the origin, for free
    4. My TLS conundrum and why I decided to leave CloudFlare
    5. How to get your SSL for free on a Shared Azure website with CloudFlare
    6. Cloudflare’s great new features and why I won’t use them
    7. Why should I install mod_cloudflare?
    8. What are the disadvantages of using Cloudflare?
    9. Content Delivery Network (CDN) image provided via Privacy Canada

    Troubleshooting

    If you have any questions or comments, please leave them in the comment field below.

    For troubleshooting support, be sure to check out the WordPress Cloud Hosting Support Group on Facebook.

    Related Posts

    Comments

    2. Abdullah Ali Abbasi says

      Hi, Thanks for your great work dear.
      I want to know that when I am using my godaddy domain on google cloud for Free Hosting, I have to use google name servers, Now if i want to use cloudflare, how can I use them together? As it will require me to change my name servers to cloudflare and I am already bound to keep them with google cloud.
      Please help!

      Reply

      • Leron Amin says

        Hi Abdullah,

        You don’t have to use Google’s nameservers, although I recommend it. If you want to use GoDaddy’s nameservers, you can simply point your domain to your Google Cloud instance’s IP.

        Let me know if you have questions,
        Joe

        Reply

    3. Nickie Oakwood says

      Well am in a bit of a pickle now Joe haha. So swapped over to Cloudflare and now I get a 526 error when visiting the site. Allow me to explain:

      Within GCP my static IP address is 35.232.98.85, my VM Instance also 35.232.98.85. All of this DNS worked fine and resolved to the site. Might I add I learned my way to get hosted on gcp with your site (top Banana).

      So now when I check my SSL with SSL Shopper it all resolves ok to thenakedwordpress.com resolves to 104.28.26.170. So again I am seeing that my IP Address has now changed from 35.232.98.85 to 104.28.26.170.

      Within GCP I can’t see anyway how to change the static ip address therefore I have left it as 35.232.98.85.

      Do you have any idea how cloudflare has changed my IP Address? All of this through trying to simply renew a cert 🙁

      In Cloudflare DNS the A Record shows 35.232.98.85 and makes no mention of 104.28.26.170. When I check website from IP Address my site resolves to 104.28.26.170.

      Where 104.28.26.170 has come from and where to change it is driving me mad. I can’t change it all in GCP DNS because the static IP Address is locked to 35.232.98.85. Is there a way to change this?

      When I tried to redo the cert in SSH I got message: It seems there is a valid certificate in the web server configuration folder. Please renew that certificate or generate new ones manually

      For the life of me I can’t find how to.

      And now after typing out all of this email (and doing loads of screensnips to create new topic in cloudflare community) it has gone and bloody worked. RESULT (don’t actually know what I did to fix it but it works).

      Reply

    4. Nickie Oakwood says

      Hi Joe

      Was looking at this and have a couple of questions

      I have set up my site on GCP. I have also set up GCS and WP Stateless. I have set up a https Load Balancer for my bucket. So my images are served from Google CDN. If I move the site over to cloudflare does this mean that my images will also go so stateless will stop working and my images won’t appear?

      Also, if Cloudflare are hosting my site do I still need to pay GCP?

      Quality videos and site dude.

      Reply

      • Leron Amin says

        Hi Nickie,

        Cloudflare isn’t hosting your website, it’s simply acting as a reverse proxy.

        If your images are being served using the bucket’s default URL structure, then it shouldn’t be an issue. If you’re replacing the default URL structure with your custom domain, you may into issues that require additional configuration.

        Have you tried implementing it yet? If so, how did it go?

        Talk to you soon,
        Joe

        Reply

    5. Denis says

      Hello.
      I think this is very helpful, my only issue is the cloud-flare, I keep getting error after connecting cloud-flare to my site until i got to take it off but i really need cloud-flare running on my site. If you can help me on this, i will be grateful.

      Reply

    6. Brian says

      I followed the click to deploy guide for implementing SSL with certbot using the guide you wrote up. Thanks for writing that up!

      I enabled cloudflare with this guide on click to deploy on top of my certificate and enabled Full (Strict).

      I also migrated my DNSSEC to cloudflare from Google Cloud. Everything is resolving properly when navigating to the URL of my website.

      The problem I am encountering is when I type in the IP address of my website directly it bypasses cloudflare and shows that my site is not secure. Is it possible that my Let’s Encrypt certificate has been invalidated?

      I can think of two solutions, but I am not sure if they are correct.

      1. Implement Cloudflare Origin Pull, Adjust setting to Full (instead of full strict), possibly disable Let’s Encrypt Certificate for the new Cloudflare certificate?

      2. Migrate DNSSEC back to Google, because there may be a problem with my DNSSEC on Cloudflare.

      3. Is it possible my DNSSEC for Cloudflare did not require me to disable DNSSEC on Google Cloud?

      I notice that their site indicates that I should have “Full” selected for origin pull, if I choose to set it up.

      Thanks for any insight you might have.

      Reply

      • Leron Amin says

        Hi Brian,

        Disable DNSSEC on Google Cloud and also on Cloudflare (if possible).

        See if that fixes the issue, and let me know if you have questions.

        Joe

        Reply

      • Leron Amin says

        Hi Ivan,

        It’s possible that the system they use for checking bots may make result in slightly longer load times. However, the benefit to this is that your website is protected from DDoS attacks.

        If you’re referring to something else, please provide more information/sources.

        Thanks and talk to you soon,
        Joe

        Reply

    8. Jay says

      Hi,

      Great tutorial!

      I used this tutorial for my previous site and it worked great but on my new site I’m having a few issues,

      After completing the steps my website no longer loads up. I keep getting page cannot be reached and I cannot get to wp dashboard.

      The site is (www.uacademy.co.uk)

      Any help would be appreciated.

      Thanks

      Reply

    9. Jason says

      Hi Leron,

      Many thanks for your easy tuto.

      However, I have an issue with cloudflare. Once the new servers configured on my domain name all emails sending to my domain name emails were lost in the nature :-)-)

      So I remove the cloudfare dns and got restored the google originals DNS (my domain name as been registered with google domain).

      But unfortunately, my wordpress website has disappeared now from the net. My browser can’t detect any IP address.

      Help please.

      Best,

      Reply

      • Leron Amin says

        Hi Jason,

        If you opt to use Cloudflare, you will have to import all of your existing DNS records (for email, this would be your MX, SPF, and DKIM records) into Cloudflare in order for your configuration to continue to work correctly.

        Let me know if you have any questions,
        Joe

        Reply

    10. Leron is very awesome says

      Can I have a tutorial request: how to setup multi country subdomain between cloudflare and gcp separate VMs?

      I plan to build separate wordpress on separate VM for each subdomain or country:

      Domain: leroniscool.com
      VM01: Canada – ca.leroniscool.com
      VM02: USA – us.leroniscool.com

      IP Geolocate visitors if outside of these two options, go to leroniscool.com

      Thank you so much in advance. Your website is cool, I am your die-hard fan!!!

      Reply

    12. Ale says

      Please help, I get this error every time “ERR_SSL_VERSION_OR_CIPHER_MISMATCH”. I’ve followed the video and I have a ssl aldrey active.

      Reply

    13. Jack says

      Hi Joe,

      first of all i would like to thank you a lot for your tutorials, it´s amazing how much i learned in the last weeks setting up my first WordPress site on google cloud host!

      Since i installed the CDN i can see an improvement in siteload speed from different countries, but still not the speed i wish to get. Many people here are requesting a tutorial on google cloud CDN and I would also really appreciate that one too 🙂

      But in general, is it possible to run a website on google cloud on two machines?
      In my case: I want to target customers in Germany and in the USA. I chose a machine in Frankfurt, which gets me a decent siteload time for tests from Germany, if i try from the US its still way to long, even with the CDN. I would not mind paying for a second machine in the US, if it gets me the same speed. Do you know if this is possible?

      Kind regards,

      Jack

      Reply

      • Leron Amin says

        Hi Jack,

        If you have shared website traffic between USA and Germany, then running instances in both of these regions would definitely improve your website’s performance. To do this, you could create an HTTPS cross-region load balancer to direct traffic to either your USA or Germany instances, depending on your user’s proximity. With the load balancer configured, you could then enable Google Cloud CDN.

        Other ideas to consider are using Cloud SQL as your database solution and configuring the WP Stateless plugin to serve your WordPress static content from multi-regional storage; this would therefor serve as your [very fast] CDN.

        You should note that these types of configurations are expensive, which is why it’s important to factor cost/performance. Google Cloud has a tutorial covering the basic load balancing concepts in the documentation if you’re interested.

        Also, check out this resource for more information on Google Cloud CDN.

        Hope this is helpful, and let me know if you have any questions.
        Joe

        Reply

    15. Andrew says

      I’m trying to get this working with a Google Compute VM Instance – WordPress Click to Deploy, but I’m getting a cloudflare 521 error trying to connect to the google static IP. Any ideas on how to get this working?

      I’ve gone back to using our old host for the time being until I can get this google vm working.

      Reply

      • Leron Amin says

        Hi Andrew,

        Since you’re using your old host in the meantime, here is how I would approach the problem:

        1. Get a cheap domain for testing purposes.
        2. Launch a WordPress install on a new VM.
        3. Make sure the domain and URL are configured properly with Google Cloud, then migrate to Cloudflare.

        Although it is recommended to have SSL configured before migrating to Cloudflare, you could migrate to Cloudflare and then use Cloudflare’s SSL service, as this will save you a step and simplify the process.

        Let me know if you have any questions,
        Joe

        Reply

    16. ali says

      sir i have question i am using google cloud wordpress hosting and dns i i add in godaddy dns server if i remove and i put cloudflare dns there then my website still work or no becuse my google cloud dns removed. please answer me fast brother.

      Reply

      • Leron Amin says

        Hi Ali,

        Before configuring Cloudflare and changing your GoDaddy namerserver to point to Cloudflare, you need to ensure that your website is working properly on it’s own, either with or without SSL configured.

        Let me know if this answers your question!

        Reply

    17. William says

      Hello,

      I changed mydomain’s nameservers to Cloudflare’s and I enabled Flexible SSL (Didn’t set up SSL with “Let’s Encrypt” or anything before that). After a few hours it said the SSL certificate was active so I browsed my website and it wasn’t redirecting to HTTPS so I went into WordPress settings and changed both link from http://oneprivateip.com to https://oneprivateip.com.

      Right after clicking “save” the page doesn’t load.

      Firefox: “The page isn’t redirecting properly. An error occurred during a connection to oneprivateip.com. This problem can sometimes be caused by disabling or refusing to accept cookies.”

      Chrome: “This page isn’t working. oneprivateip.com redirected you too many times.”

      Internet Explorer: “Hmmm…can’t reach this page. Make sure you’ve got the right web address: https://oneprivateip.com”

      It seems what’s happening to me was covered by an article from cloudflare (https://goo.gl/AXQGtk)

      “Additionally, please ensure that there is no redirect set up at your origin from http to https, as this specifically would cause the redirect loop.”

      I want to switch back the links to HTTP in WordPress settings but because of the above I have no way to access the admin page. Is there a way to do it with SSH or any other solution?

      Thank you for everything you do!

      Reply

      • Leron Amin says

        Hi William,

        You can force change your domain by following the instructions in this article here.

        Depending on which WordPress stack you’re using, you will have to navigate to the WordPress directory that is housing all of your files, then edit your current theme’s functions.php file (the second method from the link above).

        Alternatively, try fixing the redirect loop, which is likely in your wordpress.conf file (Click-to-deploy) or bitnami.conf file (Bitnami), and it looks like this:

        ServerName www.1pagezen.com

        ServerAlias 1pagezen.com    

        Redirect permanent / https://www.1pagezen.com/

        Delete those lines, save the file, restart Apache, and it should (hopefully) fix the problem.

        Let me know if you have any questions,
        Joe

        Reply

    18. Bruno A. Jimenez Reyes says

      Hi,

      great tutorial, although I have my doubts that adding an extra layer of complexity to the excellent Google Cloud Infrastructure could add perceived benefits.
      For now I won’t implement the excellent Cloudflare into my project, since I’m pretty sure it will mess up with other things (like page cache, AMP, CDNSEC, etc…) and the marginal (over Google Cloud Hosting) speed and security improvements doesn’t really worth it.

      Reply

    19. Enargo says

      Hi. Have a question… If nothing is changed in YSlow Score where i can do something wrong… your tutorial is pretty straightforward. Maybe i can hire you to setup it for me or… i don’t know.

      Reply

      • Leron Amin says

        Hi Enargo,

        Unfortunately you won’t notice any improvement right away, as CloudFlare needs time to identify where to cache your content.

        That being said, you also won’t notice any improvement if your’re running a test from a server that is located close to your origin server (aka the primary server location where your website is hosted). For instance, if your Google Cloud instance is being hosted at a US West region data center, and you run a GTMetrix test from the GTMetrix default location in Vancouver, then your load time will be extremely fast regardless of whether or not a CDN is enabled. The real purpose of a CDN is to cache your website’s content in locations that are far from your origin server – say in Japan, or Europe. As Cloudflare monitors the location of your website’s traffic over time, you will notice that your content is being cached and served from locations closer to these ‘international’ users.

        So – my advice is to wait a week or two, then test your website using a website tool that checks your website’s load times from multiple servers across the globe. I recommend this tool.

        It won’t be long before you notice your website’s load times decreasing for your international visitors!

        Please reach out to me if you have any questions,
        Joe

        Reply

    21. Mark says

      Hi Leron,

      Thank you for doing a great job with the whole tutorial. I was able to do the hard part from installing wordpress all the way to setting up SSL correctly.

      With setting up the CDN, when I add my domain to cloudfare, it is giving me “This zone is banned and cannot be added to Cloudfare at this time.” What’s causing this?

      Thanks,
      Mark

      Reply

    22. Ay says

      Hello My Friend
      I waiting for this tutorial for a long time
      what is your opinion in using google cloud CDN or Cloudflare CDN?
      I am still waiting also for the tutorial of using google cloud CDN
      Great Work Leron your are working in the right way

      Reply

      • Leron Amin says

        Hey Ay,

        I’m glad to hear you were anticipating the tutorial.

        Both CloudFlare and Google Cloud CDN have incredibly advanced and expansive networks. So between the two, it really comes down to specific use cases, because their performance metrics will be comparable.

        Now the reason I really like CloudFlare CDN is because it’s a free service and is easy to set up. It also comes packaged with additional features such as cache configuration, one-click SSL, Always Online, and DDos protection – to name a few. On the other hand, Google Cloud CDN offers more flexibility than CloudFlare – but is also significantly more difficult to configure. For that reason, it’s a service that should be ‘grown into’ only when necessary. On One Page Zen, most of the tutorials center around using persistent disk images to host static content – this makes it easier for beginners to get started in the cloud, but also doesn’t fit the CI/CD model that Google Cloud CDN was built to support.

        In the future I will do a load-balancing tutorial on running WordPress in an environment where you’re pushing code changes to multiple VM’s, as this would be a use case that would fit best with using Google Cloud CDN over CloudFlare.

        Hope this information was helpful, and let me know if you have any questions.
        Joe

        Reply

        • Alvin says

          Dear Joe,

          Thanks for the blog!

          I am really interested in the load-balancing tutorial where you push code changes to multiple VMs

          Reply

    23. luis says

      After setting all this up, Gtmetrix tells me to avoid landing page redirects – how is that corrected in bitnami wordpress?

      Reply

      • Leron Amin says

        Hi Luis,

        Landing page redirects will occur whenever you set a preferred version of your domain.

        For instance, if you set your preferred domain to the non-www version of your domain, then your users will be redirected to this version of the domain whenever they visit your website with the www prefix.

        The GTMetrix notification is simply a making a point that these redirects slow down your page load time – which they do – but there’s not much that you can do about them. The only workaround I can think of would be to run identical instances of your website from both the www and non-www versions of your domain.

        Hope this answers your question,
        Joe

        Reply

    24. Mark says

      Hi Leron,

      Thank you for this another very detailed and useful tutorial.

      Yay! I successfully installed CDN on my website for free.

      Reply

    Leave a Reply

    Your email address will not be published. Required fields are marked *