WordPress utveckling och distribution med MAMP, Git och Dropbox

Nuförtiden för att vara en frilansande WordPress-utvecklare behöver du ofta utveckla flera WordPress-webbplatser samtidigt för olika kunder. Här är hur.

Detta kräver att du antar följande:

  • En flexibel lokal utvecklingsmiljö som gör att du enkelt kan lägga till en ny webbplats med ett modernt Version Control System och det gör att du kan utveckla både på din stationära dator och på din bärbara dator.
  • Ett pålitligt och säkert distribueringssystem till fjärrservern.

Med denna inställning kan du enkelt:

  • utveckla lokalt och testa ditt nya plugin eller tema på ett säkert sätt och distribuera det till produktionsservern;
  • Uppdatera WordPress-kärnfilerna lokalt eller uppdatera redan installerade plugins / teman på ett säkert sätt, kontrollera att ingenting bryter webbplatsen och distribuera dessa ändringar till produktionsservern.
  • göra snabba ändringar på vissa filer på fjärrservern och hämta dem sedan i lokalmiljön.

Innan vi börjar

I denna handledning hänvisar vi till Mac OS X men du kan enkelt anpassa den till något annat operativsystem. Dessutom antar vi att den fjärranslutna servern har Git redan installerad och SSH-åtkomst konfigurerad med public key-autentisering (SSH och Git-installationerna ligger utanför ramen för denna handledning).

Scenariot som vi kommer att se består av a Lokal miljö som tillåter utvecklingen av en WordPress-webbplats med plugins och teman och a Fjärrserver som kommer att vara värd för "produktion" WordPress webbplats. I Lokal miljö använder vi en Desktop dator och a Anteckningsbok dator. På båda datorerna ställer vi in ​​MAMP, Dropbox och Git så att du kan arbeta på skrivbordet när du är på kontoret och på din bärbara dator när du inte är på kontoret och alla ändringar kommer att synkroniseras.

Vi kommer att använda Dropbox för att synkronisera filer och DB mellan skrivbord och anteckningsblock, och vi kommer att använda Git för att spåra förändringar lokalt och att distribuera dem till fjärrserveren.

För enkelhet definierar vi www.site.dev som utvecklingsplats på lokal miljö och www.site.com som produktionsplats på fjärrserveren.


Vad vi ska göra

På lokal miljö:

  • skapa en grundläggande katalogstruktur på Dropbox;
  • installera och konfigurera MAMP (både på skrivbordet och din bärbara dator) för att arbeta i en Dropbox-miljö;
  • konfigurera och köra WordPress-utvecklingswebbplatser på både ditt skrivbord och din bärbara dator;

På fjärrservern:

  • konfigurera Git, ställ in fjärrförvaret och den nödvändiga kroken;
  • konfigurera MySQL för produktionsplatsen för WordPress;

På lokal miljö:

  • konfigurera Git, konfigurera det lokala förvaret;
  • ändra WordPress-konfigurationen för att hantera lokal / fjärransluten DB-anslutning;
  • gör det första engagemanget och den första distribuera till fjärrservern.

Typiska arbetsflödesexempel:

  • tema / plugin utveckling;
  • WordPress-hantering;
  • Bekräfta förändringar av "brådskande förändringar" på produktionsservern och dra dem i den lokala miljön.

Vad du behöver

  • På lokal miljö:
    • Ett Dropbox-konto, en installerad Dropbox-klient både på skrivbordet och anteckningsboken (se Dropbox-webbplatsen för installationsanvisningar);
    • MAMP, du kan hämta det härifrån
    • Din favorit textredigerare;
    • Git (hur man installerar Git lokalt är täckt i Pro Git-boken);
  • På fjärrservern:
    • PHP och MySQL enligt WordPress krav;
    • Git installerad (se här);
    • Ett konto med SSH-åtkomst och public key-autentisering;

Steg 1 Skapa katalogstruktur på Dropbox

Hämta och installera Dropbox på skrivbordet och din bärbara dator (se här för instruktioner). Använd samma konto på båda datorerna.

I Dropbox-mappen på skrivbordet skapar du följande katalogstruktur:

  • Dropbox
    • Utveckling
      • conf
      • db
      • loggar
      • vhost

Kontrollera att samma katalogstruktur sprids på Notebook.


Steg 2 Installera och konfigurera MAMP

MAMP är en akronym som står för: Mac, Apache, MySQL och PHP, det är en applikation som installerar en lokal servermiljö på din Mac.

