aws cloudfront cdn

stampa questo articolo
In questo articolo ti farò vedere come configurare al meglio la CDN CloudFront di AWS (Amazon Web Services) per velocizzare al massimo il tuo blog wordpress.

Analizzeremo insieme due diverse modalità di lavoro:

Origin Pull –> I file rimangono sul tuo website (modalità solo CloudFront)

Origin Push –> I file verranno trasferiti su un bucket S3 di AWS (modalità S3 + CloudFront)

Quando parlo di file mi riferisco soprattutto alle immagini del tuo blog, per cui tutta la cartella uploads di una installazione standard di wordpress e che solitamente si trova in: “[wwwroot]/wp-content/uploads

AWS CloudFront CDN: Come configurarla per velocizzare wordpressClick To Tweet

Utilizzare una CDN per “servire” le immagini del nostro blog porta una serie di vantaggi in termini prestazionali in quanto:

  • Scarica il vostro webserver i termini di traffico ed utilizzo di CPU (le immagini sono la parte più corposa di una request http)
  • Parallelizza il download
  • Distribuisce il download su più nodi geografici

Insomma è una buona norma quella dell’utilizzo di una CDN.

Se vuoi leggere qualche altro consiglio sul tema “velocizzare il tuo blog” allora ti consiglio di dare uno sguardo anche a questo mio precedente articolo, nel quale parlo di hosting, cdn, templating e caching.

Differenze tra la modalità Pull e la modalità Push

La differenza sostanziale sta nell’utilizzare due differenti storage nei quali archiviare le tue immagini.

Come già detto la modalità “Pull” prevede l’utilizzo della CDN “agganciata” al tuo webserver, per cui le immagini continueranno ad essere archiviate nella posizione in cui sono state sempre archiviate ([wwwroot]/wp-content/uploads)

Invece nella modalità “Push” dovrai spostare le immagini fino ad oggi salvate nella directory uploads in un Bucket S3 di Amazon (S3 = Simple Storage Service), inoltre tutte le nuove immagini dovranno essere automaticamente salvate nel Bucket S3.

A tutto questo ci penserà un plugin che vedremo in dettaglio più avanti.

Perché usare la modalità Push o la modalità Pull?

Sta a te decidere quale sia la miglior soluzione per il tuo blog wordpress, considera che:

La CDN Cloufront in modalità Pull è molto semplice da configurare, non stravolge l’asset dei tuoi file fino ad oggi utilizzato ed ha un costo molto basso (devi pagare solo il canone mensile di AWS Cloudfront).

La CDN Cloufront in modalità Push è più complessa da configurare, stravolge l’asset dei tuoi file ed ha un costo maggiore (devi pagare anche il canone del bucket S3), tuttavia ha una serie di vantaggi non da poco come:

  • Stai mettendo nel cloud tutti i tuoi file del tuo blog wordpress (stai andando nel futuro … )
  • I Bucket S3 sono “oggetti” molto performanti pensati proprio per svolgere al meglio il lavoro di storage di file
  • Stai scaricando il tuo website sia in termini di spazio disco usato che in termini di utilizzo di CPU e Traffico di rete
  • Un domani una eventuale migrazione su altro hosting provider sarà molto più semplice e veloce, in quanto tutte le immagini rimarranno su AWS

Insomma ci sono molti aspetti da valutare, tra questi anche il costo è una variabile che va presa in considerazione.

A questo link trovi un simulatore che ti permetterà di capire il costo di tale infrastruttura, mentre a questi link trovi i prezzi delle due soluzioni (S3 e CloudFront):

Considera che per dimensioni standard si parla di somme che vanno da meno di 2 ad un  massimo di 4 dollari / mese.

IMPORTANTE : Tieni a mente che il primo anno i servizi AWS sono gratuiti, per cui potresti fare delle prove per poi decidere se e come procedere l’anno successivo.

Tutti i dettagli del piano gratuito di AWS sono disponibili a questo link

Ora andiamo a vedere in dettaglio cosa devi fare per configurare il tuo blog wordpress nelle due modalità, prima però devi crearti un nuovo utente su AWS ed impostare le grant (permessi) per l’accesso a CloudFront.

Creare un nuovo utente per l’accesso a CloudFront

Per creare un nuovo utente devi accedere alla consolle amministrativa di AWS, disponibile a questo link. Ricorda che il primo anno puoi usufruire del piano gratuito di AWS.

Una volta entrato nella consolle amministrativa troverai tutti i servizi AWS disponibili in un unico grande pannello:

000 Servizi AWS 1024x596 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Seleziona il servizio IAM sotto la voce Security, Identity & Compliance

001 IAM 300x205 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Seleziona la voce di menu “Users” e poi clicca sul bottone blu “Add user

