WordPress utvikling og distribusjon med MAMP, Git og Dropbox

I dag for å være en freelance WordPress-utvikler trenger du ofte å utvikle flere WordPress-nettsteder samtidig for forskjellige kunder. Dette er hvordan.

Dette krever at du vedtar følgende:

  • Et fleksibelt lokalt utviklingsmiljø som gjør at du enkelt kan legge til et nytt nettsted, med et moderne versjonskontrollsystem, og som lar deg utvikle både på din stasjonære datamaskin og på din bærbare.
  • Et pålitelig og sikkert distribusjonssystem til den eksterne serveren.

Med dette oppsettet kan du enkelt:

  • lokalt utvikle og teste det nye plugin eller temaet på en trygg måte og distribuere den til produksjonsserveren;
  • oppdatere WordPress-kjernefiler lokalt eller oppdater allerede installerte plugin / temaer på en sikker måte, kontroller at ingenting bryter nettstedet og distribuere disse endringene til produksjonsserveren;
  • foreta raske endringer på enkelte filer på den eksterne serveren og hente dem deretter på lokalt miljø.

Før vi begynner

I denne opplæringen refererer vi til Mac OS X, men du kan enkelt tilpasse den til alle andre operativsystemer. I tillegg antar vi at den eksterne serveren har Git allerede installert og SSH-tilgang konfigurert med godkjenning av offentlig nøkkel (SSH og Git-installasjonene er ikke omfattet av denne opplæringen).

Scenariet som vi vil se består av a Lokal miljø som tillater utvikling av et WordPress-nettsted med plugins og temaer og a Fjernserver som vil være vert for "produksjon" WordPress nettstedet. I lokalmiljøet bruker vi en Desktop datamaskin og a Notisbok datamaskin. På begge datamaskiner vil vi sette opp MAMP, Dropbox og Git slik at du kan jobbe på skrivebordet når du er på kontoret og på notisboken når du ikke er på kontoret og alle endringer vil bli synkronisert.

Vi bruker Dropbox til å synkronisere filer og DB mellom skrivebord og Notebook, og vi vil bruke Git til å spore endringer lokalt og distribuere dem til Remote Server.

For enkelhet definerer vi www.site.dev som utviklingssted på lokalmiljøet og www.site.com som produksjonssted på den eksterne serveren.


Hva vi vil gjøre

På lokalt miljø:

  • opprett en grunnleggende katalogstruktur på Dropbox;
  • installer og installer MAMP (både på skrivebordet og din notatbok) for å fungere i et Dropbox-miljø;
  • sette opp og kjøre WordPress-utviklingsnettsteder på både skrivebordet og notatboken din;

På den eksterne serveren:

  • konfigurer Git, sett opp fjernregisteret og den nødvendige kroken;
  • oppsett MySQL for WordPress produksjonssted;

På lokalt miljø:

  • konfigurer Git, sett opp det lokale arkivet;
  • endre WordPress-konfigurasjonen for å administrere lokal / ekstern DB-tilkobling;
  • foreta den første forpliktelsen og den første distribuere til ekstern server.

Typiske arbeidsflyteksempler:

  • tema / plugin utvikling;
  • WordPress management;
  • Godkjenne endringer i "Haster-på-fly" på produksjonsserveren og dra dem i lokalsamfunnet;

Hva trenger du

  • På lokalmiljøet:
    • En Dropbox-konto, en installert Dropbox-klient, både på skrivebordet og i notatboken (se Dropbox-nettsiden for installasjonsinstruksjoner);
    • MAMP, du kan få det herfra;
    • Din favoritt tekstredigerer;
    • Git (hvordan installerer Git lokalt er dekket i Pro Git-boken);
  • På den eksterne serveren:
    • PHP og MySQL som per WordPress krav;
    • Git installert (se her);
    • En konto med SSH-tilgang og godkjenning av offentlige nøkler;

Trinn 1 Opprett katalogstruktur på Dropbox