Dess installation är väldigt lätt: ladda ner MAMP härifrån, packa upp arkivet och dubbelklicka på det, följ sedan instruktionerna. Gör det på både skrivbord och anteckningsblock. Börja inte med MAMP: innan du gör det måste du flytta databasen och ändra standardkonfigurationen.

Flytta databasmappen

Desktop flytta databas mapp från MAMP standard plats till db katalog på Dropbox, för att göra detta öppna en terminal och använd följande kommandon:

cd / applikationer / MAMP / db mv * ~ / Dropbox / Utveckling / db /

Anteckningsbok öppna en terminal och radera databasmappen med följande kommando:

cd / applikationer / MAMP rm -rf ./db

Slutligen på båda Desktop och Anteckningsbok skapa en symbolisk länk från MAMP till Dropbox med följande kommando:

ln-s ~ / dropbox / utveckling / db / applikationer / MAMP / db

Nu den symboliska länken / Program / MAMP / db pekar på den delade mappen Dropbox ~ / Dropbox / Utveckling / db som innehåller MAMP databaser. Börja inte med MAMP: vi måste först ändra på konfigurationen.

Ändra MAMP-portar

MAMP använder anpassade portar för Apache och MySQL-server instanser: Apache körs på port 8888, MySQL körs på port 8889. Du kan behålla denna konfiguration eller, som vi föreslår, ändra den för att använda standardportar: 80 för Apache och 3306 för MySQL.

För att återställa standardportar, starta MAMP bara på skrivbordet , klicka på "Preferences ...", sedan på "Ports", klicka på "Set to default Apache och MySQL ports" och slutligen klicka på "OK": MAMP sparar den nya konfigurationen och startar om automatiskt.

Nu öppnar du på din skrivbord din favoritwebbläsare och går till http: // localhost / MAMP /: du borde se MAMPs startsida.

Om du inte ser MAMP-startsidan har du förmodligen Web Sharing aktiverat: Öppna Systeminställningar, klicka på Dela och stäng av webbdelning.

Oroa dig inte om Mac OS X kräver ett lösenord när du startar MAMP: vi har setup Apache för att köras på port 80 som är en privilegierad port och detta kräver ett administratörslösenord.

För i denna konfiguration MAMP kan inte köras samtidigt på både skrivbordet och din bärbara dator, avsluta MAMP på skrivbordet, starta det på Notebook och konfigurera det på samma sätt. När du slutar sluta MAMP.

Ändra MAMP - Apache-konfiguration

MAMP Apache-konfigurationen är lagrad i /Applications/MAMP/conf/apache/httpd.conf. Redigera den här filen med din favorit textredigerare och lägg till följande rader (gör det på båda dina Desktop och din Anteckningsbok):

# Inkluderar konfigurationen som delas i Dropbox-mappen Inkludera / Användare/YOURUSERNAME/Dropbox/Development/conf/local-development.conf

Byta ut DITT ANVÄNDARNAMN med ditt användarnamn för Mac OS X (om du inte vet att det är öppet Terminal och kör vem är jag; det kommer att ge dig ditt användarnamn).

I detta uttalande instrueras Apache att ladda en ytterligare konfigurationsfil från din Dropbox-mapp (synkroniserad mellan skrivbord och anteckningsblock). På så sätt kan vi använda det som Konfigurationsfilen för lokal miljö.

Installera Apache Virtual Host på MAMP

Apache Virtual Host är en trevlig funktion som låter dig köra mer än en webbplats (till exempel www.site1.com och www.site2.com) på en enda server. Virtuella värdar kan vara "IP-baserade", vilket innebär att du har en annan IP-adress för varje webbplats, eller "namnbaserad", vilket innebär att du har flera namn som körs på en IP-adress. Den sista är den funktion som vi ska använda (se här för detaljer).

Med din favorit textredigerare öppnar du filen Lokal miljökonfiguration /Users/YOURUSERNAME/Dropbox/Development/conf/local-development.conf och sätt in följande rader:

 TillåtOverride All  # # Namngivna Virtual Host # LogFormat "% V% h% l% u% t \"% r \ "% s% b" vcommon CustomLog /Users/YOURUSERNAME/Dropbox/Development/logs/access.log vcommon ErrorLog / Users / DUS / Namn / Dropbox / Utveckling / loggar / errors.log AnvändCanonicalName Av VirtualDocumentRoot / Users / YOURUSERNAME / Dropbox / Utveckling / vhosts /% 0

Tråden "% 0"kasta stavningen: när Apache-servern tar emot en begäran om domänen www.site.dev det letar efter en katalog som heter www.site.dev i / Users / ditt / Dropbox / Utveckling / vhosts /, och om den hittas serveras filer från den.

