Hoe WordPress lokaal te installeren met Vagrant

Lokaal ontwikkelen is een van de beste dingen die je kan overkomen. U kunt niet alleen de upload- / downloadtijden achterwege laten, u kunt zoveel projecten maken als u wilt, lokaal met echte domeinen werken en over het algemeen sneller alles doen wat u doet .

Vagrant is een geweldig stuk software dat reproduceerbare en draagbare virtuele machines maakt die je kunt gebruiken als lokale webserver-omgevingen. In dit artikel laat ik je zien waarom Vagrant zo geweldig is en hoe je snel kunt werken met geweldige WordPress-testomgevingen.

Mogelijk bent u ook geïnteresseerd in de volgende berichten:

• Installeren van WordPress via commandolijnen
• WordPress lokaal installeren met ServerPress
• Stel WordPress in met OpenShift
• 10 Meest voorkomende WordPress-fouten

Wat is Vagrant?

In de woorden van Vagrant kan het worden gebruikt om " lichtgewicht, reproduceerbare en draagbare ontwikkelomgevingen te creëren en te configureren ". Laten we eens kijken wat elk van deze termen betekent, met betrekking tot uw lokale omgeving.

configureerbaar:

Uw virtuele machine is eenvoudig te maken, eenvoudig te configureren en nog belangrijker: hij kan uitgebreid worden geconfigureerd. Standaard setups zijn prima voor de meeste projecten en casual tests, dus je hoeft er niet mee te spelen, maar als je de kracht nodig hebt, is het er.

Je kunt dingen instellen zoals je zou doen in een echte serveromgeving; van het configureren van het IP tot het automatisch installeren van git en andere software, het is allemaal mogelijk en aan jou.

lichtgewicht:

Ik voer meerdere virtuele machines op mijn computer, elk heeft twee configuratiebestanden met een gecombineerde grootte van niet meer dan 4KB - dat klopt, 2 bestanden, 4KB in totaal. Om eerlijk te zijn, mijn setups zijn allemaal vrij eenvoudig, maar zelfs als je iets uitgebreider hebt, zou het hoogstens 10-100KB bedragen.

Portable:

Draagbaarheid komt met het feit dat de bestanden een strakke taille hebben. Eén bestand is een speciaal Vagrantbestand, het andere is een bash-bestand; elk bevat eenvoudige tekst, niets speciaals. Dientengevolge kunt u ze heen en weer e-mailen, opslaan op Evernote, Google Drive of Dropbox.

reproduceerbaar:

Dit is een van de beste eigenschappen van Vagrant. Vanwege de grootte en draagbaarheid van de vereiste bestanden kunnen specifieke serverconfiguraties eenvoudig worden gerepliceerd. Stel dat u een toepassing maakt waarvoor een sterk getunede server nodig is. Maak het Vagrantfile en het bas-installatiebestand voor installatie en start het op.

Je kunt de configuratie nu naar je teamleden e-mailen en ze zullen binnen enkele minuten exact dezelfde server draaien .

Installatie

Over het algemeen zijn er drie onderdelen om aan de slag te gaan met een ontwikkelomgeving met behulp van Vagrant.

• Installeer Vagrant & Virtualbox
• Maak een serverconfiguratie
• Creëer uw webomgeving (bijv .: installeer WordPress)

Vagrant installeren

Vagrant kan worden geïnstalleerd door de downloadpagina te bezoeken, uw besturingssysteem te selecteren en het gedownloade pakket uit te voeren. Omdat Vagrant afhankelijk is van virtualisatie, hebt u virtualisatiesoftware nodig. Vagrant heeft ingebouwde ondersteuning voor VirtualBox maar kan met anderen worden gemaakt, maar in het belang van dit voorbeeld gaan we met VirtualBox. Pak het hier.

Een serverconfiguratie maken

U kunt kant-en-klare scripts gebruiken om alles voor u te doen. Jeffrey Way heeft een geweldige tutorial samengesteld over het graven van MAMP en het volgen van Vagrant. Neem een ​​kijkje en zorg ervoor dat je de code bovenaan noteert:

 curl -L -o 'install.sh' http://bit.ly/1hBfq57 && curl -L -o 'Vagrantfile' http://bit.ly/1mE3Qt9 && vagrant up 

