Configura un Entorno de Desarrollo Local de WordPress con Vagrant

Si desarrollas con WordPress, es preferible configurar un entorno local donde tengas instalado un servidor, una herramienta de base de datos y algunos sitios de WordPress junto con otras herramientas que necesites. Esto está bien si solo trabajas en unos pocos proyectos. Pero cuando se multiplican, ocurren problemas. Y también los dolores de cabeza de mantener múltiples entornos, porque el cliente tiene una configuración diferente a la tuya.

Para solucionar este problema, podemos usar lo que llamamos Vagrant. Vagrant es una herramienta para trabajar con entornos virtuales. Proporciona una manera fácil de configurar un entorno de desarrollo local con unos pocos comandos, y puedes replicar una configuración completa tantas veces como desees, 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 en base a estas reglas. Vagrant necesita dos archivos para esto: Vagrantfile, que le dice a Vagrant qué tipo de hardware necesita la máquina virtual, y un archivo de implementación, que le dice a Vagrant qué hacer en la máquina virtual.

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

Instalando VirtualBox

Dirígete a la página de descarga de Virtualbox y descarga un archivo binario correspondiente a tu sistema operativo huésped. (El sistema operativo huésped es el sistema operativo desde donde estarás ejecutando tu entorno de desarrollo.) Instala Virtualbox.

Instalando Vagrant

Descarga el binario correspondiente a tu sistema operativo desde la página de descarga de Vagrant e instálalo.

Para probar si se instaló correctamente, escribe el siguiente comando en la línea de comandos de tu sistema operativo.

$ vagrant -v

Instalando el Plugin Vagrant Hosts Updater

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

$ vagrant plugin install vagrant-hostsupdater

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

Instalando Git

Linux

También necesitaremos control de versiones de Git para este tutorial. Si no lo tienes instalado, instálalo usando 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

Verifica la versión de Git instalada a través del siguiente comando

$ git --version

Verás algo como

$ git version 2.20.1

Necesitas configurar Git a través de los siguientes comandos.

$ git config --global user.name "Tu Nombre"   
$ git config --global user.email "[email protected]"

Windows

Para instalar Git en Windows, dirígete a la página de descarga de Git e instala el binario.

Mac OS

Si tienes homebrew instalado, puedes instalar Git a través del siguiente comando.

$ brew install git

o puedes descargar un paquete binario de la página de descarga de Git e instalarlo.

Instalar Varying Vagrant Vagrants

