Configurar un entorno de desarrollo local de WordPress con Vagrant

Si desarrollas con WordPress, es preferible configurar un entorno local en el que hayas instalado un servidor, una herramienta de base de datos y unos cuantos sitios de WordPress junto con otras herramientas que necesites. Esto está bien si sólo trabajas en unos pocos proyectos. Pero cuando se multiplican, surgen los problemas. Y también los quebraderos de cabeza de mantener varios entornos, porque el cliente tiene una configuración diferente a la tuya.

Para solucionar este problema, podemos utilizar lo que llamamosVagrant, una herramienta para trabajar con entornos virtuales. Proporciona una forma fácil de configurar un entorno de desarrollo local con unos pocos comandos, y puedes replicar una configuración completa tantas veces como quieras, con facilidad y sin la molestia de instalar todo manualmente. Para ejecutar Vagrant, necesitas definir un conjunto de reglas. Vagrant configura tu máquina virtual basándose en estas reglas. Para ello, Vagrant necesita dos archivos Vagrantfile, que le dice a Vagrant qué tipo de hardware necesita la máquina virtual, y un archivo de despliegue, que le dice a Vagrant qué hacer en la máquina virtual.

Como Vagrant trabaja con entornos virtuales, necesitas un software de máquina virtual para ejecutar Vagrant. Para nuestros propósitos, utilizaremos el Virtualbox de código abierto.

Instalación de VirtualBox

Dirígete a lapágina de descargas de Virtualbox y descarga el archivo binario correspondiente a tu host invitado. (El host invitado es el sistema operativo desde el que vas a ejecutar tu entorno de desarrollo). Instala Virtualbox.

Instalar Vagrant

Descarga el binario correspondiente a tu sistema operativo desdela página de descargas de Vagrant e instálalo.

Para comprobar si se ha instalado correctamente, escribe el siguiente comando en la línea de comandos de tu sistema operativo.

$ vagrant -v

Instalación del plugin Vagrant Hosts Updater

El pluginvagrant-hostupdater modificará el archivo de hosts de tu SO para que funcionen los dominios configurados por Vagrant. Para instalarlo, ejecuta el siguiente comando

$ vagrant plugin install vagrant-hostsupdater

Reinicia tu SO después de instalar Vagrant/Virtualbox para que no haya problemas de red.

Instalación de Git

Linux

También necesitaremos el control de versiones Git para este tutorial. Si no lo tienes instalado, instálalo con el siguiente comando si tienes una distribución Debian/Ubuntu

$ sudo apt install git

o si tienes Fedora

$ sudo dnf install git

o si tienes CentOS/RHEL

$ sudo yum install git

Comprueba la versión de Git instalada mediante el siguiente comando

$ git --version

Verás algo como

$ git version 2.20.1

Tienes que configurar Git mediante los siguientes comandos.

$ git config --global user.name "Your Name" 
$ git config --global user.email "[email protected]"

Windows

Para instalar Git en Windows, dirígete ala página de descargas de Git e instala el binario.

Mac OS

Si tienes instalado homebrew, puedes instalar Git mediante el siguiente comando.

$ brew install git

o puedes descargar un paquete binario dela página de descargas de Git e instalarlo.

Instalar un conjunto de Vagrant

En lugar de crear una configuración de Vagrant desde cero, utilizaremosVagrant Varying Vagrants(VVV) – una configuración de Vagrant de código abierto destinada específicamente a crear entornos de desarrollo de WordPress. Un VVV estándar configurará tu máquina virtual basada en Ubuntu 18.04 junto con el servidor Nginx, la base de datos MariaDB, PHP, WP-CLI, Node.js, MailHog, Composer, memcached, phpMyAdmin, git y varias otras herramientas. VVV te proporcionará varias instalaciones de WordPress por defecto, siendo una de ellas la última versión de vanguardia para ayudarte a experimentar.

El primer paso es clonar el repositorio Git de VVV en un directorio local de tu sistema.

$ git clone -b master git://github.com/Varying-Vagrant-Vagrants/VVV.git ~/vvv