002 IAM creare utente 300x249 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Inserisci un nome utente a tuo piacere e poi seleziona il tipo di accesso “Programmatic access

003 IAM step utente 1024x398 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

A questo punto seleziona “Attach existing policies directly” e seleziona le seguenti policy: “CloudFrontFullAccess” e “AmazonS3FullAccess

004 IAM permessi 1024x833 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Al termine del processo dovrai avere le seguenti  connesse al tuo account

005 IAM permessi s3 e cloudfront 1 300x214 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Terminata la creazione dell’utente

006 IAM fine utente 1 300x212 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

ricorda di scaricare il file .csv con le tue chiavi di accesso ad AWS:

  • Access key 
  • Secret access key

Conservale perché ti serviranno per configurare wordpress

AWS CloudFront CDN in modalità “Origin Pull”

Come detto sopra la modalità “Origin Pull” ti consente di configurare una cdn (Content Delivery Network) senza spostare i tuoi file su un bucket S3 di AWS, per cui CloudFront effettuerà la “consegna” delle tue immagini andando a “pescarle” direttamente dal tuo blog.

La configurazione è molto semplice.

Il mio consiglio è di utilizzare un plugin come W3 Total Cache per configurare direttamente da wordpress la cdn, il procedimento è molto veloce.

Configurare il plugin W3 Total Cache

Dopo aver installato il plugin W3 total Cache andate a configurare la cdn dalla voce di menu “General Setting”, selezionate Amazon CloudFront :

015 Origin Pull W3TC abilitazione CDN 1024x321 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

A questo punto accedete alla voce di menu “CDN” –> “Configuration” ed inserite i valori “Access Key ID” e “Secret Key” che avete appena scaricato da AWS

010 Origin Pull W3TC Setup 1024x725 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Cliccate sul bottone “Test Cloud Front distribution

012 Origin Pull W3TC Test 300x146 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

E verificate che appaia “Test Passed

A questo punto cliccate sul tasto “Create distribution” per creare una nuova distribuzione CloudFront su AWS

011 Origin Pull W3TC Creare distribuzione 300x61 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Una volta cliccato sul bottone “Create Distribution” tornate sulla consolle amministrativa di AWS CloudFront e verificate che sia stata creata una nuova distribuzione (Colonna Origin) e che sia abilitata (Enabled in verde):

013 Origin Pull Cloudfront distribuzione creata 1024x33 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Copiate il valore che trovate prima di “.cloudfront.net” nella colonna Domain Name, tornate su wordpress ed inserite il valore nel campo:

Replace site’s hostname with

014 Origin Pull W3TC configurazione finale CDN 1024x708 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

In questo modo tutte le url delle tue immagini verranno riscritte nella forma:

<img src=”https://322jdnecdk.cloudfront.net 

Ma fisicamente continueranno ad essere caricate nella cartella wp-content/uploads del tuo website.

AWS CloudFront CDN in modalità “Origin Pull” con S3

Questa seconda modalità, invece, è più complessa da configurare ma, una volta terminata, ti avrà consentito di:

  • Creare un nuovo bucket S3 AWS
  • Creare una nuova distribuzione di CloudFront collegata con il bucket S3
  • Spostare tutte le tue immagini già caricate sul bucket S3 di AWS
  • Caricare in automatico tutte le nuove immagini sul bucket S3 di AWS

Gli strumenti che ti serviranno per fare tutto questo sono:

  • plugin S3-Uploads scaricabile al seguente link
  • accesso in ssh al tuo spazio web (se utilizzi siteground trovi una guida a questo link)
  • wp-cli configurata e funzionante (se utilizzi siteground la wp-cli è abilitata di default)

Cominciate con il configurare il bucket S3 di AWS

Configurare bucket S3 di AWS

030 S3 bucket on AWS 300x185 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

 

Configurare CloudFront AWS per la sincronia con S3

Dal pannello principale di AWS cliccate su CloudFront sotto la voce Networking & Content Delivery

040 CloudFront su AWS 300x176 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Poi cliccate sul bottone “Create Distribution

041 CloudFront dashboard 300x146 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Continuate su “Get Started

042 CloudFront getstarted 300x230 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Nella voce “Origin Domain Name” selezionate il vostro bucket S3 visibile sotto “– Amazon S3Buckets –“

043 CloudFront creazione 1024x565 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Lasciate i settaggi di default

044 CloudFront selezione 300x196 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

e cliccate su “Create Distribution

045 CloudFront bottone creare 300x73 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Nel pannello generale vedrete la vostra nuova distribuzione nello status “In Progress

046 CloudFront in creazione 1024x152 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Al termine della creazione lo status sarà “Deployed” e lo stato “Enabled in verde”

047 CloudFront creato 1024x177 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Avete così terminato di configurare la cdn CloudFront, connettendola con il vostro nuovo bucket S3 AWS.

