Professional WordPress Development with Vagrant - Andrea Cardinali - WordCamp Milano 2016

transcript

#wcmil @andreacardinali

THE END OF‘‘IT WORKS ON MY MACHINE’’

Professional WordPress Development con Vagrant

Andrea Cardinali

@andreacardinali

ANDREA CARDINALI

• DEVELOPER & SEO

• WORDPRESS LOVER SINCE v2.8

• I RUN MY OWN WEB AGENCY IN CATTOLICA (RN)

BE SOCIAL

#WCMIL

@andreacardinali

POLL TIME

TABLE OF CONTENTS

• WHAT IS VAGRANT & WHY USE IT

• VAGRANT & WORDPRESS

• QUESTION TIME

ONCE UPON A TIME…

WRITE SOME CODE THAT WORKS ON YOUR MACHINE

PUSH IT ON PRODUCTION

DEVELOPMENT WORKFLOW7

WHAT COULD POSSIBLYGO WRONG?

THIS SITUATION FEELS FAMILIAR. DOESN’T IT?

PROBLEMS START HERE

MURPHY’S LAW NEVER SLEEPS…

MURPHY’S LAW

PROBLEMS START HERE

SITUATION ISGETTING WORSE

IT WORKS?

• Different (minor) php version (5.2 vs 5.3 | 5.3 vs 5.4)

• Case sensitive file naming (Windows vs Linux)

• Short notation disabled in production <?

• Wrong permission on folders

• […]

MURPHY’S LAW AT WORK

IT WORKS?

BUG HUNTING

MURPHY’S LAW

PROBLEMS START HERE

IT WORKS?

…UNTIL YOU GET LUCKY

MURPHY’S LAW

YOU’RE TEMPORARY AWESOME

(‘TILL NEXT DEPLOY)

PROBLEMS START HERE

WHAT IS VAGRANT

IT WORKS?

THIS IS NOT VAGRANT

MURPHY’S LAW

YOU’RE TEMPORARY AWESOME

(‘TILL NEXT DEPLOY)

PROBLEMS START HERE

WRITE SOME CODE

IT WORKS?

YOU’RE AWESOME

THIS IS VAGRANT

YOU KNOW IT WORKS!

VAGRANT

http://www.vagrantup.com/

WHAT IS VAGRANT

• Open source software written in Ruby created to build development environments

• Is actively mantained both from Hashicorpand the community

• It fully automates the creation and the provision of vms

• It’s a kinda of virtual machine manager with super powers

WHY SHOULD I USEVAGRANT?

PROMOTE TEAM COLLABORATION

• Everyone in your time works with the sameenvironment

• You work with your favourite OS,IDE, browser etc

• Your environment is inside a Vagrantfile(Infrastructure as Code)

• Your Vagrantfile is inside your project’srepository

BETTER DEVELOPMENT

• You don’t have to setup your machine everytime you start a new project. Just vagrant up

• You don’t have to be a ninja to run vagrant.Just vagrant up

• You can stay focused on code

DEVELOPMENT & PRODUCTION PARITY

• Your development virtual machine and your production are as similar as possible.

• This gives the confidence to know that if your WordPress site works in development, it will also work in production and you can deploy with confidence.

• The end of ‘it works on my machine’

VAGRANT OVERVIEW

VAGRANT REQUIREMENTS

• Compatible OS (~ all)

• Hardware that support virtualization

• Virtual Box 5.x

• Shell to run (few) commands*

*Windows Users can use command prompts, Git Bash or Putty

VAGRANT INSTALL INSTRUCTION

1. Make sure you enabled Virtualization in your BIOS

2. Download Oracle VirtualBox

3. Install VirtualBox

4. Download Vagrant

5. Install Vagrant

6. Reboot (Windows only)~ 40 minutes to download & install all the software needed

VAGRANT FUNDAMENTALS

• VAGRANT BOX

• .VAGRANTFILE

• VAGRANT COMMANDS

VAGRANT BOX

• A box is a (.box) file that contains an operating system plus the software installedin it.

• Plenty of boxes are already available

• You can create your own boxes

• You can have multiple boxes

• You can have different boxes for differentCMS (ie. Homestead for Laravel or Joomlatools for Joomla)

.VAGRANTFILE

• Text file that contains all the information needed to create the environment(hardware, networking, box and provisioningscript)

• It weights fews KB (no excuses to put in under version control)

• Multiple VMs can be defined in a single file

• You can adjust your VM performance by editing this file

PROVISIONING FILE

• Script used to do specific operations likesoftware install after initial provision

• It’s optional