Als u een map maakt, er naartoe navigeert met uw terminal of opdrachtprompt en de bovenstaande code plakt, hebt u met één snelle beweging een lokale omgeving gemaakt. Laten we dit echter ontleden en kijken wat er aan de hand is.

Het bestaat uit 3 delen:

 curl -L -o 'install.sh' http://bit.ly/1hBfq57 

Met deze opdracht wordt een vooraf gemaakt installatiebestand gedownload : het bestand install.sh dat verantwoordelijk is voor het installeren en configureren van software zodra de virtuele machine wordt uitgevoerd. PHP, Apache, MySQL en andere soortgelijke zaken worden hier behandeld.

 curl -L -o 'Vagrantfile' http://bit.ly/1mE3Qt9 

Hiermee wordt de Vagrantfile gedownload die informatie bevat over de serverconfiguratie en andere basisinstallatie-instructies. Dit bepaalt het besturingssysteem dat de server gebruikt, het IP-adres waarnaar het netwerk is toegewezen; het kan worden gebruikt om bestandsrechten en -eigenschappen en meer te beheren.

 zwervend op 

Met deze opdracht wordt de server opgestart .

Wanneer u dit voor de eerste keer doet, duurt het ongeveer 5-20 minuten. De zogenaamde "box" moet worden gedownload (deze bevat bijvoorbeeld het besturingssysteem), die ongeveer 700+ MB kan zijn. De server is dan ingericht (geïnstalleerd en geconfigureerd) en is in gebruik.

Als u uw computer opnieuw opstart of de virtuele machine (VM) afsluit, moet u de opdracht opnieuw uitvoeren. Deze keer kost het maar een paar seconden om het te laten werken.

In een notendop is dit hetzelfde als het installeren van uw besturingssysteem en omgeving op een computer. Het Vagrantfile neemt de verantwoordelijkheden op zich van de Windows / Linux / Mac-installatieschijf ; het heeft alles wat nodig is om het basissysteem te laten werken. Het install.sh-bestand automatiseert de initiële softwarebehoeften. Voor uw computer zou dit hetzelfde zijn als het installeren van de nieuwste videodriver, Photoshop, uw favoriete teksteditor, browsers enzovoort.

Het commando vagrant up is vergelijkbaar met het inschakelen van je computer . Wanneer je dit voor de eerste keer doet, kost het nogal wat tijd omdat je het besturingssysteem en de software moet installeren. Daarna duurt het 10-20 seconden om alles op poten te zetten.

Installeren van WordPress

Als je de instructies hier hebt opgevolgd, zou je nu een server in gebruik moeten hebben, maar wat kun je ermee doen, hoe kun je het gebruiken?

Hier zijn een paar dingen om te weten:

• U kunt de lokale omgeving bereiken via http://192.168.33.21
• De html map in de installatiemap is uw hoofdmap
• Toegang tot uw MySQL-database is als volgt: Gebruikersnaam : root, Wachtwoord : root en Host : localhost.

Het eerste wat we moeten doen is SSH gebruiken om toegang te krijgen tot onze server, zodat we onze database kunnen instellen en klaar krijgen voor WordPress.

Gebruik de terminal om naar de map te gaan waarin u uw virtuele machine hebt geïnstalleerd en typ vagrant ssh .

Als je eenmaal in bent, kun je mysql -uroot -p om toegang te krijgen tot MySQL, type root wanneer om het wachtwoord wordt gevraagd.

Alles wat we nodig hebben is een eenvoudige lege database voor WordPress die we zullen maken met de volgende opdracht: CREATE DATABASE wordpress

Ga vervolgens naar de downloadpagina van WordPress en pak de nieuwste versie. Pak het uit in de html map (de hoofdmap) en zorg ervoor dat alle bestanden uit de gemaakte wordpress submap een niveau hoger worden verplaatst.

Uiteindelijk zie je de twee WordPress-mappen (wp-admin, wp-includes) en de standaard WordPress-bestanden in je html map.

Omweg: probleemoplossing

Als u deze instructies volgt, zult u merken dat u mogelijk geen bestanden kunt uploaden via de WordPress-interface . Dit heeft te maken met gebruikers- en groepsaangelegenheden die gemakkelijk kunnen worden opgelost.