Last ned og installer Dropbox på skrivebordet og din notatbok (se her for instruksjoner). Bruk samme konto på begge datamaskinene.

I Dropbox-mappen på skrivebordet oppretter du følgende katalogstruktur:

  • Dropbox
    • Utvikling
      • conf
      • db
      • logger
      • vhost

Kontroller at den samme katalogstrukturen er propagert på Notebook.


Trinn 2 Installer og konfigurer MAMP

MAMP er et akronym som står for: Mac, Apache, MySQL og PHP, det er et program som installerer et lokalt servermiljø på din Mac.

Installasjonen er veldig enkelt: last ned MAMP herfra, pakke ut arkivet og dobbeltklikk på det, følg deretter instruksjonene. Gjør dette på både skrivebord og notatbok. Ikke start MAMP ennå: før du gjør dette må du flytte databasen og endre standardkonfigurasjonen.

Flytt databasemappen

Desktop flytte database mappe fra MAMP standard sted til db katalog på Dropbox, for å gjøre dette åpne en Terminal og bruk følgende kommandoer:

CD / Programmer / MAMP / db mv * ~ / Dropbox / Utvikling / db /

Notisbok åpne en terminal og slett database mappen ved hjelp av følgende kommando:

cd / programmer / MAMP rm -rf. / db

Til slutt på begge Desktop og Notisbok opprett en symbolsk lenke fra MAMP til Dropbox med følgende kommando:

ln-s ~ / Dropbox / Utvikling / db / Programmer / MAMP / db

Nå den symbolske lenken / Programmer / MAMP / db peker på Dropbox-delt mappe ~ / Dropbox / Utvikling / db som inneholder MAMP-databasene. Ikke start MAMP ennå: vi må først gjøre en endring i konfigurasjonen.

Endre MAMP-portene

MAMP bruker tilpassede porter for Apache og MySQL server forekomster: Apache kjører på port 8888, MySQL kjører på port 8889. Du kan opprettholde denne konfigurasjonen eller, som vi foreslår, endre den for å bruke standard porter: 80 for Apache og 3306 for MySQL.

For å gjenopprette standardporter, start MAMP bare på skrivebordet , klikk på "Preferences ...", deretter på "Ports", klikk "Set to default Apache and MySQL ports" og til slutt klikk på "OK": MAMP lagrer den nye konfigurasjonen og starter automatisk på nytt..

Nå på skrivebordet åpne din favoritt nettleser og gå til http: // localhost / MAMP /: du bør se MAMP startsiden.

Hvis du ikke ser MAMP-startsiden, har du sikkert Web Deling aktivert: Åpne Systemvalg, klikk på Deling og slå av webdeling.

Ikke bekymre deg hvis Mac OS X krever et passord når du starter MAMP: Vi har oppsett Apache for å kjøre på port 80 som er en privilegert port, og dette krever et administratorpassord.

Fordi i denne konfigurasjonen MAMP kan ikke kjøre samtidig på både skrivebordet og notisboken, avslutte MAMP på skrivebordet, start den på Notebook og konfigurer den på samme måte. Når du er ferdig, stopp MAMP.

Endre MAMP - Apache-konfigurasjon

MAMP Apache-konfigurasjonen er lagret i /Applications/MAMP/conf/apache/httpd.conf. Rediger denne filen med din favoritt tekstredigerer og legg til følgende linjer (gjør dette på begge dine Desktop og din Notisbok):

# Inkluderer konfigurasjonen delt på Dropbox-mappen Inkluder /Users/YOURUSERNAME/Dropbox/Development/conf/local-development.conf

Erstatte DITT BRUKERNAVN med ditt Mac OS X brukernavn (hvis du ikke vet at den er åpen Terminal og kjør hvem er jeg; det vil gi deg brukernavnet ditt).

Denne setningen instruerer Apache å laste inn en ekstra konfigurasjonsfil fra Dropbox-mappen din (synkronisert mellom skrivebord og notisbok). På denne måten kan vi bruke det som Lokal miljøkonfigurasjonsfilen.

