Desarrollo de

WordPress con Vagrant

Yo digo Vagrn

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Opciones para desarrollo web

1. Soluciones locales all-in-one: ZEND Server, XAMPP, MAMP, WAMP...

VENTAJAS
Fcil
Rpido
Consume pocos recursos

Desarrollo WordPress con Vagrant

DESVENTAJAS
Incluye algunos bugs de regalo
normalmente
El entorno de pruebas es muy
distinto al de produccin

Ignacio Cruz

@igmoweb

Opciones para desarrollo web

2. Instalarlo todo en nuestro ordenador (PHP, MySQL)

VENTAJAS
Consume relativamente pocos
recursos
Aprendes mucho

Desarrollo WordPress con Vagrant

DESVENTAJAS
Proceso doloroso
Todo queda desperdigado en
nuestro ordenador
Si formateamos nos toca
empezar de nuevo
Normalmente, el entorno de
pruebas es distinto a produccin
Ignacio Cruz

@igmoweb

Opciones para desarrollo web

3. Configuracin remota con Samba Shares, ExpandDrive

VENTAJAS
No pierdes los datos. Todo se
encuentra en remoto
Aprendes mucho
Entorno de desarrollo = Entorno
de produccin
Se tiene que usar Vim

Desarrollo WordPress con Vagrant

DESVENTAJAS
Workflow lento
Problemas de desconexin
Hay que usar Vim

Ignacio Cruz

@igmoweb

Proceso tpico de desarrollo web

1.

Desarrollamos bajo un S.O. en nuestro ordenador

2.

Subimos a produccin con un S.O. distinto

3.

Pantallazo en blanco: Fallos por codificacin de fin de lnea, maysculas

en los nombres de los ficheros...

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Qu deberamos intentar?

Entorno desarrollo = Entorno de produccin

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Solucin: Virtualizacin

Independientemente de nuestro ordenador y S.O. podemos virtualizar

cualquier otro S.O.

Al S.O. virtual le instalamos todo lo que necesitemos: PHP, MySQL,

Apache/Nginx, Memcached, Nodejs

En un equipo, todos los desarrolladores podrn picar bajo el mismo

entorno de pruebas.

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Entering Vagrant...

Imagen robada de www.vagrantup.com

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Vagrant: Definicin
Vagrant es una herramienta para construir entornos completos de desarrollo.
Enfocado a la automatizacin, Vagrant rebaja el tiempo de configuracin,
incrementando el tiempo de paridad desarrollo/produccin y hace de la excusa
Funciona en mi ordenador una excusa del pasado.
Fuente: www.vagrantup.com

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Vagrant: Historia

Vagrant comienza en Enero del 2010 liderado por Mitchell Hashimoto.

Durante 3 aos desarrolla en su tiempo libre.

El 2012 forma HashiCorp para desarrollar Vagrant a tiempo completo y

proveer de productos y soporte profesionales a empresas.

Vagrant permanece como un proyecto open source.

Fuente: www.vagrantup.com

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Vagrant: Beneficios

Vagrant asla dependencias y configuracin dentro de un entorno

desechable.

Un slo fichero y todo un equipo puede trabajar en el mismo entorno sin

necesidad de preocuparse por instalarlo todo de nuevo.

El entorno de desarrollo es fidedigno al de produccin.

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Requisitos

VirtualBox:
https://www.virtualbox.org/wiki/Downloads

Desarrollo WordPress con Vagrant

Vagrant:
sudo gem install vagrant

Ignacio Cruz

@igmoweb

Nuestro primer Vagrant

1.

Creamos una carpeta donde queramos crear nuestra instancia.

2.

Con esto creamos la configuracin necesaria para generar una mquina virtual
con Ubuntu Trusty (14.04) 64bits. El archivo Vagrantfile se genera
automticamente.
Listado de boxes pblicos de Vagrant: https://atlas.hashicorp.com/boxes/search
Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Vagrantfile

Vagrantfile es un
fichero Ruby

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Arrancando: Vagrant up!

vagrant up descarga y monta el S.O. indicado en Vagrantfile.

El S.O. queda montado en nuestro ordenador como si de un servidor

remoto se tratara.

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Vagrant SSH
Con vagrant ssh podemos acceder a la mquina como si fuera un servidor
fuera de nuestro ordenador.

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Carpetas compartidas

Vagrant sincroniza por defecto la carpeta del proyecto en nuestro

ordenador (donde se encuentra Vagrantfile) con la carpeta /vagrant del
servidor virtual.

Local

Mquina Virtual (vagrant ssh)

Esto nos permite editar los archivos desde local con nuestro IDE favorito.
Todos los ficheros quedarn inmediatamente actualizados en la mquina
virtual.

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Aprovisionamiento

vagrant provision permite la automatizacin de tareas.

Podramos crear un script que instalara Apache, MySQL y PHP. Vagrant lo

ejecutara en cada aprovisionamiento.

Es til cuando queremos crear el mismo entorno para varias personas

distintas sin necesidad de instalarlo todo en cada ordenador.

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Aprovisionamiento
Creamos un fichero en la carpeta del Vagrantfile llamado provision.sh que
instale Apache.

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Aprovisionamiento
Modificamos el Vagrantfile para que ejecute dicho fichero en cada
aprovisionamiento.

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Aprovisionamiento