A questo punto dobbiamo iniziare a trasferire i file (le immagini del nostro blog) sul bucket S3 in modo tale che la cdn inizi a fare il suo lavoro di consegna e parallelizzazione.

Configurare il plugin S3-Uploads

Per trasferire tutte le immagini del vostro blog su S3 è necessario utilizzare un plugin wordpress specifico per questo mestiere.

Ce ne sono molti in circolazione, quasi tutti sono a pagamento, il migliore tra quelli a pagamento è il plugin “WP Offload S3 lite” che nella sua versione freeware ha delle notevoli limitazioni, soprattutto in relazione al trasferimento dei vecchi file su S3.

Mi serviva qualcosa di più flessibile e soprattutto di meno caro.

Dopo molto cercare ho finalmente trovato un plugin gratuito che fa tutto quello che ci serve: trasferisce i vecchi file e configura l’upload automatico dei nuovi.

Il plugin si chiama S3-Uploads ed è scaricabile da gitHub a questo link

Ha una solo difetto (se di difetto si può parlare): non ha una interfaccia grafica, per cui potete utilizzarlo solo attraverso la riga di comando che in ambito wordpress significa:

  • accesso in ssh al webserver
  • utilizzo della wp-cli di wordpress

Pronti per la configurazione?

Come prima cosa inserite queste voci nel file wp-config del vostro blog wordpress:

1
2
3
4
define( 'S3_UPLOADS_BUCKET', '***il nome del vostro bucket S3***' );
define( 'S3_UPLOADS_KEY', '***la vostra Key***' );
define( 'S3_UPLOADS_SECRET', '***la vostra secret Key***' );
define( 'S3_UPLOADS_REGION', 'eu-west-1' );

Un elenco delle region disponibili lo trovate a questo link

Disabilitate il rewrite automatico delle url, sempre nel file wp-config:

1
define( 'S3_UPLOADS_AUTOENABLE', false );

Scaricate, modificate e trasferite il file modificato con un normale software di gestione FTP (Es. FileZilla).

Infine installate il plugin S3-Uploads appena scaricato da gitHub, ma non attivatelo!

Configurare l’ssh per l’accesso allo spazio web

Per far funzionare il plugin dovete prima configurare l’accesso in ssh al tuo spazio web, se utilizzi siteground trovi una semplice guida a questo link

Come prima cosa è necessario creare una nuova chiave di accesso “SSH key pair” da cPanel

050 ssh 300x181 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Una volta creata, copiala ed incollala in un file che chiamerai “private_key“.

A questo punto da riga di comando (shell di linux, teminale su mac e command di windows) devi lanciare il comando

1
$ ssh-add "[path_al_file_privato]/private_key"

051 ssh add private key - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Una volta aggiunta la tua chiave privata ssh in locale, potrai accedere al tuo webserver con il comando di connect:

1
$ ssh utente@ipaddress -pPorta

Come utente puoi utilizzare quello che utilizzi per l’accesso a cPanel, l’ip address è quello che trovi sul tuo pannello amministrativo e la porta dipende da Hosting ad Hosting, di solito non viene usata la porta di default (22) ma una porta diversa, su siteground è la 18765

Se tutto andrà bene avrai accesso alla shell linux del tuo hosting e potrai navigare nella wwwroot del tuo sito.

Fai una verifica di funzionamento con il comando:

1
$ ls -la

053 ssh ls 1024x809 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Se otterrai la lista di tutti i tuoi file e cartelle sarai connesso in ssh al tuo webserver.

Testare il funzionamento della wp-cli

Una volta dentro la shell linux del tuo spazio web potrai testare il corretto funzionamento della wp-cli che se utilizzi siteground è abilitata di default.

Lancia quindi il comando:

1
$ wp

E verifica che compaia una lista di comandi, significa che la wp-cli è installata e funzionante, Bingo!

060 wp cli test 995x1024 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Abilitare il plugin S3-Uploads e verificarne il funzionamento

A questo punto, sempre da shell ssh accedete alla root del vostro website, con il comando:

1
$ cd /www/[eventuale_folder_di_installazione_di_wp]

Ora attivate il plugin appena caricato con il comando

1
$ wp plugin activate S3-Uploads

Ed andate a verificare che sia effettivamente attivo tra la lista dei plugin disponibili

070 S3 plugin 1024x90 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Ora lanciate il seguente comando:

1
$ wp s3-uploads verify

Questo comando carica e poi cancella un file verificando che tutto sia OK (settaggi e configurazione verso il bucket S3 AWS, )

071 S3 test via ssh - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Poi lanciate il seguente comando:

1
$ wp s3-uploads ls

che effettua un list dei file attualmente su S3 (dovrebbe tornarvi una lista vuota)

Caricare i file su S3 via wp-cli