Oppsett Apache Virtual Host på MAMP

Apache Virtual Host er en fin funksjon som lar deg kjøre mer enn ett nettsted (for eksempel www.site1.com og www.site2.com) på en enkelt server. Virtuelle verter kan være "IP-baserte", noe som betyr at du har en annen IP-adresse for hvert nettsted, eller "navnebasert", noe som betyr at du har flere navn som kjører på en IP-adresse. Den siste er funksjonen som vi skal bruke (se her for detaljer).

Med din favoritt tekstredigerer åpner du Lokal miljøkonfigurasjonsfil /Users/YOURUSERNAME/Dropbox/Development/conf/local-development.conf og sett inn følgende linjer:

 Tillat Override All  # # Oppkalt Virtual Host # LogFormat "% V% h% l% u% t \"% r \ "% s% b" vcommon CustomLog /Users/YOURUSERNAME/Dropbox/Development/logs/access.log vcommon ErrorLog / Users / DANSK / Dropbox / Utvikling / logger / errors.log BrukCanonicalName Av VirtualDocumentRoot / Users / YOURUSERNAME / Dropbox / Utvikling / vhosts /% 0

Strengen "% 0"kaster stavningen: når Apache-serveren mottar en forespørsel om domenet www.site.dev det ser etter en katalog som heter www.site.dev i / Users / dittbrukernavn / Dropbox / utvikling / vhosts /, og hvis funnet tjener filer fra den.

De andre setningene instruerer Apache hvor du skal skrive feil og få tilgang til loggfiler.


Trinn 3 Oppsett WordPress

Nå er vi klare til å sette opp WordPress-utviklingsstedet www.site.dev. For å gjøre dette må vi lage en www.site.dev katalog (på skrivebordet).

og vi må redigere (på både skrivebord og notatbok) / etc / hosts fil for å kartlegge vertsnavnet www.site.dev til lokalhost-IP-adressen. Med din favoritt tekstredigerer åpner du filen / etc / hosts og legg til følgende linjer til slutten av filen (Mac OS X krever passordet ditt for å endre denne systemfilen):

# lokal utvikling 127.0.0.1 www.site.dev

På dette stadiet kan det være nyttig å gjøre noe sjekk: Åpne Terminal og kjør følgende kommando:

ping-c 3 www.site.dev

Du bør ha et lignende svar på dette:

Det er nå på tide å sette opp WordPress: Last ned WordPress-pakken herfra og pakke ut i en midlertidig mappe. Flytt alt innholdet i den midlertidige mappen inni /Users/YOURUSERNAME/Dropbox/Development/vhosts/www.site.dev/.

På skrivebordet start MAMP og åpne nettleseren din på http: // localhost / MAMP /. Klikk på phpMyAdmin-fanen og opprett en ny database som heter site_dev:

Åpne nettleseren din på www.site.dev og fullfør WordPress-installasjonen ved hjelp av disse verdiene:

  • Databasens navn: site_dev
  • Brukernavn: root
  • Passord: root
  • Database vert: localhost
  • Tabell prefiks: wp_

Stopp MAMP på skrivebordet, vent på Dropbox-synkronisering og start den på Notebook. Åpne Notebook-nettleseren din på www.site.dev: WordPress er allerede konfigurert!

På slutten av Trinn 3 har vi et lokalt WordPress-utviklingsmiljø basert på MAMP og synkronisert mellom Desktop og Notebook via Dropbox, nå er det på tide å konfigurere den eksterne serveren.


Trinn 4 Konfigurer Git på den eksterne serveren

Git er et distribuert versjonskontrollsystem, som registrerer endringer i en fil eller et sett med filer over tid, og tillater å skifte endringer til en ekstern server (mer detaljert beskrivelse her). I denne opplæringen antar vi at Git allerede er installert på serveren din. Følgelig fortsetter vi med konfigurasjonen.