De andra påståendena instruerar Apache var att skriva fel och få tillgång till loggfiler.


Steg 3 Installera WordPress

Nu är vi redo att installera WordPress-utvecklingsplatsen www.site.dev. För att kunna göra detta måste vi skapa en www.site.dev katalog (på ditt skrivbord).

och vi måste redigera (på både skrivbord och anteckningsblock) / etc / hosts fil för att kartlägga värdnamnet www.site.dev till den lokala värdens IP-adress. Med din favorit textredigerare öppnar du filen / etc / hosts och lägg till följande rader till slutet av filen (Mac OS X kräver ditt lösenord för att ändra den här systemfilen):

# lokal utveckling 127.0.0.1 www.site.dev

Vid detta tillfälle kan det vara bra att göra några kontroller: öppna Terminal och kör följande kommando:

ping-c 3 www.site.dev

Du borde ha ett liknande svar på detta:

Nu är det dags att konfigurera WordPress: Hämta WordPress-paketet härifrån och plocka upp det i en tillfällig mapp. Flytta allt innehåll i den tillfälliga mappen inuti /Users/YOURUSERNAME/Dropbox/Development/vhosts/www.site.dev/.

På ditt skrivbord startar MAMP och öppnar din webbläsare på http: // localhost / MAMP /. Klicka på fliken phpMyAdmin och skapa en ny databas som heter site_dev:

Öppna din webbläsare på www.site.dev och slutför WordPress-installationen med dessa värden:

  • Databasnamn: site_dev
  • Användarnamn: root
  • Lösenord: root
  • Databas värd: localhost
  • Tabell prefix: wp_

Stoppa MAMP på skrivbordet, vänta på Dropbox-synkronisering och starta den på Notebook. Öppna din bärbara webbläsare på www.site.dev: WordPress är redan konfigurerad!

I slutet av steg 3 har vi en lokal WordPress-utvecklingsmiljö baserad på MAMP och synkroniserad mellan skrivbord och anteckningsblock via Dropbox, nu är det dags att konfigurera fjärrserveren.


Steg 4 Konfigurera Git på fjärrservern

Git är ett distribuerat versionskontrollsystem, som registrerar ändringar i en fil eller en uppsättning filer över tiden och tillåter att trycka ändringar på en fjärrserver (mer detaljerad beskrivning här). I den här handledningen antar vi att Git redan är installerat på din server. Följaktligen fortsätter vi med konfigurationen.

Först måste du logga in på servern. Vi antar att du har ett konto med SSH-åtkomst och public key-autentisering. På så sätt behöver du inte infoga ett lösenord varje gång du loggar in. Öppna ett terminalfönster och anslut till servern:

ssh ditt anvä[email protected]

Ställ in några Git-standardinställningar om användare och e-post för att undvika att Git frågar efter dem varje gång:

git config - global användare.email "[email protected]" git config - globalt användarnamn "ditt namn"

Setup och initiera ett tomt arkiv:

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

För att tillåta utplaceringen från utveckling till produktionsplats måste du installera a Git krok (Jag använder Vi som min textredigerare för fjärrservern):

cd krokar vi efter mottagning

Lägg sedan in följande rader:

#! / bin / bash # docroot = "/ home / ditt namn / www" medan du läser oldrev newrev ref do branch = "echo $ ref | cut -d / -f3" om ["master" == "$ branch"]; sedan git -work-tree = $ doktor checkout -f $ branch fi gjort

Ställ in variabeln docroot till Web Server DocumentRoot och sedan göra post-motta exekverbar:

chmod 755 efter mottagning

Denna Hook påkallas i slutet av processen för att trycka ändringar från en klient (skrivbord eller anteckningsbok) till fjärrservern. Det gör utplaceringen till produktionen Web Server DocumentRoot katalog (se här för detaljer om Git Hooks).

Git-kommandon använder vissa miljövariabler; vi måste konfigurera två av dem: GIT_DIR och GIT_WORK_TREE. Den första anger vägen till förvaret, den andra vägen till arbetsträdet (DocumentRoot). Standardskalet på min fjärrserver är Bash så jag lägger till dem i filen .bash_profile.

cd ~ vi .bash_profile

Lägg till följande rader i slutet av filen:

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

Steg 5 Installera MySQL på fjärrserver

På fjärrservern måste du fortfarande skapa en databas på MySQL: för att göra detta kan du följa detaljerade installationsanvisningar på WordPress Codex. Min fjärrserver har cPanel som värd för kontrollpanelen så jag följer dessa instruktioner.


Steg 6 Installationsgit på lokal miljö

