Ti è mai capitato di sviluppare un sito in locale per poi ritrovarti con un sito non funzionante in produzione? I tuoi colleghi utilizzano un’altra versione di php/MySql e ogni volta che unite il progetto emergono problemi? Ti trovi a dover ripetere le stesse operazioni ogni volta che crei un nuovo sito? In questo talk risolverò tutti i tuoi problemi grazie all’utilizzo di Vagrant e VVV, è finita l’era del “Sulla mio computer funziona.” Speech tenuto durante il WordCamp tenutosi a Milano il 22 Ottobre 2016

1. #wcmil @andreacardinali
THE END OF
‘‘IT WORKS ON MY MACHINE’’
Professional WordPress Development con
Vagrant
Andrea Cardinali
@andreacardinali

2. #wcmil @andreacardinali
ANDREA CARDINALI
• DEVELOPER & SEO
• WORDPRESS LOVER SINCE v2.8
• I RUN MY OWN WEB AGENCY IN CATTOLICA (RN)
2

3. #wcmil @andreacardinali
BE SOCIAL
#WCMIL
@andreacardinali
3

4. #wcmil @andreacardinali
POLL TIME
4

5. #wcmil @andreacardinali
TABLE OF CONTENTS
• WHAT IS VAGRANT & WHY USE IT
• VAGRANT & WORDPRESS
• QUESTION TIME
5

6. #wcmil @andreacardinali
ONCE UPON A TIME…
6

7. #wcmil @andreacardinali
WRITE SOME CODE THAT
WORKS ON YOUR MACHINE
PUSH IT ON
PRODUCTION
DEVELOPMENT WORKFLOW
7

8. #wcmil @andreacardinali
WHAT COULD POSSIBLY
GO WRONG?
8

9. #wcmil @andreacardinali
9

10. #wcmil @andreacardinali
PUSH IT ON
PRODUCTION
THIS SITUATION FEELS FAMILIAR. DOESN’T IT?
PROBLEMS START HERE
WRITE SOME CODE THAT
WORKS ON YOUR MACHINE
10

11. #wcmil @andreacardinali
PUSH IT ON
PRODUCTION
MURPHY’S LAW NEVER SLEEPS…
MURPHY’S LAW
PROBLEMS START HERE
SITUATION IS
GETTING WORSE
WRITE SOME CODE THAT
WORKS ON YOUR MACHINE
IT
WORKS?
11

12. #wcmil @andreacardinali
• 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
12

13. #wcmil @andreacardinali
IT
WORKS?
PUSH IT ON
PRODUCTION
DAMN
BUG HUNTING
MURPHY’S LAW
WRITE SOME CODE THAT
WORKS ON YOUR MACHINE
PROBLEMS START HERE
13

14. #wcmil @andreacardinali
IT
WORKS?
PUSH IT ON
PRODUCTION
DAMN
…UNTIL YOU GET LUCKY
MURPHY’S LAW
WRITE SOME CODE THAT
WORKS ON YOUR MACHINE
YOU’RE
TEMPORARY AWESOME
(‘TILL NEXT DEPLOY)
PROBLEMS START HERE
14

15. #wcmil @andreacardinali
WHAT IS VAGRANT
15

16. #wcmil @andreacardinali
IT
WORKS?
PUSH IT ON
PRODUCTION
DAMN
THIS IS NOT VAGRANT
MURPHY’S LAW
WRITE SOME CODE THAT
WORKS ON YOUR MACHINE
YOU’RE
TEMPORARY AWESOME
(‘TILL NEXT DEPLOY)
PROBLEMS START HERE
16

17. #wcmil @andreacardinali
WRITE SOME CODE
PUSH IT ON
PRODUCTION
IT
WORKS?
YOU’RE
AWESOME
THIS IS VAGRANT 
YOU KNOW IT
WORKS!
17

18. #wcmil @andreacardinali
VAGRANT
http://www.vagrantup.com/
18

19. #wcmil @andreacardinali
WHAT IS VAGRANT
• Open source software written in Ruby
created to build development environments
• Is actively mantained both from Hashicorp
and the community
• It fully automates the creation and the
provision of vms
• It’s a kinda of virtual machine manager with
super powers
19

20. #wcmil @andreacardinali
WHY SHOULD I USE
VAGRANT?
20

21. #wcmil @andreacardinali
PROMOTE TEAM
COLLABORATION
21

22. #wcmil @andreacardinali
PROMOTE TEAM COLLABORATION
• Everyone in your time works with the same
environment
• You work with your favourite OS,IDE,
browser etc
• Your environment is inside a Vagrantfile
(Infrastructure as Code)
• Your Vagrantfile is inside your project’s
repository
22

23. #wcmil @andreacardinali
BETTER DEVELOPMENT
23

24. #wcmil @andreacardinali
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
24

25. #wcmil @andreacardinali
DEVELOPMENT &
PRODUCTION PARITY
25