Aquí estamos clonando la rama maestra del repositorio en el sistema. Si quieres actualizaciones más rápidas, puedes utilizar la rama de desarrollo.

Iniciar VVV

Cambia al directorio donde has clonado VVV.

$ cd vvv

Inicia el entorno Vagrant, que instalará la máquina virtual y configurará todo.

$ vagrant up

Este proceso puede tardar un poco, así que ten paciencia. Es posible que se te pida la contraseña de root durante el proceso, que es necesaria para configurar el archivo de hosts de tu sistema.

Nota para los usuarios de Windows 8/10

Si estás en Windows, puede que te aparezca el siguiente error

==> default: Booting VM... 
There was an error while executing `VBoxManage`, a CLI used by Vagrant 
for controlling VirtualBox. The command and stderr is shown below. 
 
Command: ["startvm", "1fe83aa1-2f23-4ddd-ad77-b7e7e00aabe6", "--type", "headless"] 
 
Stderr: VBoxManage.exe: error: Failed to open/create the internal network 'HostInterfaceNetworking-VirtualBox Host-Only 
Ethernet Adapter #3' (VERR_INTNET_FLT_IF_NOT_FOUND). 
VBoxManage.exe: error: Failed to attach the network LUN (VERR_INTNET_FLT_IF_NOT_FOUND) 
VBoxManage.exe: error: Details: code E_FAIL (0x80004005), component ConsoleWrap, interface IConsole

Ten en cuenta el Adaptador referido aquí:

VirtualBox Host-Only Ethernet Adapter #3

Abre el Panel de Control >> Centro de redes y recursos compartidos. Ahora haz clic en Cambiar la configuración del adaptador. Haz clic con el botón derecho del ratón en el adaptador cuyo nombre o nombre de dispositivo coincida con el adaptador Ethernet de sólo host de VirtualBox nº 3 y haz clic en Propiedades. Haz clic en el botón Configurar.

Ahora haz clic en la pestaña Controlador. Haz clic en Actualizar controlador. Selecciona Buscar controladores en mi ordenador. Ahora elige Déjame elegir de una lista de controladores disponibles en mi ordenador. Selecciona la opción que te aparezca y haz clic en Siguiente. Haz clic en Cerrar para finalizar la actualización. Ahora vuelve a tu ventana de Terminal/Powershell/Comando y repite el comando vagrant up. Esta vez debería funcionar bien.

Una vez terminado esto, puedes visitar tu panel de control de VVV en http://vvv.test url.

VVV viene con dos instalaciones de WordPress por defecto: http: //one.wordpress.test y http://two.wordpress.test. Ambos sitios tienen los mismos datos de acceso, admin como nombre de usuario y password como contraseña. Las credenciales de la base de datos para ambos sitios son wp como nombre de usuario y contraseña. Las credenciales del usuario raíz de MySQL son root como nombre de usuario y contraseña. Y las credenciales del usuario raíz de la VM son root como nombre de usuario y vagrant como contraseña.

Hay una instalación de wordpress para desarrolladores en http://trunk.wordpress.net pero no funcionará ya que no fue provisionada. Esta instalación es útil si eres un colaborador de WordPress que trabaja con tickets y parches de Trac. Para activarla, abre vvv-custom.yml y cambia el valor de skip_provisioning en wordpress-trunk a false y luego vuelve a aprovisionar la máquina virtual con el comando

$ vagrant reload --provision

Hay otra instalación de wordpress sin url denominada wordpress-meta-environment. Esta instalación creará un entorno útil para las contribuciones al equipo meta de WordPress, por ejemplo, WordCamps, .org, etc. Para activar esta instalación, añade la siguiente línea bajo wordpress-meta-environment en el archivo vvv-custom.yml.

hosts:
  - wpmeta.test

Y luego cambia el valor de skip_provisioning a false y vuelve a aprovisionar la VM.

$ vagrant reload --provision

Añadir un nuevo sitio