Først må du logge på serveren. Vi antar at du har en konto med SSH-tilgang og godkjenning av offentlige nøkler. På denne måten trenger du ikke å sette inn et passord hver gang du logger inn. Åpne et terminalvindu og koble til serveren:

ssh [email protected]

Oppsett noen Git-standard om bruker og e-post for å unngå at Git ber om dem hver gang:

git config - global bruker.email "[email protected]" git config --global user.name "Ditt navn"

Oppsett og initialiser et tomt lager:

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

For å tillate distribusjonen fra utvikling til produksjonssted må du sette opp en Git krok (Jeg bruker Vi som tekstredigerer for den eksterne serveren):

CD kroker vi post-mottak

Sett deretter inn følgende linjer:

#! / bin / bash # docroot = "/ home / yourusername / www" mens du leser oldrev newrev ref do branch = "ekko $ ref | cut -d / -f3" hvis ["master" == "$ branch"]; så git --work-tree = $ dokroot checkout -f $ branch fi gjort

Sett variabelen dokumentroten til Web Server DocumentRoot og deretter lage etter motta kjørbar:

chmod 755 etter mottak

Denne Hook er påkalt ved slutten av prosessen med å skyve endringer fra en klient (Desktop eller Notebook) til Remote Server. Det gjør distribusjonen til produksjonen Web Server DocumentRoot katalog (se her for detaljer om Git Hooks).

Git-kommandoer bruker noen miljøvariabler; vi må sette opp to av dem: GIT_DIR og GIT_WORK_TREE. Den første angir banen til depotet, den andre banen til arbeidstreet (DocumentRoot). Standardskallet på min Remote Server er Bash, så jeg legger dem til filen .bash_profile.

cd ~ vi .bash_profile

Legg til følgende linjer til slutten av filen:

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

Trinn 5 Oppsett MySQL på ekstern server

På den eksterne serveren må du fortsatt opprette en database på MySQL: for å gjøre dette kan du følge de detaljerte installasjonsinstruksjonene på WordPress Codex. Min eksterne server har cPanel som vertskap for kontrollpanelet, så jeg følger disse instruksjonene.


Trinn 6 Oppsett Git på lokalmiljøet

Installer Git på Mac OS X (mer detaljerte instruksjoner på Pro Git-boken): Last ned installasjonsprogrammet fra Google Kodesiden, dobbeltklikk dmg-filen og pkg-filen og følg instruksjonene. Gjør dette på både skrivebord og notatbok.

Nå er du klar til å initialisere et Git-lager i lokalmiljøet. For å gjøre dette, åpne Terminal (på skrivebordet eller på notatboken) og bruk følgende kommandoer:

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

Du bør se noe slikt:

For å sjekke statusen til Git-depotet, bruk denne kommandoen:

git status

utgangen bør være slik:

Git forteller deg at alle disse filene og katalogene ikke er sporet i depotet og foreslår at du bruker git add kommando for å spore dem.

Før du gjør dette må du gjøre noen endringer på Git-konfigurasjonen. Vi må fortelle Git hvilke filer den skal spore og som den ikke burde. For å gjøre dette, bruk .gitignore fil.

.Gitignore-filen

Denne filen spesifiserer de sporede filene som Git bør ignorere (se her for flere detaljer). Kommandoen er enkel, la oss lage et eksempel for å forstå hvordan det fungerer:

# ignorere Mac OS X Desktop Service Store .DS_Store # ignorer min-test-dir-katalogen og alle underkataloger my-test-dir / #ignore alle .txt-filer * .txt

Så opprett filen ~ / Dropbox / Utvikling / vhost / www.site.dev / .gitignore og legg til følgende linjer:

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

For øyeblikket er alt dette du trenger å gjøre. Senere legger vi til andre filer og kataloger.


Trinn 7 Endre WordPress-konfigurasjon for å administrere lokale og eksterne DB-tilkoblinger