Si tenemos la mquina ya arrancada (hemos hecho vagrant up)

simplemente ejecutamos vagrant reload --provision

La otra opcin es primero parar la mquina con vagrant halt y luego

aprovisionar con vagrant up --provision

Vagrant se encargar de ejecutar el script y descargar e instalar Apache

Si quisiramos hacer lo mismo en otro equipo, simplemente hay que

copiar la carpeta Vagrant y ejecutar vagrant up (la primera vez realizar
el aprovisionamiento)

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

PERO
Crear una mquina virtual no es fcil. Necesitamos:

Que el servidor sea accesible desde el navegador

Asignar una IP

Mapear hosts

Instalar muchas ms cosas: PHPMyAdmin, Memcached, WordPress, Git,

xDebug, MySQL, SVN

Tendramos que conocer algo de shell scripting, servidores y Ruby.

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Haciendo trampas, eh?

Mi vida con Vagrant

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Entering Varying Vagrant Vagrants...

Varying vagrant Vagrants es un proyecto open source enfocado al

desarrollo de WordPress.

Contiene un entorno con todas las herramientas necesarias para la

construccin de pginas web bajo WordPress, desarrollo de Plugins y
Themes adems de la contribucin al ncleo de WordPress.

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

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

VVV: Instalacin y puesta en marcha

Instalar VirtualBox y Vagrant

Opcional: Instalar el plugin vagrant-hostupdater: vagrant plugin
install vagrant-hostupdater. Aade automticamente entradas a
nuestro fichero hosts
Opcional: Instalar vagrant-triggers con vagrant plugin install
vagrant-triggers. til para realizar cargas/backups de bases de datos
al arrancar o parar Vagrant.
Clonar VVV: git clone git://github.com/Varying-Vagrant-Vagrants/VVV.
git vagrant-local

vagrant up

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Contenido de VVV

Ubuntu 14.04
Nginx 1.6
MySQL 5.5
php-fpm 5.5
Memcached
xDebug
PHPUnit

Desarrollo WordPress con Vagrant

Git
SVN
Composer
phpMyAdmin
NodeJs
Grunt
WP CLI

Ignacio Cruz

@igmoweb

VVV: Instalaciones WordPress

Por defecto, VVV contiene las siguientes instalaciones de WordPress:

La ltima versin de WordPress estable: http://local.wordpress.dev

Trunk de WordPress: http://local.wordpress-trunk.dev
Trunk de desarrollo: http://src.wordpress-develop.dev
Trunk de desarrollo pasado por Grunt: http://build.wordpress-develop.dev
Escritorio por defecto con varias herramientas: http://vvv.dev

User/pass de las instalaciones: admin/password

MySQL: root/root o wp/wp

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

VVV: Instalaciones WordPress

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Aadir otra instalacin

Para aadir nuestra propia instalacin de WordPress es recomendable

usar el sistema de aprovisionamiento.
A la hora de crear un nuevo sitio, existen tres elementos a tener en
cuenta:
Un script que descargue la versin de WordPress, cree la Base
de Datos y la instale automticamente.
Aadir la configuracin del sitio a Nginx
Aadir el dominio del sitio a nuestro fichero hosts
La forma de hacerlo puede variar: Desde comandos WP CLI, Git o SVN o
un fichero composer.json

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

1. El script de configuracin

VVV buscar cualquier fichero llamado vvv-init.sh dentro de 5 niveles

dentro de la carpeta www y lo ejecutar en cada aprovisionamiento.

En el siguiente ejemplo vamos a:

Descargar WP 4.3 en Espaol
Crear una base de datos
Instalar WordPress
Instalar Jetpack y activarlo
Todo sin pasar por el navegador...

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

1. El script de configuracin
Contenido de vvv-init.sh:

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

1. El script de configuracin

ision
v
o
r
tp

ran

vag

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

2. Archivo nginx

Para que Nginx sirva nuestra nueva instalacin necesitamos un fichero

llamado vvv-nginx.conf. Al igual que vvv-init.sh debemos ponerlo dentro
de la carpeta www

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

3. Archivo hosts

Si hemos instalado el plugin Vagrant Hosts Updater tambin podemos

crear un archivo vvv-hosts (viene ya creado por defecto) que se leer
durante el aprovisionamiento e insertar cada lnea en nuestro archivo
/etc/hosts

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

vagrant up --provision!

Una vez terminado el aprovisionamiento, nuestro nuevo sitio estar disponible

en la direccin http://local.wordpress-meetup.dev

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

xDebug
Para activar xDebug:
vagrant ssh
xdebug_on
Con esto activamos la informacin de errores como notices, warnings, fatal
errors
Ms informacin y configuracin con distintos IDEs: https://github.com/VaryingVagrant-Vagrants/VVV/wiki/Code-Debugging

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Parar y destruir nuestro Vagrant

Parar la mquina virtual:

vagrant halt

Destruir nuestra mquina virtual (no eliminar nada de la carpeta www)

vagrant destroy

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb

Otras referencias

Vagrant docs: https://www.vagrantup.com/

VagrantPress, otra configuracin Vagrant distinta a VVV enfocada a

WordPress: http://vagrantpress.org/

VVV Wiki: https://github.com/Varying-Vagrant-Vagrants/VVV/wiki

Desarrollo WordPress con Vagrant

Ignacio Cruz

@igmoweb