SSH in de server en typ de volgende sudo vi /etc/apache2/apache.conf . Hiermee wordt een VI-editor geopend die u kunt gebruiken om dit bestand te bewerken.

Type /User . Dit doorzoekt het document op occurrences van "Gebruiker". U zou de sectie moeten zien waar u de gebruiker en de groep kunt definiëren.

Druk op "i" om naar de bewerkmodus te gaan. Gebruik de pijltjestoetsen om met de cursor te navigeren en bewerk de gebruiker en de groep als "dwaalgast", zoals dit:

 Gebruiker vagrant Group vagrant 

Als je klaar bent, druk je op escape en typ je het volgende commando :wq . Hiermee wordt het bestand opgeslagen en wordt de vi-editor afgesloten.

Je moet nu vagrant halt typen om de virtuele machine te stoppen, gevolgd door vagrant up hem opnieuw vagrant up te starten.

Dat is het, bestandsbewerkingen zullen nu in WordPress werken.

Op dit punt kun je http://192.168.33.21 bezoeken en WordPress installeren zoals gewoonlijk. Zorg ervoor dat u de databasetoegangsreferenties hierboven en de databasenaam die u hebt gemaakt, gebruikt. U kunt plug-ins, thema's installeren, uw eigen code maken en nog iets doen wat u normaal zou doen op een echte server.

De hostnaam wijzigen

http://192.168.33.21 is niet bepaald de meest vriendelijke manier om een ​​project te openen. Gelukkig is het gemakkelijk om dit te veranderen in iets dat gemakkelijker te onthouden is, zoals http: //wordpress.local.

SSH in de server en ga naar de map met siteconfiguraties door cd /etc/apache2/sites-available typen.

Typ ls om de inhoud van de map weer te geven. Je zou een bestand met de naam 000-default.conf moeten zien. Laten we dit bestand bewerken om te zien wat het bevat door sudo vi 000-default.conf typen.

Druk op "i" om de invoegmodus te openen en navigeer naar regel 8, die #ServerName www.example.com zou moeten zeggen. Met behulp van de ServerName-instructie kunt u een benoemde route naar de website maken.

Maak een commentaar op de regel door de hash aan het begin te verwijderen en de servernaam in te stellen naar wat je maar wilt. Het is gebruikelijk om iets te gebruiken als wordpress.dev, wordpress.local, of misschien zelfs alleen maar wordpress - het is aan jou. Je kunt zelfs facebook.com gebruiken!

Sla het bestand op door op escape te drukken en typ de opdracht :wq en start de server opnieuw op door sudo service apache2 restart typen.

Eindelijk, buiten je virtuele machine (zorg ervoor dat je geen SSH-d in hebt), bewerk je je hosts-bestand met de opdracht sudo vi . In Windows is dit te vinden op C:\windows\system32\drivers\etc\hosts, op linux gebaseerde systemen is het te vinden op /etc/hosts

Voeg de volgende regel overal toe aan het bestand:

 192.168.33.21 wordpress.local 

Zorg ervoor dat u de hostnaam gebruikt die u in het configuratiebestand hebt gedefinieerd en sla het hosts-bestand op. Dit bestand vertelt in feite aan onze computer waar een servernaam moet worden geladen en hoe dit moet worden opgelost . Uw computer kijkt standaard naar internet. Als u op facebook.com typt, wordt deze van internet geladen.

Als u Facebook.com echter aan het IP-adres van de virtuele machine hebt gekoppeld en dit hebt gedefinieerd als de servernaam, wordt het lokaal geladen .

U zou nu Wordpress.local moeten kunnen typen en hetzelfde resultaat moeten zien als toen u 192.168.33.21 invoerde.

Als u dit doet nadat u WordPress hebt geïnstalleerd, ziet u dingen als stijlen en scripts mogelijk niet meer. De reden is dat WordPress de locatie van het installatiedoel opslaat in de database en dat deze wordt ingesteld op het IP-adres.

Om er zeker van te zijn dat dit niet gebeurt, moet je eerst je named server aanmaken en WordPress installeren door naar wordpress.local te gaan (of welke andere naam je ook kiest) in plaats van het IP te gebruiken.

Virtuele servers gebruiken