Si quieres añadir otro sitio a la VM, tendrás que editar el archivo vvv-custom.y ml que puedes encontrar en el directorio vvv. Si no está ahí, simplemente copia vvv-config.yml y créalo. Esto es un proceso único y no necesitarás hacerlo de nuevo. Haz siempre los cambios en vvv-custom.yml porque vvv-config.yml se sobrescribe cuando actualizas VVV.

Añade el siguiente código en la sección de sitios a vvv-custom . yml para añadir un nuevo sitio.

newsite:
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template
    description: "A WordPress subdir multisite install"
    vm_dir: /srv/www/newsite
    local_dir: /home/user/vvv/www/newsite
    branch: master
    nginx_upstream: php
    skip_provisioning: false
    hosts:
      - newsite.test
    custom:
      wp_type: subdirectory

Variables

Lavariable repo hace referencia a un repositorio predefinido de Github que contiene información sobre cómo configurar un nuevo sitio de WordPress en la VM. Por ahora, estamos utilizando un repositorio mantenido por VVV.

La variabledescription se explica por sí misma.

vm_dir es el directorio real dentro de la VM donde residirá tu sitio.

local_dir es el directorio en tu máquina anfitriona donde vive tu sitio.

La variablebranch indica a Vagrant que consulte la rama maestra del repositorio en el ejemplo.

nginx_upstream se utiliza para establecer a dónde pasa las peticiones Nginx y normalmente se utiliza para cambiar la versión de PHP necesaria para tu instalación. php aquí se refiere a la versión de PHP por defecto que es la 7.2. Puedes usar php71 para cambiarla a PHP 7.1 o php56 para cambiarla a PHP 5.6.

skip_provisioning se establece en false, lo que significa que debemos incluir este sitio en la máquina virtual.

La variablehosts se utiliza para establecer la url que necesitaremos para acceder al sitio.

La secciónpersonalizada es útil si necesitas un control adicional sobre tu sitio de WordPress. Puedes utilizar esta sección para configurar una instalación multisitio o instalar una versión diferente de WordPress e incluso cambiar el nombre de la base de datos o de tu sitio que se utilizará para tu instalación.

La variablewp_type decide si tu instalación será simple, multisitio con dominios o multisitio con subdirectorio. wp_type toma cuatro valores: simple, subdominio, subdirectorio y ninguno. Con la instalación con subdominio, puedes definir varios hosts para tu instalación multisitio en el siguiente formato

hosts:
    - multisite.test
    - site1.multisite.test
    - site2.multisite.test
  custom:
    wp_type: subdomain

Puedes añadir una variable más en la sección personalizada que es wp_version. Puedes establecerla como nightly si quieres instalar la versión nocturna de WordPress. Toma tres valores: nightly, latest y un número de versión.

custom: 
     wp_version: nightly

Hay otra variable, db_name que te permite establecer el nombre de la base de datos para tu instalación.

custom:
    db_name: super_secet_db_name

Y por último, la variable site_title te permite establecer el título de tu sitio WP.

custom:
    site_title: My Awesome Dev Site

Esto debería cubrir todas las variables y opciones que necesitarías para añadir tu propio sitio web en VVV. Después de cambiar el archivo vvv-custom.yml sólo tienes que ejecutar el siguiente comando para que tu nuevo sitio funcione.

$ vagrant reload --provision

Añadir un sitio existente

Hasta ahora hemos aprendido a añadir un sitio completamente nuevo a VVV. Pero qué pasa si ya estás trabajando en un sitio y quieres añadirlo a VVV. Veamos cómo hacerlo.

Para añadir un sitio existente, el primer paso es el mismo que antes, es decir, editar el archivo vvv-custom.yml y añadir el siguiente código.

howtoforge:
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template
    description: "A WordPress site"
    vm_dir: /srv/www/newsite
    local_dir: /home/user/vvv/www/newsite
    hosts:
      - howtoforge.local

Esto le dirá a VVV que configure un nuevo sitio accesible a través de http://howtoforge.local Pero es un sitio completamente nuevo. Lo que tenemos que hacer es convertirlo en nuestra instalación existente. Para ello tenemos que copiar los archivos de nuestra instalación existente de WordPress en el directorio local, es decir, /home/usuario/vvv/www/nuevo sitio