Installera Git på Mac OS X (mer detaljerade instruktioner om Pro Git-boken): ladda ner installationsprogrammet från Google Kod-sidan, dubbelklicka på dmg-filen och pkg-filen och följ anvisningarna. Gör det på både skrivbord och anteckningsblock.

Nu är du redo att initiera ett Git-arkiv på lokal miljö. För att göra detta öppna Terminal (på skrivbordet eller på din bärbara dator) och använd följande kommandon:

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

Du borde se något så här:

För att kontrollera statusen för Git-förvaret använder du det här kommandot:

git status

utgången ska vara så här:

Git säger att alla dessa filer och kataloger inte spåras i förvaret och föreslår att de används git lägg till kommando att spåra dem.

Innan du gör det behöver du göra några ändringar i Git-konfigurationen. Vi måste berätta för Git vilka filer den ska spåra och vilka det inte borde. För att göra detta använder du .gitignore fil.

Gigignore-filen

Den här filen anger de ospårade filerna som Git ska ignorera (se här för mer information). Kommandot är enkelt, låt oss göra ett exempel för att förstå hur det fungerar:

# ignorera Mac OS X Desktop Service Store .DS_Store # ignorera min-test-dir-katalogen och alla underkataloger my-test-dir / #ignore alla .txt-filer * .txt

Så skapa filen ~ / Dropbox / Utveckling / vhost / www.site.dev / .gitignore och lägg till följande rader:

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

För tillfället är detta allt du behöver göra. Senare lägger vi till andra filer och kataloger.


Steg 7 Ändra WordPress-konfiguration för att hantera lokala och fjärranslutna DB-anslutningar

WordPress på en lokal miljö använder DB från MAMP och dess konfigurationsfil wp-config.php återspeglar denna konfiguration (standard MAMP MySQL användarnamn och lösenord):

// ** MySQL-inställningar - Du kan få denna information från din webbhotell ** // / ** Databasens namn för WordPress * / define ('DB_NAME', 'site_dev'); / ** MySQL databas användarnamn * / define ('DB_USER', 'root'); / ** MySQL-databas lösenord * / define ('DB_PASSWORD', 'root'); / ** MySQL värdnamn * / define ('DB_HOST', 'localhost');

Det här fungerar på en lokal miljö men vad händer om vi distribuerar det till fjärrserveren? Självklart kommer det inte att ansluta till DB eftersom DB_NAME, DB_USER, DB_PASSWORD och förmodligen DB_HOST är fel.

Lösningen kommer från Mark Jaquiths artikel: modifiera wp-config.php filen så att konfigurationen för lokal miljö laddas från en annan fil och den filen spåras inte av git. För att göra detta öppna upp wp-config.php fil och ersätt ovanstående rader med dessa rader:

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

Byta ut YOURDBNAME, YOURDBUSER, YOURDBPASSWORD och YOURDBHOSTNAME med de värden som du definierade i steg 5.

Skapa ~ / Dropbox / Utveckling / vhost / www.site.dev / local-config.php fil och sätt Lokal miljö definieras där:

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

Nu måste vi lägga till lokal-config.php till .gitignore så att Git inte spårar det:

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

OK, nu är vi redo att göra det första engagemanget.


Steg 8 Begär förändringar i lokal miljö och tryck dem på fjärrserver

För att begå ändringar i Git-förvaret på lokal miljö anger du följande kommandon:

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

Det första Git-kommandot spårar alla filer och kataloger i ~ / Dropbox / Utveckling / vhost / www.site.dev / förutom att i .gitignore, den andra förbinder dem alla i Git-förvaret.

Det är dags att trycka på WordPress på Remote Server, men först måste vi konfigurera det fjärrstyrda Git-arkivet:

git remote lägg till webbplats ssh: //[email protected]/home/yourusername/site.git

Detta kommando berättar Git att det finns ett fjärrförråd som heter hemsida, värd på servern www.site.com tillgänglig via en SSH-anslutning.

Slutligen installerar den första på fjärrserveren:

git push webbplats mästare

Kommandot ska se ut som följande:

Nu kan du peka din webbläsare till www.site.com och se WordPress-webbplats på Remote Server.


Några exempel på typiska arbetsflöden

Tema / Plugin Development

Som exempel på temat / plugin-utveckling kan vi skapa ett tjugo elva barntema i lokalmiljön och distribuera den till fjärrservern.

För en detaljerad instruktion om hur man skapar ett barntema kan du läsa den här artikeln på Wptuts +. I grund och botten måste vi skapa en katalog som innehåller två filer: style.css och functions.php (den senare är valfri).

