Hoe configureer je Cloudflare voor je Magento 2-webshop?

Geschreven door Joachim op 10/01/2017

We zijn momenteel een nieuwe Magento 2-webshop aan het bouwen die bijzonder snel moet laden en onder alle omstandigheden performant moet zijn. Ook vanuit het buitenland moet elke pagina binnen een halve seconde gerenderd zijn, inclusief images.

Om die doelstellingen waar te maken, kozen we ervoor om met Cloudflare te werken. Dat is een CDN (content delivery network of content distribution network) dat je webshop sneller en veiliger maakt:

  • Sneller door content fysiek te cachen bij de dichtsbijzijnde server wereldwijd
  • Veilig omdat Cloudflare Web Application Firewall (WAF),DDoS-bescherming en SSL voorziet

In dit blogbericht vertellen we je hoe je een Cloudflare opzet in combinatie met een Magento 2. Het is best eenvoudig. In minder dan 5 minuten heb je al een Cloudflare opgezet.

Tip: Met een gratis Cloudflare-account kan je best veel doen. Ideaal om te experimenteren voor je met het echte werk begint.

Een Cloudflare-account aanmaken

Stap1: Surf naar de website van Cloudflare en klik op ‘Sign Up' bovenaan de pagina.

Stap 2: Creëer een nieuw account door je e-mailadres en wachtwoord in te vullen en op ‘Create Now’ te klikken. Tip: Kies een algemeen e-mailadres en niet eentje die aan 1 website verbonden is. Wij kozen bijvoorbeeld voor het algemene e-mailadres van Newance, zodat we er meerdere websites en webshops aan kunnen toevoegen.

Stap 3: Voer de domeinnaam van je webshop in en klik op ‘Begin Scan’.

Stap 4: Cloudflare scant nu alle DNS-records om ze over te zetten op hun nameserver. Zo krijg je de zekerheid dat je webshop als vanouds werkt. Als de scan afgerond is, klik je op ‘Continue’.

Stap 5: Je krijgt nu een lijst met alle gevonden DNS-records. Tijdens deze stap is het een goed idee om een extra subdomein toe te voegen. Voeg een extra A record toe als je wil dat alle assets en media files via een apart subdomein gebeuren (in dit voorbeeld gebruiken we cdn.example.com).

Opgelet: Zorg ervoor dat het A record naar hetzelfde IP-adres verwijst als al je andere A records. Hou er ook rekening mee dat wellicht niet alle DNS-records zichtbaar zijn. Cloudflare toont bijvoorbeeld nooit MX-records.

Stap 6: Nadat je alle DNS-records gecontroleerd hebt, klik je op ‘Process And Continue’.

Stap 7: Selecteer het Cloudflare-plan dat aan je eisen voldoet. Voor dit blogbericht kiezen we voor het gratis-scenario. Klik nadien op ‘Process And Continue’.

Stap 8: In deze laatste stap krijg je de Cloudflare-nameservers voor je domein toegewezen. Per domein zijn er verschillende nameservers. Je hebt de waardes van die nameservers nodig om de nameservers van je domeinnaam aan te passen (zie volgende hoofdstuk).

Stap 9: Je Cloudflare-account is aangemaakt.

De nameservers van je domeinnaam aanpassen

Om al het webverkeer te routeren via het Cloudflare-netwerk, moet je de nameservers van je domeinnaam aanpassen. Dat kan via het control panel van je registrar.

De waardes voor de nameservers kreeg je in de laatste stap toen je je Cloudflare-account aanmaakte. Ben je ze kwijt? Je kan de waardes altijd terugvinden in je Cloudflare-dashboard onder ‘Overzicht’.

Opgelet: Het kan even duren vooraleer de nameservers werden aangepast. Dat hangt een beetje af van je TTL-instellingen.

Je Magento 2-webshop configureren

Zorg ervoor dat alle requests voor assets en media files via cdn.example.com lopen. Dat kan je aanpassen via het adminpanel van je Magento 2-webshop. Ga daarvoor naar stores → configuration → web.

In de onderstaande screenshot zie je welke instellingen wij gebruikt hebben. Nadat je dit aangepast hebt, klik je op ‘opslaan’. Daarna maak je de cache van je webshop leeg.

Als je deze stap correct uitvoert, zullen alle requests voor assets en media files via het Cloudflare-netwerk verlopen.

Configureer CORS voor web fonts

Soms verloopt het inladen van web fonts via Cloudflare een beetje stroef. Dat los je op door CORS-headers toe te voegen. Voeg onderstaande regels toe in nginx aan je serverconfiguratie-bestand.

Werk je in Apache? Dan volstaat het om de volgende regels toe te voegen aan je .htaccess-bestand:

Bezorg Cloudflare een nieuwe versie van de bestanden door de cache in Cloudflare leeg te maken. Dat doe je via ‘Dashboard’ → ‘Caching’ en te klikken op ‘Purge Everything’.

Heb je nog tips over Cloudflare? Of heb je nog vragen? Laat het ons hieronder weten. 

Geschreven door
Joachim Vanthuyne

Back-end-developer. Verzorgt de interactie tussen websites en mensen.

Reacties op dit artikel

Beste,

mooi artikel !
Ik vroeg me of de Cloudflare ook voor Magento 1.8.1 werkt.
Ik mijn Magento control panel kan ik de base url voor static view files nml niet terugvinden.

ps : ik heb nogal wat plugins in Magento, zal dit problemen-conflicten geven?

mvg,

Erwin Geens

Geschreven door Erwin Geens op 24 maart 2017

Dag Erwin

Bedankt voor je reactie. In een Magento 1 webshop kan je ook gebruik maken van Cloudflare. Static files bestaan wel niet in Magento 1, daarom zal je deze ook niet terug vinden.

Het volstaat in Magento 1 om je
Base Skin URL, Base Media URL & Base JavaScript URL aan te passen zodat deze verwijzen naar je CDN (sub)domein.

Alvast veel succes!

Geschreven door Joachim Vanthuyne op 25 maart 2017
Plaats een reactie

Reageer op dit artikel

Wordt niet weergegeven op de website.