Web Development with Virtual Machines

Given the increasingly complex world of web development, there’s more to creating a website than just using a text editor and a browser. If you have to support multiple customers, possibly each with their hosting arrangements, it’s unlikely that your development machine will wholly reflect the setup of each host, and there might be conflicting software requirements (e.g. differing versions of PHP or Ruby, Apache, or perhaps security arrangements).

Virtual machines, which allow guest operating systems to run on top of a native operating system - such as Windows on Mac OS X, provide a relatively straightforward way of setting up dedicated development environments for each of your customers.

This deck outlines two particular tools which make this incredibly easy.

Transcript

1. Web Development with Virtual Machines Web Development with Virtual Machines, @ninthspace, 20 October 2015 1
2. How do you develop? Web Development with Virtual Machines, @ninthspace, 20 October 2015 2
3. LAMP, MAMP or WAMP Web Development with Virtual Machines, @ninthspace, 20 October 2015 3
4. LAMP, MAMP or WAMP Some other 4 letter acronym Web Development with Virtual Machines, @ninthspace, 20 October 2015 4
5. LAMP, MAMP or WAMP Some other 4 letter acronym Homebrew Web Development with Virtual Machines, @ninthspace, 20 October 2015 5
6. LAMP, MAMP or WAMP Some other 4 letter acronym Homebrew Whatever your operating system provides by default..? Web Development with Virtual Machines, @ninthspace, 20 October 2015 6
7. Brilliant! ! Web Development with Virtual Machines, @ninthspace, 20 October 2015 7
8. Nope ! Web Development with Virtual Machines, @ninthspace, 20 October 2015 8
9. What's wrong with these? Web Development with Virtual Machines, @ninthspace, 20 October 2015 9
10. You probably deploy to all sorts of servers? ! ! ! Web Development with Virtual Machines, @ninthspace, 20 October 2015 10
11. But.. all your development is in the same environment Web Development with Virtual Machines, @ninthspace, 20 October 2015 11
12. Bugs! ! Web Development with Virtual Machines, @ninthspace, 20 October 2015 12
13. Inconsistent behaviour! ! Web Development with Virtual Machines, @ninthspace, 20 October 2015 13
14. Custom tweaks to get things to work slightly differently for a particular client, and let's hope doing that doesn't break that other thing I'm working on Web Development with Virtual Machines, @ninthspace, 20 October 2015 14
15. Do you work in a team? !"# Web Development with Virtual Machines, @ninthspace, 20 October 2015 15
16. EVERYONE has these problems Web Development with Virtual Machines, @ninthspace, 20 October 2015 16
17. AND EVERYONE has to do something slightly differently Web Development with Virtual Machines, @ninthspace, 20 October 2015 17
18. What else? Web Development with Virtual Machines, @ninthspace, 20 October 2015 18
19. Development system upgrades ! Web Development with Virtual Machines, @ninthspace, 20 October 2015 19
20. This will (eventually) break stuff Web Development with Virtual Machines, @ninthspace, 20 October 2015 20
21. Trust me !!! Web Development with Virtual Machines, @ninthspace, 20 October 2015 21
22. Wouldn't it be nice if.. Web Development with Virtual Machines, @ninthspace, 20 October 2015 22
23. ..NONE of these hassles happened? Web Development with Virtual Machines, @ninthspace, 20 October 2015 23
24. YOU can sort this.. Web Development with Virtual Machines, @ninthspace, 20 October 2015 24
25. ..TODAY Web Development with Virtual Machines, @ninthspace, 20 October 2015 25
26. FOR FREE! ! Web Development with Virtual Machines, @ninthspace, 20 October 2015 26
27. With virtual machines Web Development with Virtual Machines, @ninthspace, 20 October 2015 27
28. What's a virtual machine? Web Development with Virtual Machines, @ninthspace, 20 October 2015 28
29. It's a simulation of a computer, running on your computer Web Development with Virtual Machines, @ninthspace, 20 October 2015 29
30. Any operating system Any environment For free! Web Development with Virtual Machines, @ninthspace, 20 October 2015 30
31. VirtualBox Web Development with Virtual Machines, @ninthspace, 20 October 2015 31
32. www.virtualbox.org Web Development with Virtual Machines, @ninthspace, 20 October 2015 32
33. Install anything on it Web Development with Virtual Machines, @ninthspace, 20 October 2015 33
34. Windows Linux Web Development with Virtual Machines, @ninthspace, 20 October 2015 34
35. Install other software to mirror your deployment environment Web Development with Virtual Machines, @ninthspace, 20 October 2015 35
36. Then set up the configuration of all that software Web Development with Virtual Machines, @ninthspace, 20 October 2015 36
37. PER CLIENT? Web Development with Virtual Machines, @ninthspace, 20 October 2015 37
38. Now you have even more problems! ! Web Development with Virtual Machines, @ninthspace, 20 October 2015 38
39. Wouldn't it be great if you could just automate this? Web Development with Virtual Machines, @ninthspace, 20 October 2015 39
40. You can! ! Web Development with Virtual Machines, @ninthspace, 20 October 2015 40
41. Here are two ways.. Web Development with Virtual Machines, @ninthspace, 20 October 2015 41
42. But first.. a diversion Web Development with Virtual Machines, @ninthspace, 20 October 2015 42
43. Introducing Vagrant Web Development with Virtual Machines, @ninthspace, 20 October 2015 43
44. www.vagrantup.com Web Development with Virtual Machines, @ninthspace, 20 October 2015 44
45. Vagrantfile Web Development with Virtual Machines, @ninthspace, 20 October 2015 45
46. Vagrant.configure("2") do |config| config.vm.box = "ubuntu/trusty64" config.vm.hostname = "myubuntu.box" config.vm.network :private_network, ip: "192.168.0.42" end Web Development with Virtual Machines, @ninthspace, 20 October 2015 46
47. But you still have to install all your development software! ! Web Development with Virtual Machines, @ninthspace, 20 October 2015 47
48. Alternatively Web Development with Virtual Machines, @ninthspace, 20 October 2015 48
49. Vagrant.configure("2") do |config| config.vm.box = "opscode-ubuntu-12.04_chef-11.4.0" config.vm.box_url = "https://opscode-vm-bento.s3.amazonaws.com/vagrant/opscode_ubuntu-12.04_chef-11.4.0.box" config.ssh.forward_agent = true config.vm.network :forwarded_port, guest: 80, host: 8080 config.vm.provision :chef_solo do |chef| chef.cookbooks_path = ["cookbooks"] chef.add_recipe :apt chef.add_recipe 'php' chef.add_recipe 'apache2' chef.add_recipe 'mysql::server' # Loads of configuration stuff goes here for apache and mysql end end Find out about Chef: https://www.chef.io/chef/ Web Development with Virtual Machines, @ninthspace, 20 October 2015 49
50. ..diversion ends Web Development with Virtual Machines, @ninthspace, 20 October 2015 50
51. So.. what can we do? Web Development with Virtual Machines, @ninthspace, 20 October 2015 51
52. First way: Homestead Web Development with Virtual Machines, @ninthspace, 20 October 2015 52
53. github.com/laravel/homestead Web Development with Virtual Machines, @ninthspace, 20 October 2015 53
54. Web Development with Virtual Machines, @ninthspace, 20 October 2015 54
55. Sample configuration of Laravel project Web Development with Virtual Machines, @ninthspace, 20 October 2015 55
56. Homestead.yaml Web Development with Virtual Machines, @ninthspace, 20 October 2015 56
57. ip: "192.168.10.23" memory: 2048 cpus: 1 hostname: suncream name: suncream provider: virtualbox authorize: ~/.ssh/id_rsa.pub keys: - ~/.ssh/id_rsa folders: - map: "/Users/chris/Work/git/laravel/suncream" to: "/home/vagrant/suncream" type: "nfs" sites: - map: suncream.app to: "/home/vagrant/suncream/public" Web Development with Virtual Machines, @ninthspace, 20 October 2015 57
58. databases: - homestead variables: - key: APP_ENV value: local ports: - send: 2228 to: 22 - send: 8008 to: 80 - send: 44308 to: 443 - send: 33068 to: 3306 - send: 54328 to: 5432 - send: 8028 to: 8025 Web Development with Virtual Machines, @ninthspace, 20 October 2015 58
59. Other files are located: /etc/php5/cli/php.ini /etc/php5/fpm/php.ini /etc/nginx/nginx.conf PHP Error logs are in: /var/log/nginx/<site-name>.log Web Development with Virtual Machines, @ninthspace, 20 October 2015 59
60. Demo ! Web Development with Virtual Machines, @ninthspace, 20 October 2015 60
61. Not just Laravel Web Development with Virtual Machines, @ninthspace, 20 October 2015 61
62. Any PHP source code ! Web Development with Virtual Machines, @ninthspace, 20 October 2015 62
63. $ composer require laravel/homestead $ php vendor/bin/homestead make $ nano Homestead.yaml # just a text editor $ vagrant up Get Composer: https://getcomposer.org Web Development with Virtual Machines, @ninthspace, 20 October 2015 63
64. Demo ! Web Development with Virtual Machines, @ninthspace, 20 October 2015 64
65. What if you're not using PHP? Web Development with Virtual Machines, @ninthspace, 20 October 2015 65
66. Second way: Vaprobash Web Development with Virtual Machines, @ninthspace, 20 October 2015 66
67. github.com/fideloper/Vaprobash Web Development with Virtual Machines, @ninthspace, 20 October 2015 67
68. $ curl -L http://bit.ly/vaprobash > Vagrantfile $ nano Vagrantfile $ vagrant up Web Development with Virtual Machines, @ninthspace, 20 October 2015 68
69. Demo ! Web Development with Virtual Machines, @ninthspace, 20 October 2015 69
70. Issues? ! Web Development with Virtual Machines, @ninthspace, 20 October 2015 70
71. Make sure you know which ports go where. Web Development with Virtual Machines, @ninthspace, 20 October 2015 71
72. Each Virtual Machine needs its own memory, duh. Web Development with Virtual Machines, @ninthspace, 20 October 2015 72
73. $ vagrant package --output some-unique-filename.box Backup your Box. Because a backup of a VirtualBox is a Box you can copy it around and use it as a source for a new Virtual Machine. Web Development with Virtual Machines, @ninthspace, 20 October 2015 73
74. Otto ! Web Development with Virtual Machines, @ninthspace, 20 October 2015 74
75. ottoproject.io Web Development with Virtual Machines, @ninthspace, 20 October 2015 75
76. this-was-launched-last- month-so-i-havent-played- with-it-yet.com Web Development with Virtual Machines, @ninthspace, 20 October 2015 76
77. $ rails new Create a new Rails app. Web Development with Virtual Machines, @ninthspace, 20 October 2015 77
78. $ rails new $ otto compile Fetch the dependencies to allow the development of that web application. Web Development with Virtual Machines, @ninthspace, 20 October 2015 78
79. $ rails new $ otto compile $ otto dev Create the development environment for the application, then develop! Web Development with Virtual Machines, @ninthspace, 20 October 2015 79
80. $ rails new $ otto compile $ otto dev $ otto infra Create the infrastructure on which the application will be deployed. Web Development with Virtual Machines, @ninthspace, 20 October 2015 80
81. $ rails new $ otto compile $ otto dev $ otto infra $ otto build Get the web application ready for deployment, e.g. create an EC2 instance and prepare an AMI. Web Development with Virtual Machines, @ninthspace, 20 October 2015 81
82. $ rails new $ otto compile $ otto dev $ otto infra $ otto build $ otto deploy Deploys the packaged application into the live infrastructure. Web Development with Virtual Machines, @ninthspace, 20 October 2015 82
83. End ! Web Development with Virtual Machines, @ninthspace, 20 October 2015 83