Siete pronti, potete iniziare a caricare i file sul vostro bucket S3 di Amazon con il comando:

1
$ wp s3-uploads upload-directory wp-content/uploads/ s3://uploads/

Questo comando inizia il processo di trasferimento.

Potete andare a verificare che stia effettivamente trasferendo i file accedendo al vostro bucket, dovreste trovare una struttura a file e cartelle uguale a quella del vostro blog:

072 S3 upload file 276x300 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Rendere i file pubblici da console S3

Al termine del processo di sincronizzazione, dobbiamo rendere pubblici i file appena trasferiti altrimenti non sarà possibile visualizzarli nelle pagine del vostro blog.

Accedete quindi al vostro bucket su AWS, selezionatelo e cliccate sulla voce “More

Cliccate il link “Make Public

074 S3 rendere pubblico il bucket 246x300 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Questo renderà le vostre immagini pubbliche e non più private.

Abilitare il rewrite automatico delle url

Tutto quello che abbiamo fatto fino ad ora non ha in alcun modo attivato il nuovo processo, avete solo trasferito i file su S3 utilizzando la wp-cli, ma il vostro blog sta ancora “servendo” le immagini ospitate dal vostro hosting.

Per attivare la riscrittura delle url andando a prendere le immagini del bucket S3 è necessario cambiare il valore della variabile che avete messo nel file wp-config.php :

1
define( 'S3_UPLOADS_AUTOENABLE', false );

in:

1
define( 'S3_UPLOADS_AUTOENABLE', true );

Abilitando di fatto il processo di riscrittura delle url per tutte le immagini del tuo blog.

Da questo momento in poi tutte le vecchie immagini verranno prese dal bucket S3 ma soprattutto tutti i nuovi upload verranno trasferiti direttamente su AWS.

RICORDA: Abilitando il flag tutte le nuove immagini saranno ospitate solo su AWS, non verranno più salvate nella folder uploads del tuo blog!

Fare gli ultimi test di funzionamento

Puoi verificare che i file siano serviti da cloudfront andando a verificare la url di una immagine qualsiasi del tuo blog:

073 S3 rewrite url 1024x493 - AWS CloudFront CDN: Come configurarla per velocizzare wordpress

Se nel campo src del tag html img troverai una cosa del tipo xyz.cloudfront.net allora la riscrittura degli url sarà corretta.

Puoi anche fare un test di upload di una immagine e verificare che effettivamente questa venga salvata su S3.

Insomma, fai delle verifiche e controlla che tutto stia funzionando bene ma sopratutto che il tuo blog abbia messo il turbo!

 

Che te ne pare di questa guida? Hai mai pensato di usare AWS per velocizzare il tuo blog wordpress?

Potrebbe interessarti anche ...

7 Commenti

  1. Mo’ me devi spiega’ come fare a installare wp-cli su netsons visto che il comando sudo non me lo prende 😀
    Comunque grazie Ale, mi è stato molto utile l’articolo 🙂
    Per adesso ho installato il plugin WP Offload S3 Lite…poi vediamo

  2. Prima di pagare…ci devo battere la testa 😀
    …quindi, ho scaricato wp-cli dalla repo direttamente da shell e, non potendo utilizzare sudo ed anche il prefisso wp, sto usando questo comando:
    “php wp-cli.phar ”
    Funziona tutto egregiamente anche così 🙂
    Alcune note:
    ***rimuovi le parentesi quadre [] dal define in wp-config…che non capivo come mai non funzionava 😀
    *** la regione utilizzata in S3 – io sto usando Francoforte pertanto la regione per me è “eu-central-1”
    Qui la lista: http://docs.aws.amazon.com/general/latest/gr/rande.html

    Ps: metti una notifica quando qualcuno risponde al commento 😉

  3. Ciao.. molto interessante come articolo. la cosa che mi lascia il dubbio è la differenza PULL / PUSH
    A livello di prestazione… la PULL non sembra che dia benefici… o sbaglio?
    Puoi spiegarmi piu in “soldoni” l’efficienza?
    Ti ringrazio!

  4. Ciao Manolo,
    grazie per i complimenti.
    A livello di prestazioni ottieni benefici sia in modalità PULL che in modalità PUSH, l’unica cosa che cambia tra le due modalità è “dove” archiviare i file origine del tuo website.

    La CDN agisce indipendentemente dalla modalità di archiviazione dei file (PULL/PUSH) in quanto effettua un caching e poi li trasferisce al browser secondo le sue regole di parallelizzazione.

    Quello che cambia è “dove” vengono archiviati i file, se continui ad archiviarli sul tuo website oppure se li trasferisci su un buchet S3 AWS.

    Spero di essere stato abbastanza chiaro, altrimenti non preoccuparti, chiedi pure!

    Ciao
    Ale

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here