Sviluppo e distribuzione di WordPress con MAMP, Git e Dropbox

Al giorno d'oggi per diventare uno sviluppatore freelance di WordPress hai spesso bisogno di sviluppare contemporaneamente diversi siti WordPress per diversi clienti. Ecco come.

Ciò richiede che tu adotti quanto segue:

  • Un ambiente di sviluppo locale flessibile che ti consente di aggiungere facilmente un nuovo sito, con un moderno sistema di controllo delle versioni e che ti consente di sviluppare sia sul tuo computer desktop che sul tuo notebook.
  • Un sistema di distribuzione affidabile e sicuro per il server remoto.

Con questa configurazione puoi facilmente:

  • sviluppare e testare localmente il tuo nuovo plugin o tema in modo sicuro e distribuirlo sul server di produzione;
  • aggiornare localmente i file core di WordPress o aggiornare i plug-in / temi già installati in modo sicuro, verificare che nulla interrompa il sito e distribuisca queste modifiche al server di produzione;
  • apportare modifiche rapide su alcuni file sul server remoto e quindi recuperarli nell'ambiente locale.

Prima di iniziare

In questo tutorial facciamo riferimento a Mac OS X ma puoi facilmente adattarlo a qualsiasi altro sistema operativo. Supponiamo inoltre che il server remoto abbia già installato Git e che l'accesso SSH sia configurato con l'autenticazione della chiave pubblica (le installazioni SSH e Git non rientrano nell'ambito di questo tutorial).

Lo scenario che vedremo è costituito da a Ambiente locale che consente lo sviluppo di un sito WordPress con plugin e temi e a Server remoto che ospiterà il sito WordPress "di produzione". Nell'ambiente locale useremo a Desktop computer e a Taccuino computer. Su entrambi i computer configureremo MAMP, Dropbox e Git in modo che tu possa lavorare sul tuo desktop quando sei in ufficio e sul tuo Notebook quando non sei in ufficio e tutte le modifiche saranno sincronizzate.

Useremo Dropbox per sincronizzare file e DB tra Desktop e Notebook, e useremo Git per tenere traccia delle modifiche localmente e per distribuirle sul server remoto.

Per semplicità definiamo www.site.dev come il sito di sviluppo sull'ambiente locale e www.site.com come sito di produzione sul server remoto.


Cosa faremo

Nell'ambiente locale:

  • creare una struttura di directory di base su Dropbox;
  • installare e configurare MAMP (sia sul desktop che sul notebook) per funzionare in un ambiente Dropbox;
  • configurare ed eseguire siti di sviluppo WordPress sia sul desktop che sul notebook;

Sul server remoto:

  • configurare Git, configurare il repository remoto e il hook necessario;
  • configurare MySQL per il sito di produzione di WordPress;

Nell'ambiente locale:

  • configurare Git, configurare il repository locale;
  • modificare la configurazione di WordPress per gestire la connessione DB locale / remota;
  • effettuare il commit iniziale e la prima distribuzione sul server remoto.

Esempi tipici di flusso di lavoro:

  • sviluppo di temi / plugin;
  • Gestione di WordPress;
  • riconoscere le modifiche "urgenti al volo" sul server di produzione e trascinarle nell'ambiente locale;

Quello di cui hai bisogno

  • Nell'ambiente locale:
    • Un account Dropbox, un client Dropbox installato sia sul desktop che sul notebook (consultare il sito Web di Dropbox per le istruzioni di installazione);
    • MAMP, puoi prenderlo da qui;
    • Il tuo editor di testo preferito;
    • Git (come installare Git localmente è trattato nel libro Pro Git);
  • Sul server remoto:
    • PHP e MySQL secondo i requisiti di WordPress;
    • Git installato (vedi qui);
    • Un account con accesso SSH e autenticazione a chiave pubblica;

Passaggio 1 Creare una struttura di directory su Dropbox

Scarica e installa Dropbox sul desktop e sul notebook (vedi qui per le istruzioni). Utilizza lo stesso account su entrambi i computer.

Nella cartella Dropbox sul desktop, crea la seguente struttura di directory:

  • Dropbox
    • Sviluppo
      • conf
      • db
      • logs
      • vhost

Verificare che la stessa struttura di directory sia propagata su Notebook.


Passaggio 2 Installare e configurare MAMP

MAMP è un acronimo che sta per: Mac, Apache, MySQL e PHP, è un'applicazione che installa un ambiente server locale sul tuo Mac.

La sua installazione è molto semplice: scarica MAMP da qui, decomprimi l'archivio e fai doppio clic su di esso, quindi segui le istruzioni. Fatelo su desktop e notebook. Non avviare ancora MAMP: prima di farlo devi spostare il database e modificare la configurazione predefinita.

Sposta la cartella del database

Sopra Desktop spostare la cartella del database dalla posizione standard di MAMP alla directory db su Dropbox, per fare ciò aprire un Terminale e utilizzare i seguenti comandi:

cd / Applicazioni / MAMP / db mv * ~ / Dropbox / Sviluppo / db /

Sopra Taccuino aprire un Terminale ed eliminare la cartella del database usando il seguente comando:

cd / Applicazioni / MAMP rm -rf ./db

Infine su entrambi Desktop e Taccuino creare un collegamento simbolico da MAMP a Dropbox con il seguente comando:

ln -s ~ / Dropbox / Sviluppo / db / Applicazioni / MAMP / db

Ora il collegamento simbolico / Applicazioni / MAMP / db punta alla cartella condivisa Dropbox ~ / Dropbox / sviluppo / db che contiene i database MAMP. Non avviare ancora MAMP: dobbiamo prima apportare una modifica alla configurazione.

Cambia le porte MAMP

MAMP utilizza le porte personalizzate per le istanze del server Apache e MySQL: Apache gira sulla porta 8888, MySQL gira sulla porta 8889. È possibile mantenere questa configurazione o, come suggeriamo, cambiarla per utilizzare le porte standard: 80 per Apache e 3306 per MySQL.

Per ripristinare le porte standard, avviare MAMP solo sul desktop , fare clic su "Preferenze ...", quindi su "Porte", fare clic su "Imposta su porte Apache e MySQL predefinite" e infine fare clic su "OK": MAMP salva la nuova configurazione e si riavvia automaticamente.

Ora sul desktop apri il tuo browser preferito e vai a http: // localhost / MAMP /: dovresti vedere la Home Page di MAMP.

Se non vedi la Home Page di MAMP probabilmente hai abilitato la Condivisione Web: apri le Preferenze di Sistema, fai clic su Condivisione e disattiva la Condivisione Web.

Non preoccuparti se Mac OS X richiede una password all'avvio di MAMP: abbiamo installato Apache per l'esecuzione sulla porta 80 che è una porta privilegiata e richiede una password di amministratore.

Perché in questa configurazione MAMP non può essere eseguito contemporaneamente sul desktop e sul notebook, esci da MAMP sul desktop, avvialo su Notebook e configuralo allo stesso modo. Quando finisci di interrompere MAMP.

Cambia MAMP - Configurazione Apache

La configurazione di MAMP Apache è memorizzata in /Applications/MAMP/conf/apache/httpd.conf. Modifica questo file con il tuo editor di testo preferito e aggiungi le seguenti righe (fallo su entrambi i tuoi Desktop e il tuo Taccuino):

# Include la configurazione condivisa sulla cartella Dropbox Include /Users/YOURUSERNAME/Dropbox/Development/conf/local-development.conf

Sostituire IL TUO NOME UTENTE con il tuo nome utente Mac OS X (se non lo conosci, apri Terminale ed esegui chi sono; ti fornirà il tuo nome utente).

Questa istruzione indica ad Apache di caricare un file di configurazione aggiuntivo dalla cartella Dropbox (sincronizzato tra Desktop e Notebook). In questo modo possiamo usarlo come il file di configurazione dell'ambiente locale.

Imposta l'host virtuale di Apache su MAMP

Apache Virtual Host è una bella funzionalità che consente di eseguire più di un sito Web (ad esempio www.site1.com e www.site2.com) su un singolo server. Gli host virtuali possono essere "basati su IP", il che significa che hai un indirizzo IP diverso per ogni sito web o "basato sul nome", il che significa che hai più nomi in esecuzione su un indirizzo IP. L'ultima è la funzione che useremo (vedi qui per i dettagli).

Con il tuo editor di testo preferito apri il file di configurazione dell'ambiente locale /Users/YOURUSERNAME/Dropbox/Development/conf/local-development.conf e inserisci le seguenti linee:

 AllowOverride All  # # Named Virtual Host # LogFormat "% V% h% l% u% t \"% r \ "% s% b" vcommon CustomLog /Users/YOURUSERNAME/Dropbox/Development/logs/access.log vcommon ErrorLog / Users / YOURUSERNAME / Dropbox / Development / logs / errors.log UseCanonicalName Off VirtualDocumentRoot / Users / YOURUSERNAME / Dropbox / Development / vhosts /% 0

La stringa "0%"lancia la magia: quando il server Apache riceve una richiesta per il dominio www.site.dev cerca una directory di nome www.site.dev nel / Users / nomeutente / Dropbox / sviluppo / vhosts /, e se trovato serve i file da esso.

Le altre istruzioni indicano ad Apache dove scrivere errori e accedere ai file di registro.


Passaggio 3 Imposta WordPress

Ora siamo pronti per configurare il sito di sviluppo di WordPress www.site.dev. Per fare questo dobbiamo creare un www.site.dev directory (sul desktop).

e dobbiamo modificare (su desktop e notebook) / etc / hosts file per mappare il nome host www.site.dev all'indirizzo IP dell'host locale. Con il tuo editor di testo preferito apri il file / etc / hosts e aggiungi le seguenti righe alla fine del file (Mac OS X richiede la tua password per modificare questo file di sistema):

# sviluppo locale 127.0.0.1 www.site.dev

A questo punto potrebbe essere utile fare qualche controllo: apri Terminale ed esegui il seguente comando:

ping -c 3 www.site.dev

Dovresti avere una risposta simile a questa:

Ora è il momento di configurare WordPress: scarica il pacchetto WordPress da qui e decomprimi in una cartella temporanea. Sposta tutto il contenuto della cartella temporanea all'interno /Users/YOURUSERNAME/Dropbox/Development/vhosts/www.site.dev/.

Sul desktop avviare MAMP e aprire il browser all'indirizzo http: // localhost / MAMP /. Fare clic sulla scheda phpMyAdmin e creare un nuovo database denominato site_dev:

Apri il tuo browser su www.site.dev e completa l'installazione di WordPress usando questi valori:

  • Nome del database: site_dev
  • Nome utente: root
  • Password: root
  • Host del database: localhost
  • Prefisso tabella: wp_

Fermare MAMP sul desktop, attendere la sincronizzazione di Dropbox e avviarlo su Notebook. Apri il tuo Browser Notebook su www.site.dev: WordPress è già configurato!

Alla fine del passaggio 3 abbiamo un ambiente di sviluppo WordPress locale basato su MAMP e sincronizzato tra Desktop e Notebook tramite Dropbox, ora è il momento di configurare il server remoto.


Passaggio 4 Configurare Git sul server remoto

Git è un sistema di controllo della versione distribuito che registra le modifiche a un file o un insieme di file nel tempo e consente di trasferire le modifiche a un server remoto (descrizione più dettagliata qui). In questo tutorial assumiamo che Git sia già installato sul tuo server. Di conseguenza, procediamo con la configurazione.

Per prima cosa devi accedere al server. Supponiamo che tu abbia un account con accesso SSH e autenticazione a chiave pubblica. In questo modo non devi inserire una password ogni volta che accedi. Apri una finestra di terminale e connettiti al server:

ssh [email protected]

Imposta alcune impostazioni predefinite Git su utente ed e-mail per evitare che Git chieda loro ogni volta:

git config --global user.email "[email protected]" git config --global user.name "Il tuo nome"

Installazione e inizializza un repository vuoto:

mkdir site.git cd site.git git init --bare

Per consentire la distribuzione dallo sviluppo al sito di produzione, è necessario configurare a Git hook (Uso Vi come editor di testo per il server remoto):

cd hooks vi post-ricevi

Quindi inserisci le seguenti linee:

#! / bin / bash # docroot = "/ home / yourusername / www" mentre leggi oldrev newrev ref do branch = "echo $ ref | cut -d / -f3" if ["master" == "$ branch"]; quindi git --work-tree = $ docroot checkout -f $ branch fi done

Imposta la variabile docroot al server Web DocumentRoot e quindi effettuare post-ricezione eseguibile:

chmod 755 post-ricevi

Questo hook viene richiamato al termine del processo di invio delle modifiche da un client (desktop o notebook) al server remoto. Effettua la distribuzione nella directory DocumentRoot del server Web di produzione (vedere qui per i dettagli su Git Hooks).

I comandi Git ne usano alcuni variabili ambientali; dobbiamo impostarne due: GIT_DIR e GIT_WORK_TREE. Il primo specifica il percorso del repository, il secondo il percorso dell'albero di lavoro (il DocumentRoot). La shell predefinita sul mio server remoto è Bash, quindi li aggiungo al file .bash_profile.

cd ~ vi .bash_profile

Aggiungi le seguenti righe alla fine del file:

# GIT export GIT_DIR = ~ / repo.git export GIT_WORK_TREE = ~ / www

Passaggio 5 Configura MySQL su server remoto

Sul server remoto è ancora necessario creare un database su MySQL: per farlo è possibile seguire le istruzioni di installazione dettagliate sul codice WordPress. Il mio server remoto ha cPanel come pannello di controllo di hosting, quindi seguo queste istruzioni.


Passo 6 Installazione Git sull'ambiente locale

Installa Git su Mac OS X (istruzioni più dettagliate sul libro Pro Git): scarica il programma di installazione dalla pagina Codice Google, fai doppio clic sul file dmg, quindi sul file pkg e segui le istruzioni. Fatelo su desktop e notebook.

Ora sei pronto per inizializzare un repository Git sull'ambiente locale. Per farlo, apri Terminale (sul desktop o sul notebook) e usa i seguenti comandi:

cd ~ / Dropbox / Development / vhost / www.site.dev git init .

Dovresti vedere qualcosa di simile a questo:

Per verificare lo stato del repository Git, utilizzare questo comando:

stato git

l'output dovrebbe essere come questo:

Git ti sta dicendo che tutti questi file e queste directory non sono tracciati nel repository e suggerisce di usare il aggiungi git comando per rintracciarli.

Prima di fare questo è necessario apportare alcune modifiche alla configurazione di Git. Dobbiamo dire a Git quali file dovrebbe tracciare e quali non dovrebbero. Per fare ciò usa il .gitignore file.

Il file .gitignore

Questo file specifica i file non tracciati che Git dovrebbe ignorare (vedi qui per maggiori dettagli). Il comando è semplice, facciamo un esempio per capire come funziona:

# ignora Mac OS X Desktop Service Store .DS_Store # ignora la directory my-test-dir e tutte le sottodirectory my-test-dir / #ignore tutti i file .txt * .txt

Quindi crea il file ~ / Dropbox / Sviluppo / vhost / www.site.dev / .gitignore e aggiungi le seguenti linee:

# ignora Mac OS X Desktop Service Store .DS_Store # ignora debug.log wp-content / debug.log

Per il momento questo è tutto ciò che devi fare. In seguito aggiungeremo altri file e directory.


Passaggio 7 Modificare la configurazione di WordPress per gestire connessioni DB locali e remote

WordPress su un ambiente locale utilizza DB di MAMP e il suo file di configurazione wp-config.php riflette questa configurazione (nome utente e password standard di MAMP MySQL):

// ** Impostazioni MySQL - Puoi ottenere queste informazioni dal tuo host web ** // / ** Il nome del database per WordPress * / define ('DB_NAME', 'site_dev'); / ** Nome utente del database MySQL * / define ('DB_USER', 'root'); / ** Password del database MySQL * / define ('DB_PASSWORD', 'root'); / ** Nome host MySQL * / define ('DB_HOST', 'localhost');

Funziona su un ambiente locale ma cosa succede se lo distribuiamo sul server remoto? Ovviamente non riuscirà a connettersi al DB perché DB_NAME, DB_USER, DB_PASSWORD e probabilmente DB_HOST sono sbagliati.

La soluzione viene dall'articolo di Mark Jaquith: modificare il wp-config.php file in modo che la configurazione per Local Environment sia caricata da un altro file e che il file non sia tracciato da git. Per fare questo apri wp-config.php file e sostituire le righe precedenti con queste righe:

if (file_exists (dirname (__FILE__). '/local-config.php')) include (dirname (__FILE__). '/local-config.php');  else define ('DB_NAME', 'YOURDBNAME'); define ('DB_USER', 'YOURDBUSER'); define ('DB_PASSWORD', 'YOURDBPASSWORD'); define ('DB_HOST', 'YOURDBHOSTNAME'); 

Sostituire YOURDBNAME, YOURDBUSER, YOURDBPASSWORD e YOURDBHOSTNAME con i valori che hai definito nel passaggio 5.

Crea il ~ / Dropbox / Sviluppo / vhost / www.site.dev / local-config.php file e inserisci le definizioni dell'ambiente locale qui:

define ('DB_NAME', 'site_dev'); define ('DB_USER', 'root'); define ('DB_PASSWORD', 'root'); define ('DB_HOST', 'localhost');

Ora dobbiamo aggiungere local-config.php a .gitignore in modo che Git non la seguirà:

# ignora Mac OS X Desktop Service Store .DS_Store # ignora debug.log wp-content / debug.log # ignora local-config.php local-config.php

OK, ora siamo pronti a fare il primo commit.


Passaggio 8 Eseguire il commit delle modifiche sull'ambiente locale e inviarle sul server remoto

Per eseguire il commit delle modifiche al repository Git su Local Environment, inserisci questi comandi:

cd ~ / Dropbox / Development / vhost / www.site.dev / git add. git commit -m "Importazione iniziale"

Il primo comando Git tiene traccia di tutti i file e le directory in ~ / Dropbox / Sviluppo / vhost / www.site.dev / tranne quello in .gitignore, il secondo li impegna tutti nel repository Git.

È tempo di spingere WordPress su Remote Server, ma prima dobbiamo impostare il repository Git remoto:

git remote aggiungi sito web ssh: //[email protected]/home/yourusername/site.git

Questo comando dice a Git che c'è un repository remoto chiamato sito web, ospitato sul server www.site.com accessibile tramite una connessione SSH.

Finalmente la prima distribuzione sul server remoto:

git push sito master

L'output del comando dovrebbe essere simile al seguente:

Ora puoi puntare il tuo browser su www.site.com e vedi il sito WordPress su Remote Server.


Alcuni esempi di flussi di lavoro tipici

Sviluppo di temi / plugin

Come esempio di sviluppo di temi / plugin, possiamo creare sul tema Ambiente locale un tema figlio di Twenty Eleven e distribuirlo sul server remoto.

Per istruzioni dettagliate su come creare un tema figlio, puoi leggere questo articolo su Wptuts +. Fondamentalmente dobbiamo creare una directory che contenga due file: style.css e functions.php (quest'ultimo è facoltativo).

Quindi su Desktop (o su Notebook) crea la directory ~ / Dropbox / Sviluppo / vhost / www.site.dev / wp-content / themes / my-TwentyEleven-bambino, quindi creare un file chiamato style.css all'interno di questa cartella e aggiungi le seguenti linee:

/ * Nome del tema: My Twenty Eleven Child URI di tema: http: //www.site.com/ Descrizione: tema secondario per il tema Twenty Eleven Autore: Nome utente Autore URI: http: //your-site.com/ Modello: ventieleven Version: 0.1 * / @import url ("... /twentyeleven/style.css");

Puoi anche aggiungere alcune modifiche CSS sotto il @importare linea, ad esempio puoi cambiare lo sfondo del corpo:

body background: # D51717;

Quindi creare il functions.php file e aggiungi le seguenti righe:

'. "\ N";  add_action ('wp_head', 'favicon_link'); ?>

Questo semplice file funzione fa una cosa: aggiunge un collegamento favicon all'elemento head delle pagine HTML.

Ora il tema del nostro bambino è completo e dobbiamo rintracciarlo nel repository Git:

cd ~ / Dropbox / Development / vhost / www.site.dev / git aggiungi wp-content / theme / my-twentyeleven-child /

Quindi dobbiamo impegnare le modifiche:

git commit -m "Aggiunto My Twenty Eleven Child Theme"

In questo modo è possibile continuare lo sviluppo del tema secondario aggiungendo file, modificando il codice e inserendo tutte queste modifiche nel repository. Quando il tuo tema è pronto per il server di produzione devi semplicemente emettere il spingere comando:

git push sito master

In questo modo il tema figlio verrà inserito nel server remoto, pronto per essere utilizzato.

Se sviluppi un plugin, segui la stessa procedura: segui la directory dei plugin e commetti le modifiche sul repository. Quando il tuo plugin è pronto, fallo su Remote Server.

Gestione di WordPress

In modo simile possiamo gestire l'installazione di plugin per WordPress o l'aggiornamento di WordPress. Supponiamo di voler provare un nuovo plug-in e vogliamo essere certi che non interrompa il nostro sito di produzione.

Lo installiamo sull'ambiente locale prima usando il pannello di amministrazione di WordPress (vedi qui per i dettagli), quindi dobbiamo seguirlo e aggiungerlo al repository Git (fallo sul tuo desktop o sul tuo notebook):

cd ~ / Dropbox / Development / vhost / www.site.dev / git aggiungi wp-content / plugins / plugin-to-try / git commit -m "Aggiungi il plugin per provare"

Se il plugin funziona, puoi distribuirlo su Remote Server usando:

git push sito master

e abilitarlo usando il pannello di amministrazione di WordPress.

Se il plugin non funziona, puoi disinstallarlo utilizzando il pannello di amministrazione di WordPress, quindi puoi rimuoverlo dai file tracciati e confermare le modifiche:

git rm wp-content / plugins / plugin-to-try / git commit -m "Rimosso il plugin per provare"

Un piccolo consiglio: se aggiungi una directory plugin a .gitignore file (prima del commit) il plugin rimarrà solo sull'ambiente locale ma non verrà inserito sul server remoto. Ciò potrebbe essere utile per plug-in come Debug Bar utilizzati nello sviluppo locale ma che non devono essere trasferiti su un sito di produzione.

Apportare modifiche rapide sul server di produzione e trascinarle nell'ambiente locale

Ok, sappiamo, i rapidi cambiamenti sul server di produzione non sono una buona abitudine, anzi sono una cattiva abitudine, ma a volte sono inevitabili. Supponendo che abbiamo cambiato il DB_PASSWORD sul server remoto wp-config.php file e ora vogliamo riconoscere questo cambiamento nel nostro ambiente locale wp-config.php. Per eseguire questa operazione, connettersi innanzitutto al server remoto tramite SSH e utilizzare il seguente comando:

git commit -m "cambia DB_PASSWORD su wp-config.php"

Quindi estrarre le modifiche dal repository remoto utilizzando il seguente comando sul desktop:

git pull sito master

Se leggi il wp-config.php vedrai il nuovo DB_PASSWORD.


Conclusione

In questo tutorial abbiamo visto uno scenario costituito da un ambiente locale e un server remoto che ospita lo sviluppo e il sito di produzione www.site.com, ma puoi facilmente ripetere questa configurazione per www.mynewcustomer.com, per www.myothernewnewcustomer.com e così via.

MAMP, Dropbox e Git formano un team vincente per gestire lo sviluppo e l'implementazione di WordPress, rappresentano un ambiente di sviluppo flessibile che consente di aggiungere facilmente un nuovo sito, svilupparlo ovunque tu sia e distribuirlo in modo affidabile al server di produzione.

Se lavori regolarmente con WordPress, consulta la selezione di fantastiche utilità di WordPress su Envato Market. Dai plugin per la sicurezza ai personalizzatori iFrame, c'è sicuramente qualcosa che può aiutarti.

Utilità di WordPress su Envato Market