WordPress på et lokalt miljø bruker DB fra MAMP og dets konfigurasjonsfil wp-config.php gjenspeiler denne konfigurasjonen (standard MAMP MySQL brukernavn og passord):

// ** MySQL-innstillinger - Du kan få denne informasjonen fra webverten din ** // / ** Navnet på databasen for WordPress * / define ('DB_NAME', 'site_dev'); / ** MySQL database brukernavn * / define ('DB_USER', 'root'); / ** MySQL database passord * / define ('DB_PASSWORD', 'root'); / ** MySQL vertsnavn * / define ('DB_HOST', 'localhost');

Dette fungerer på et lokalt miljø, men hva skjer hvis vi distribuerer den til den eksterne serveren? Åpenbart vil det mislykkes å koble til DB fordi DB_NAME, db-bruker, db-passord og sannsynligvis DB_HOST er feil.

Løsningen kommer fra Mark Jaquiths artikkel: modifiser wp-config.php fil slik at konfigurasjonen for lokalt miljø er lastet fra en annen fil, og at filen ikke spores av git. Å gjøre dette åpne opp wp-config.php fil og erstatt ovenstående linjer med disse linjene:

hvis (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'); 

Erstatte YOURDBNAME, YOURDBUSER, YOURDBPASSWORD og YOURDBHOSTNAME med verdiene du definerte i trinn 5.

Opprett ~ / Dropbox / Utvikling / vhost / www.site.dev / lokal-config.php fil og sett Lokalmiljøets definisjoner der inne:

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

Nå må vi legge til lokal-config.php til .gitignore slik at Git ikke vil spore det:

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

OK, nå er vi klare til å gjøre det første forpliktelsen.


Trinn 8 Forbind endringer på lokalt miljø og trykk dem på ekstern server

For å begå endringer i Git-depotet på lokalt miljø, skriv inn disse kommandoene:

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

Den første Git-kommandoen sporer alle filer og kataloger i ~ / Dropbox / Utvikling / vhost / www.site.dev / bortsett fra at i .gitignore, Den andre forplikter dem alle i Git-depotet.

Det er på tide å presse WordPress på Remote Server, men først må vi sette opp det eksterne Git-depotet:

git remote legg til nettside ssh: //[email protected]/home/yourusername/site.git

Denne kommandoen forteller Git at det er et eksternt lager som heter nettsted, vert på serveren www.site.com tilgjengelig via en SSH-tilkobling.

Endelig distribuerer den første på ekstern server:

git push nettsted master

Kommandoens produksjon skal se ut som følgende:

Nå kan du peke nettleseren din til www.site.com og se WordPress-siden på Remote Server.


Noen eksempler på typiske arbeidsflyter

Tema / Plugin Development

Som eksempel på tema / plugin-utvikling kan vi lage et tema i lokalmiljøet et tjuefem barn tema og distribuere det til den eksterne serveren.

For en detaljert instruksjon om hvordan du oppretter et barntema, kan du lese denne artikkelen på Wptuts +. I utgangspunktet må vi lage en katalog som inneholder to filer: style.css og functions.php (sistnevnte er valgfritt).

Så på skrivebordet (eller på notatbok) oppretter du katalogen ~ / Dropbox / Utvikling / vhost / www.site.dev / wp-content / themes / min-twentyeleven-barn, så opprett en fil som heter style.css i denne mappen og legg til følgende linjer:

/ * Tema navn: My Twenty Eleven Child Theme URI: http: //www.site.com/ Beskrivelse: Barn tema for tjuefem tema Forfatter: Ditt navn Forfatter URI: http: //your-site.com/ Mal: twentyeleven Versjon: 0.1 * / @import url ("... /twentyeleven/style.css");

Du kan også legge til noen CSS endringer under @importere linje, for eksempel kan du endre kroppsbakgrunn:

kropp bakgrunn: # D51717;

Deretter lager du functions.php fil og legg til følgende linjer:

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

Denne enkle funksjonsfilen gjør en ting: den legger til en favicon-kobling til hovedenheten av HTML-sider.

Nå er vårt barntema fullført, og vi må spore det i Git-depotet:

cd ~ / Dropbox / Development / vhost / www.site.dev / git legg til wp-innhold / tema / min-tjuefem-barn /

Da må vi forpligte endringene:

git commit -m "Lagt til meg tjue elleve barn tema"

På denne måten kan du fortsette utviklingen av barnetemaet, legge til filer, endre kode og begå alle disse endringene til depotet. Når temaet ditt er klart for produksjonsserveren, må du bare utstede git push kommando:

git push nettsted master

På denne måten vil barnetemaet bli presset på den eksterne serveren, klar til bruk.

Hvis du utvikler et plugin, gjør du de samme trinnene: Spor plugin-katalogen og foreta endringer på lageret. Når pluginet er klart, trykk det på Remote Server.

WordPress Management

På samme måte kan vi administrere WordPress-plugininstallasjon eller WordPress-oppdatering. La oss anta at vi vil prøve et nytt plugin, og vi vil være sikre på at det ikke bryter vårt produksjonssted.

Vi installerer den på Lokalt miljø først ved hjelp av WordPress administrasjonspanelet (se her for detaljer), da må vi spore det og legge det til Git-depotet (gjør dette på skrivebordet eller på notatboken din):

cd ~ / Dropbox / Development / vhost / www.site.dev / git legg til wp-innhold / plugins / plugin to try / git commit -m "Legg til plugin for å prøve"

Hvis plugin fungerer, kan du distribuere det på Remote Server ved hjelp av:

git push nettsted master

og aktiver den ved hjelp av WordPress Administrasjonspanel.

Hvis plugin ikke virker, kan du avinstallere det ved hjelp av WordPress Administrasjonspanel, så kan du fjerne det fra sporede filer og forplikte endringene:

git rm wp-innhold / plugins / plugin-to-try / git commit -m "Fjernet plugin for å prøve"

Et lite tips: Hvis du legger til en plugin katalog til .gitignore fil (før commit) vil pluginet bare forbli i lokalmiljøet, men det vil ikke presses på Remote Server. Dette kan være nyttig for plugins som Debug Bar som brukes i lokal utvikling, men som ikke må overføres til et produksjonssted.

Gjør hurtige endringer på produksjonsserveren og trekk dem i lokalmiljøet

Ok, vi vet, hurtige endringer på produksjonsserveren er ikke en god vane, faktisk er de en dårlig vane, men noen ganger er uunngåelig. Forutsatt at vi endret db-passord på ekstern server wp-config.php fil og nå vil vi gjenkjenne den endringen i vårt lokale miljø wp-config.php. For å gjøre dette, må du først koble til ekstern server via SSH og bruke følgende kommando:

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

Deretter trekker du endringer fra eksternt lager med følgende kommando på skrivebordet:

git pull nettsted master

Hvis du leser wp-config.php du vil se den nye db-passord.


Konklusjon

I denne opplæringen har vi sett et scenario bestående av et lokalt miljø og en ekstern server som vert for utviklingen og produksjonsstedet for www.site.com, men du kan enkelt gjenta dette oppsettet for www.mynewcustomer.com, til www.myothernewnewcustomer.com og så videre.

MAMP, Dropbox og Git danner et vinnende team for å håndtere WordPress-utvikling og distribusjon, de representerer et fleksibelt utviklingsmiljø som gjør det enkelt å legge til et nytt nettsted, utvikle det overalt, og å distribuere det på en pålitelig måte til produksjonsserveren.

Hvis du jobber med WordPress regelmessig, sjekk utvalget av gode WordPress-verktøy på Envato Market. Fra sikkerhetsplugger til iFrame-tilpassere, er det sikkert å være noe der som kan hjelpe deg.

WordPress-verktøy på Envato Market