$ cp /var/www/howtoforge/ /home/user/vvv/www/newsite/

Ahora tenemos que copiar la base de datos. Una forma sencilla de hacerlo es exportar la base de datos existente como un archivo .sql, copiar ese archivo al directorio de nuestro blog e importar la base de datos de nuevo mediante SSH a nuestra máquina virtual.

Primero, entra en mysql en la línea de comandos de tu sistema local y utiliza el siguiente comando para exportar la base de datos.

$ cd /home/user/vvv/www/newsite
$ mysqldump -u username -p database_name > data-dump.sql

Ahora podemos aprovisionar la VM de nuevo.

$ vagrant reload --provision

Entra por SSH en tu VM.

$ vagrant ssh

Ahora importa la base de datos de nuevo a tu VM.

$ cd /srv/www/newsite 
$ mysql -u root -p newsite < data-dump.sql

La VVV ya ha creado una nueva base de datos durante el aprovisionamiento para nuestro blog llamada newsite. La contraseña para el usuario root es aquí root. El comando anterior importará nuestra base de datos existente a la nueva.

Esto completa la configuración de un sitio existente en VVV.

Habilitar SSL

Las instalaciones en localhost no suelen ser seguras. Y la instalación de tu propio certificado en localhost puede ser un proceso largo y tedioso, incluso con Let's Encrypt. Pero VVV hace que este proceso sea bastante fácil y por defecto tiene activado el SSL en todas tus instalaciones de WordPress. Sólo tienes que empezar a usar https con tus sitios. La primera vez, tu navegador se quejará de que el certificado no es válido, pero añádelo como excepción y a partir de ahora todo debería ir bien.

Actualizar WordPress

Puedes actualizar tu instalación de WordPress desde tu panel de control. Además, VVV actualizará tu wordpress cada vez que reprovises la VM. También puedes actualizar WordPress manualmente descargándolo de WordPress.org y extrayendo el archivo zip. Y también puedes utilizar WP CLI, que viene incluido en VVV. Para actualizar tu sitio con WP CLI, utiliza los siguientes comandos.

$ cd /srv/www/newsite
$ wp core update

Actualizar VVV

El primer paso es detener la máquina Vagrant.

$ vagrant halt

Ahora asegúrate de que tu vagrant y Virtualbox están actualizados. Si no es así, descárgalos de nuevo e instálalos.

Ejecuta el siguiente comando para actualizar tu caja Vagrant. Es opcional, pero es mejor que lo hagas.

$ vagrant box update

Ahora, saca la última versión de VVV de Github.

$ git pull

Vuelve a aprovisionar la caja para completar la actualización.

$ vagrant up --provision

Herramientas adicionales

VVV viene con varias utilidades que puedes instalar. Las encontrarás en la sección de utilidades de tu archivo vvv-custom.yml. Por defecto, tls-ca y phpmyadmin están activados. Además, puedes instalar memcached, opcache, webgrind, mongodb, tideways y versiones de php desde la 5.6 hasta la 7.3 eliminando el # que aparece delante de ellos en la sección de utilidades.

Incluso puedes añadir tu propio software que quieras instalar. Tendrías que modificar el archivo vvv-custom.yml con algo como

utilities:
  core:
    - tls-ca
    - phpmyadmin
  java:
    - java7
utility-sources:
  java:
    repo: https://github.com/example/java-utilities.git
    branch: master

Añadirás una nueva sección, java aquí, por ejemplo. El código para la instalación vendrá de un repositorio git. Tu repositorio git debería tener una estructura similar a la siguiente

java7/
    provision.sh

El archivo provision.sh contendrá el código necesario para instalar java en tu máquina virtual. El nombre de la carpeta debe coincidir con el nombre que utilizaste anteriormente en el archivo vvv-custom.yml.

Conclusión

Con esto concluye nuestro tutorial sobre cómo configurar un entorno de desarrollo local de WordPress con Vagrant. Haznos saber si tienes alguna pregunta.