• It could be a bash script or a Puppet / Chef/ Ansible recipe

VAGRANT COMMANDS

• Vagrant upInitialize and boot the VM. 1st time it could take some time• Vagrant haltShutdown the VM. All the data are preserved• Vagrant destroy

destroy (clear) all the data inside the VM (exceptthe data inside the shared folders)

• Vagrant sshconnect throught ssh to the guest OS

• Vagrant pushto upload files on the production server

VAGRANT USAGE EXAMPLE

1. git clone <path/to/your/repo>

2. vagrant up

3. There is no #3

SOME USEFUL THINGS TO KNOW ABOUT VAGRANT

• It shares trasparently folders between guest OS

• It performs better on Vmware

• VM slows down on disk intensive tasks

• VM works better on SSD

• Optimal setup with half CPUs and a quarterof Ram

VAGRANT &

WORDPRESS

WORDPRESSVAGRANT PROJECTS• VVV (Varying Vagrant Vagrants)

[https://github.com/Varying-Vagrant-Vagrants/VVV]

• Trellis by roots.io

[https://github.com/roots/trellis]

• VCCW (Vagrant + Chef +CentOS + WordPress)

[https://github.com/vccw-team/vccw]

• Mercury Vagrant HGV (WP Engine)

[https://github.com/wpengine/hgv]

• VIP Quickstart (wordpress.com)

[https://github.com/Automattic/vip-quickstart]

WHICH ONESHOULD I USE?

IT DEPENDS…

CHOOSE THE ONE ITWORKS FOR YOU(AND YOUR TEAM)

WORDPRESS&

VARYINGVAGRANTVAGRANTS

VVV OVERVIEW

• LEMP stack (Ubuntu Nginx MySql 5.5 Php 7) + stuff

(phpMyAdmin, WP-CLI, Memcached, NodeJs, Grunt, Mailcatcher,

Git, Svn and a lot more)

• 3 WordPress Versions (stable,trunk, trunk + Grunt)

• Useful for contributing to WordPress Core

[https://make.wordpress.org/core/]

• It automatically backup databases on vagrant halt

• It automatically edit/restore hosts file

VVV – GETTING STARTED

• https://github.com/Varying-Vagrant-Vagrants/VVV#installation

• 1st time setup takes ~1 hour and half

VVV (DEFAULT) DASHBOARD

• Digit vvv.dev in your browser

VVV-DASHBOARD

https://github.com/topdown/VVV-Dashboard

VVV-DASHBOARD

VARIABLE VVV

• Command line tool

• VVV site creation wizard

• Create as many site as you want

• Choose site url, WP version, db prefix, preconfigured plugins …

https://github.com/bradp/vv

VARIABLE VVV - COMMANDS

• vv create

• vv list

• vv remove

VV LIST

VV CREATE - 1

VV CREATE - 2

VV BLUEPRINTS

VARYING VV - BLUEPRINTS

• A JSON file containing a setup for your WP installation

• Under the hood it’s used to pilot WP-CLI

• Plugins, themes, widgets, settings are installedautomatically

• Plugins,mu-plugins and themes can use:• Github username/repo• Full git url• Url to zip file• WordPress.org slug

• It works also for multisite and multi-network

VARYING VV – BLUEPRINTS EXAMPLE

{"sample": { "themes": [ { "location": "automattic/_s", "activate": true } ],"plugins": [ { "location": "https://github.com/clef/wordpress/archive/master.zip","version": null, "force": false, "activate": true, "activate_network": false },{

"location": "cmb2", "version": "2.0.5","force": false, "activate": true,"activate_network": false } ],"options": [ "current_theme::_s" ],"widgets": [ { "name": "meta", "location": "sidebar-1", "position": 1, "options": { "title": "Site login or logout" }

}, } ],

QUICK RECAP

• Don’t be afraid of Vagrant complexity, isreally simple to use.

• Choose a Vagrant project that fits your needs(or create a new one)

• Use Vagrant to definitely stop ‘it works on mymachine’ bugs and to become a betterdeveloper.

WORDPRESS MEETUP ROMAGNA

QUANDO:

ogni 1° giovedi del mese ( prossimo 3 Novembre)

Dinamo Coworking Space Cesena

PERCHÉ:

Per parlare di WordPress, conoscere bella gente e condividere le proprie esperienze

wpromagna.com@romagnawp

QUESTIONS?

THANKS!

• Twitter:@andreacardinali

• Slideshare: http://www.slideshare.net/andreacardinali

• Website: http://www.andreacardinali.it/

Professional WordPress Development with Vagrant - Andrea Cardinali - WordCamp Milano 2016

Software