Så på skrivbordet (eller på Notebook) skapar du katalogen ~ / Dropbox / Utveckling / vhost / www.site.dev / wp-content / themes / my-twentyeleven-barn, Skapa sedan en fil som heter style.css i den här mappen och lägg till följande rader:

/ * Tema Namn: Min Tjugo Eleven Barn Tema URI: http: //www.site.com/ Beskrivning: Barn tema för tjugo elva temat Författare: Ditt namn Författare URI: http: // din webbplats / Mall: tjugojuven Version: 0.1 * / @import url ("... /twentyeleven/style.css");

Du kan också lägga till några CSS-ändringar under @importera linje, till exempel kan du ändra kroppsbakgrund:

kropp bakgrund: # D51717;

Skapa sedan functions.php fil och lägg till följande rader:

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

Den här enkla funktionsfilen gör en sak: den lägger till en favikonlänk till huvudelementet i HTML-sidor.

Nu är vårt barntema komplett och vi måste spåra det i Git-förvaret:

cd ~ / Dropbox / Utveckling / vhost / www.site.dev / git lägg till wp-innehåll / tema / mitt tjugoårigt barn /

Då måste vi begå ändringarna:

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

På det här sättet kan du fortsätta utvecklingen av barntemat lägger till filer, byta kod och begå alla dessa ändringar till förvaret. När ditt tema är klart för produktionsservern måste du helt enkelt utfärda git push kommando:

git push webbplats mästare

På så sätt trycks barntemat på fjärrservern, redo att användas.

Om du utvecklar ett plugin gör du samma steg: spåra plugin-katalogen och göra ändringar i förvaret. När din plugin är klar tryck på Remote Server.

WordPress Management

På ett liknande sätt kan vi hantera WordPress plugin installation eller WordPress uppdatering. Låt oss anta att vi vill prova ett nytt plugin, och vi vill vara säkra på att det inte bryter mot vår produktionsplats.

Vi installerar den på Lokal miljö först med hjälp av WordPress Administration Panel (se här för detaljer), då måste vi spåra det och lägga till det i Git repository (gör det på skrivbordet eller på din bärbara dator):

cd ~ / Dropbox / Utveckling / vhost / www.site.dev / git lägg till wp-innehåll / plugins / plugin-to-try / git commit -m "Lägg till plugin för att försöka"

Om plugin fungerar kan du distribuera det på Remote Server med:

git push webbplats mästare

och aktivera det med hjälp av WordPress Administration Panel.

Om plugin inte fungerar kan du avinstallera det med hjälp av WordPress Administration Panel, då kan du ta bort det från spårade filer och begå ändringarna:

git rm wp-content / plugins / plugin-to-try / git commit -m "Ta bort plugin-programmet för att försöka"

Ett litet tips: om du lägger till en plugin katalog till .gitignore filen (före commit) kommer pluginet bara att vara kvar i Lokal miljö men det kommer inte att tryckas på Remote Server. Det här kan vara användbart för plugins som Debug Bar som används i lokal utveckling men som inte behöver överföras till en produktionsplats.

Gör snabba förändringar på produktionsservern och dra dem i lokal miljö

Okej, vi vet, snabba förändringar på produktionsservern är inte en bra vana, det är faktiskt en dålig vana, men ibland är det oundvikligt. Förutsatt att vi ändrade DB_PASSWORD på fjärrserver wp-config.php fil och nu vill vi erkänna den förändringen i vårt lokala miljö wp-config.php. För att göra detta först ansluta till fjärrserver via SSH och använd följande kommando:

git commit -m "ändra DB_PASSWORD på wp-config.php"

Dra sedan ändringar från fjärrförvaret med följande kommando på skrivbordet:

git pull hemsida mästare

Om du läser wp-config.php du får se det nya DB_PASSWORD.


Slutsats

I denna handledning har vi sett ett scenario som består av en lokal miljö och en fjärrserver som är värd för utveckling och produktionsplats för www.site.com, men du kan enkelt upprepa denna inställning för www.mynewcustomer.com, för www.myothernewnewcustomer.com och så vidare.

MAMP, Dropbox och Git utgör ett vinnande team för att hantera WordPress utveckling och distribution, de representerar en flexibel utvecklingsmiljö som gör att du enkelt kan lägga till en ny webbplats, utveckla den överallt du är och distribuera den på ett tillförlitligt sätt till produktionsservern.

Om du arbetar regelbundet med WordPress, kolla in valet av bra WordPress-verktyg på Envato Market. Från säkerhets plugins till iFrame anpassare är det säkert att finnas något där som kan hjälpa dig.

WordPress-verktyg på Envato Market