26. #wcmil @andreacardinali
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’
26

27. #wcmil @andreacardinali
VAGRANT
OVERVIEW
27

28. #wcmil @andreacardinali
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
28

29. #wcmil @andreacardinali
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
29

30. #wcmil @andreacardinali
VAGRANT FUNDAMENTALS
• VAGRANT BOX
• .VAGRANTFILE
• VAGRANT COMMANDS
30

31. #wcmil @andreacardinali
VAGRANT BOX
• A box is a (.box) file that contains an
operating system plus the software installed
in it.
• Plenty of boxes are already available
• You can create your own boxes
• You can have multiple boxes
• You can have different boxes for different
CMS (ie. Homestead for Laravel or
Joomlatools for Joomla)
31

32. #wcmil @andreacardinali
.VAGRANTFILE
• Text file that contains all the information
needed to create the environment
(hardware, networking, box and provisioning
script)
• 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
32

33. #wcmil @andreacardinali
PROVISIONING FILE
• Script used to do specific operations like
software install after initial provision
• It’s optional
• It could be a bash script or a Puppet / Chef/
Ansible recipe
33

34. #wcmil @andreacardinali
VAGRANT COMMANDS
• Vagrant up
Initialize and boot the VM. 1st time it could take
some time
• Vagrant halt
Shutdown the VM. All the data are preserved
• Vagrant destroy
destroy (clear) all the data inside the VM (except
the data inside the shared folders)
• Vagrant ssh
connect throught ssh to the guest OS
• Vagrant push
to upload files on the production server
34

35. #wcmil @andreacardinali
VAGRANT USAGE EXAMPLE
1. git clone <path/to/your/repo>
35

36. #wcmil @andreacardinali
VAGRANT USAGE EXAMPLE
1. git clone <path/to/your/repo>
2. vagrant up
36

37. #wcmil @andreacardinali
VAGRANT USAGE EXAMPLE
1. git clone <path/to/your/repo>
2. vagrant up
3. There is no #3
37

38. #wcmil @andreacardinali
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 quarter
of Ram
38

39. #wcmil @andreacardinali
VAGRANT
&
WORDPRESS
39

40. #wcmil @andreacardinali
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]
40

41. #wcmil @andreacardinali
WHICH ONE
SHOULD I USE?
41

42. #wcmil @andreacardinali
IT DEPENDS…
42

43. #wcmil @andreacardinali
CHOOSE THE ONE IT
WORKS FOR YOU
(AND YOUR TEAM)
43

44. #wcmil @andreacardinali
WORDPRESS
&
VVV
44

45. #wcmil @andreacardinali
VARYING
VAGRANT
VAGRANTS
45

46. #wcmil @andreacardinali
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
46

47. #wcmil @andreacardinali
VVV – GETTING STARTED
• https://github.com/Varying-Vagrant-
Vagrants/VVV#installation
• 1st time setup takes ~1 hour and half
47

48. #wcmil @andreacardinali
VVV (DEFAULT) DASHBOARD
• Digit vvv.dev in your browser
48

49. #wcmil @andreacardinali
VVV-DASHBOARD
https://github.com/topdown/VVV-Dashboard
49

50. #wcmil @andreacardinali
VVV-DASHBOARD
50

51. #wcmil @andreacardinali
VARIABLE VVV
51

52. #wcmil @andreacardinali
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
52

53. #wcmil @andreacardinali
VARIABLE VVV - COMMANDS
• vv create
• vv list
• vv remove
53

54. #wcmil @andreacardinali
54

55. #wcmil @andreacardinali
VV LIST
55

56. #wcmil @andreacardinali
VV CREATE - 1
56

57. #wcmil @andreacardinali
VV CREATE - 2
57

58. #wcmil @andreacardinali
VV BLUEPRINTS
58

59. #wcmil @andreacardinali
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 installed
automatically
• 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
59

60. #wcmil @andreacardinali
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" }
},
} ],
60

61. #wcmil @andreacardinali
QUICK RECAP
• Don’t be afraid of Vagrant complexity, is
really simple to use.
• Choose a Vagrant project that fits your needs
(or create a new one)
• Use Vagrant to definitely stop ‘it works on my
machine’ bugs and to become a better
developer.
61

62. #wcmil @andreacardinali
WORDPRESS MEETUP ROMAGNA
QUANDO:
ogni 1° giovedi del mese ( prossimo 3 Novembre)
DOVE:
Dinamo Coworking Space Cesena
PERCHÉ:
Per parlare di WordPress, conoscere bella
gente e condividere le proprie esperienze
wpromagna.com
@romagnawp
62

63. #wcmil @andreacardinali
QUESTIONS?
63

64. #wcmil @andreacardinali
THANKS!
• Twitter:@andreacardinali
• Slideshare:
http://www.slideshare.net/andreacardinali
• Website: http://www.andreacardinali.it/
64