En lugar de crear una configuración de Vagrant desde cero, utilizaremos Varying Vagrants Vagrant (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 dará múltiples instalaciones de WordPress por defecto, una de ellas siendo la última versión de vanguardia para ayudarte a experimentar.

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

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

Aquí estamos clonando la rama master del repositorio en el sistema. Si deseas actualizaciones más rápidas, puedes usar la rama develop.

Iniciando VVV

Cambia al directorio donde clonaste VVV.

$ cd vvv

Lanza el entorno de Vagrant que instalará la máquina virtual y configurará todo.

$ vagrant up

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

Nota para Usuarios de Windows 8/10

Si estás en Windows, puedes recibir el siguiente error

==> default: Booting VM...   
Hubo un error al ejecutar `VBoxManage`, un CLI utilizado por Vagrant   
para controlar VirtualBox. El comando y stderr se muestran a continuación.   
   
Comando: ["startvm", "1fe83aa1-2f23-4ddd-ad77-b7e7e00aabe6", "--type", "headless"]   
   
Stderr: VBoxManage.exe: error: No se pudo abrir/crear la red interna 'HostInterfaceNetworking-VirtualBox Host-Only   
Ethernet Adapter #3' (VERR_INTNET_FLT_IF_NOT_FOUND).   
VBoxManage.exe: error: No se pudo adjuntar el LUN de red (VERR_INTNET_FLT_IF_NOT_FOUND)   
VBoxManage.exe: error: Detalles: código E_FAIL (0x80004005), componente ConsoleWrap, interfaz IConsole

Nota el Adaptador mencionado aquí:

VirtualBox Host-Only Ethernet Adapter #3

Abre el Panel de Control >> Centro de Redes y Compartición. Ahora haz clic en Cambiar Configuración del Adaptador. Haz clic derecho en el adaptador cuyo Nombre o el Nombre del Dispositivo coincida con VirtualBox Host-Only Ethernet Adapter # 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 en mi computadora los controladores. Ahora elige Déjame elegir de una lista de controladores disponibles en mi computadora. Selecciona la opción que obtienes y haz clic en Siguiente. Haz clic en Cerrar para finalizar la actualización. Ahora vuelve a tu Terminal/Powershell/Ventana de Comando y repite el comando vagrant up. Debería funcionar bien esta vez.

Una vez que esto esté terminado, puedes visitar tu panel de VVV en la URL http://vvv.test.

VVV viene con dos instalaciones de WordPress por defecto - http://one.wordpress.test y http://two.wordpress.test Ambos sitios tienen los mismos detalles de inicio de sesión, 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 root de MySQL son root como tanto el nombre de usuario como la contraseña. Y las credenciales del usuario root de la VM son root como nombre de usuario y vagrant como la 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 habilitarla, abre vvv-custom.yml y cambia el valor de skip_provisioning bajo wordpress-trunk a false y luego reprovisiona la VM usando el comando

$ vagrant reload --provision

Hay otra instalación de WordPress sin URL etiquetada como wordpress-meta-environment. Esta instalación creará un entorno útil para contribuciones al equipo meta de WordPress, por ejemplo, WordCamps, .org, etc. Para habilitar esta instalación, agrega 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 reprovisiona la VM.

$ vagrant reload --provision

Agregar un Nuevo Sitio

Si deseas agregar otro sitio a la VM, necesitarás editar el archivo vvv-custom.yml que puedes encontrar en el directorio vvv. Si no está allí, simplemente copia vvv-config.yml y créalo. Este es un proceso único y no necesitarás hacerlo de nuevo. Siempre haz tus cambios en vvv-custom.yml porque vvv-config.yml se sobrescribe cuando actualizas VVV.

Agrega el siguiente código bajo la sección de sitios a vvv-custom.yml para agregar un nuevo sitio.

newsite:
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template
    description: "Una instalación multisite de WordPress en subdirectorio"  
    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

repo variable se refiere a un repositorio de Github predefinido que contiene información sobre cómo configurar un nuevo sitio de WordPress en la VM. Por ahora, estamos usando un repositorio mantenido por VVV.

description variable es autoexplicativa.

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.

branch variable le dice a Vagrant que revise la rama master del repositorio en el ejemplo aquí.

nginx_upstream se utiliza para establecer dónde Nginx pasa las solicitudes y generalmente se usa 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 7.2. Puedes usar php71 para cambiarlo a PHP 7.1 o php56 para cambiarlo a PHP 5.6.

skip_provisioning está configurado en false, lo que significa que necesitamos incluir este sitio en la VM.

hosts variable se utiliza para establecer la URL que necesitaremos para acceder al sitio.

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

wp_type variable decide si tu instalación será única, multisite con dominios o multisite con subdirectorio. wp_type toma cuatro valores: single, subdomain, subdirectory y none. Con la instalación de subdominio, puedes definir múltiples hosts para tu instalación multisite en el siguiente formato

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

Puedes agregar una variable más bajo la sección custom que es wp_version. Puedes configurarlo en nightly si deseas 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, site_title variable te permite establecer el Título de tu sitio WP.

custom:
    site_title: Mi Asombroso Sitio de Desarrollo

Esto debería cubrir todas las variables y opciones que necesitarías para agregar tu propio sitio web en VVV. Después de cambiar el archivo vvv-custom.yml, simplemente ejecuta el siguiente comando para hacer que tu nuevo sitio funcione.

$ vagrant reload --provision

Agregar un Sitio Existente

Hasta ahora, aprendimos cómo agregar un sitio completamente nuevo a VVV. Pero, ¿qué pasa si ya estás trabajando en un sitio y deseas agregarlo bajo VVV? Veamos cómo podemos hacer eso.

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

howtoforge:
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template
    description: "Un sitio de WordPress"  
    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 necesitamos hacer es convertirlo en nuestra instalación existente. Para esto, necesitamos copiar los archivos de nuestra instalación de WordPress existente a la carpeta local, es decir, /home/user/vvv/www/newsite

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

Ahora necesitamos copiar la base de datos. Una forma sencilla de hacerlo es exportar tu base de datos existente como un archivo .sql, copiar ese archivo a nuestro directorio del blog y volver a importar la base de datos accediendo por SSH a nuestra VM.

Primero, inicia sesión en mysql en la línea de comandos de tu sistema local y usa 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 provisionar la VM nuevamente.

$ vagrant reload --provision

Accede por SSH a tu VM.

$ vagrant ssh

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

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

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

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

Habilitar SSL

Las instalaciones en localhost generalmente no están aseguradas. Y instalar 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 SSL habilitado en todas tus instalaciones de WordPress. Simplemente comienza a usar https con tus sitios. La primera vez, tu navegador se quejará sobre un certificado inválido, pero agrégalo como una excepción y debería estar bien a partir de ahora.

Actualizando WordPress

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

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

Actualizando VVV

El primer paso es detener la máquina de Vagrant.

$ vagrant halt

Ahora asegúrate de que tu vagrant y Virtualbox estén actualizados. Si no, descárgalos nuevamente e instálalos.

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

$ vagrant box update

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

$ git pull

Reprovisiona la caja nuevamente para completar la actualización.

$ vagrant up --provision

Herramientas Adicionales

VVV incluye varias utilidades que puedes instalar. Las encontrarás listadas en la sección de utilidades en tu archivo vvv-custom.yml. Por defecto, tls-ca y phpmyadmin están habilitados. Puedes instalar además memcached, opcache, webgrind, mongodb, tideways y versiones de php desde 5.6 hasta 7.3 eliminando el # frente a ellos en la sección de utilidades.

Incluso puedes agregar tu propio software que desees instalar. Necesitarías 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

Agregará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 estar estructurado de la siguiente manera

java7/
    provision.sh

El archivo provision.sh contendrá el código necesario para instalar java en tu VM. El nombre de la carpeta debe coincidir con el nombre que usaste arriba en el archivo vvv-custom.yml.

Conclusión

Eso concluye nuestro tutorial sobre cómo configurar un entorno de desarrollo local de WordPress con Vagrant. Háganos saber si tiene alguna pregunta.