We doen het nu goed, maar in de huidige versie moeten we voor elk project een virtuele machine draaien die een verspilling is. Door virtuele servers te gebruiken, kunt u zoveel onafhankelijke websites uitvoeren als u wilt vanaf dezelfde virtuele machine .

De sleutel hiervoor ligt in het siteconfiguratiebestand, hetzelfde bestand dat we hebben gebruikt om de servernaam te wijzigen. Laten we nu twee virtuele hosts maken.

Ga eerst naar de map waarin u de virtuele machine hebt gemaakt en maak twee submappen: blog en winkel. Je originele html-map zou er ook nog moeten zijn.

Vervolgens gaat SSH naar de server en navigeert u naar de map /etc/apache2/sites-available .

Maak twee nieuwe bestanden door het standaardconfiguratiebestand te kopiëren:

 cp 000-default.conf blog.conf; cp 000-default.conf store.conf 

Bewerk het bestand shop.conf met de methode die we eerder hebben besproken. Zorg ervoor dat ServerName is ingesteld op shop.dev en stel de DocumentRoot-instructie in op /var/www/shop - dit is de map die we zojuist hebben gemaakt.

Doe hetzelfde met het blog.conf bestand, met behulp van de juiste waarden.

Gebruik de sudo a2ensite blog en sudo a2ensite shop om deze sites in te schakelen en gebruik de opdracht sudo service apache2 restart om de server sudo service apache2 restart te starten en de SSH-verbinding te sluiten met de opdracht exit .

Bewerk nu het hosts-bestand om er zeker van te zijn dat onze computer weet hoe de virtuele hosts moeten worden opgelost:

 192.168.33.21 blog.dev 192.168.33.21 shop.dev 

Nu heb je nog twee andere sites om mee te werken: één kan worden bereikt door blog.dev in de URL-balk te typen en de hoofdmap van deze site zal de blogdirectory zijn. De andere is de shop.dev-site die de winkeldirectory als root gebruikt.

Dit is een stuk eenvoudiger dan het maken van meerdere virtuele machines en vereist minder hulpbronnengebruik van uw computer.

Conclusie

We hebben veel meegemaakt in dit artikel: we hebben Vagrant geïnstalleerd, geleerd hoe je een lokale omgeving kunt creëren en WordPress geïnstalleerd. We hebben ook enkele trucs geleerd, zoals het gebruik van servernamen en virtuele hosts.

Dit zou je op weg moeten helpen naar de lokale ontwikkeling. Vergeet niet dat je je omgeving eenvoudig overal kunt aanpassen, je hebt alleen het bestand Vagrantfile en install.sh nodig.

Meer doen!

We hebben nog maar net de oppervlakte van wat Vagrant kan doen gekrast. Je kunt aangepaste vakken vinden om mee te werken bij Vagrantcloud of je kunt zelfs kaders opzoeken die je werkelijke online-hostomgeving nabootsen.

Veel taken kunnen worden geautomatiseerd en / of aangepast en u kunt automatiseringstools zoals WP-CLI gebruiken om WordPress en gerelateerde plug-ins / thema's te installeren met behulp van een paar commando's.

Kijk tenslotte eens naar enkele WordPress-specifieke Vagrant-omgevingen zoals VCCW, Vagrantpress en de 13 Vagrant Resources van WPTavern.

Twee nieuwe manieren om websites te downloaden voor offline weergave in Chrome voor Android

In december 2016 rolde Google de mogelijkheid om webpagina's voor offline weergave voor Chrome voor Android te downloaden via de Chrome 55-update . Nu breidt Google deze functie uit omdat Chrome voor Android-gebruikers twee nieuwe manieren wordt geboden om webpagina's op te slaan voor later gebruik

(Technische en ontwerptips)

Maak lange schaduwen met Long Shadow Generator [Photoshop Plugin]

Lang schaduwontwerp is nog steeds populair bij ontwerpers. Eerder hebben we laten zien hoe u uw eigen lange schaduwontwerp in Photoshop met verschillende lagen kunt maken. Het is natuurlijk handig, maar als je een enthousiaste Photoshop bent die op zoek is naar een eenvoudigere manier om het lange schaduwontwerp te krijgen dat je wilt, hebben we een gratis Photoshop-extensie gevonden die je zou kunnen gebruiken

(Technische en ontwerptips)