Desarrollo y despliegue de WordPress con MAMP, Git y Dropbox

Hoy en día, para ser un desarrollador de WordPress independiente, a menudo es necesario desarrollar simultáneamente varios sitios de WordPress para diferentes clientes. Así es cómo.

Esto requiere que adoptes lo siguiente:

  • Un entorno de desarrollo local flexible que le permite agregar fácilmente un nuevo sitio, con un moderno Sistema de control de versiones y que le permite desarrollar tanto en su computadora de escritorio como en su computadora portátil.
  • Un sistema de despliegue confiable y seguro para el servidor remoto..

Con esta configuración puedes fácilmente:

  • Desarrolle y pruebe localmente su nuevo plugin o tema de forma segura y desplácelo al servidor de producción;
  • actualice localmente los archivos principales de WordPress o actualice los complementos / temas ya instalados de manera segura, verifique que nada rompa el sitio e implemente estos cambios en el servidor de producción;
  • realice cambios rápidos en algunos archivos en el servidor remoto y luego recupérelos en el entorno local.

Antes de que comencemos

En este tutorial nos referimos a Mac OS X, pero puede adaptarlo fácilmente a cualquier otro sistema operativo. Además, asumimos que el servidor remoto ya tiene Git instalado y el acceso SSH configurado con autenticación de clave pública (las instalaciones de SSH y Git están fuera del alcance de este tutorial).

El escenario que veremos consiste en un Ambiente local que permite el desarrollo de un sitio de WordPress con complementos y temas y una Servidor remoto que albergará el sitio de "producción" de WordPress. En el entorno local utilizaremos un Escritorio computadora y un Cuaderno computadora. En ambas computadoras, configuraremos MAMP, Dropbox y Git para que pueda trabajar en su escritorio cuando esté en la oficina y en su computadora portátil cuando no esté en la oficina y todos los cambios se sincronizarán.

Usaremos Dropbox para sincronizar archivos y bases de datos entre Desktop y Notebook, y usaremos Git para rastrear los cambios localmente y para implementarlos en el servidor remoto..

Por simplicidad definimos www.site.dev como el sitio de desarrollo en el entorno local y www.site.com como el sitio de producción en el servidor remoto.


Lo que haremos

En el entorno local:

  • crear una estructura de directorios básica en Dropbox;
  • instale y configure MAMP (tanto en su escritorio como en su portátil) para trabajar en un entorno de Dropbox;
  • configure y ejecute sitios de desarrollo de WordPress tanto en su escritorio como en su computadora portátil;

En el servidor remoto:

  • configure Git, configure el repositorio remoto y el enlace necesario;
  • configurar MySQL para el sitio de producción de WordPress;

En el entorno local:

  • configurar Git, configurar el repositorio local;
  • modifique la configuración de WordPress para administrar la conexión de base de datos local / remota;
  • Realice la confirmación inicial y la primera implementación en el servidor remoto..

Ejemplos típicos de flujo de trabajo:

  • desarrollo de tema / plugin;
  • Gestión de WordPress;
  • reconozca los cambios "urgentes sobre la marcha" en el servidor de producción y colóquelos en el entorno local;

Que necesitas

  • En el entorno local:
    • Una cuenta de Dropbox, un cliente de Dropbox instalado tanto en su escritorio como en su computadora portátil (consulte las instrucciones de instalación en el sitio web de Dropbox);
    • MAMP, puedes obtenerlo desde aquí;
    • Tu editor de texto favorito;
    • Git (cómo instalar Git localmente se trata en el libro Pro Git);
  • En el servidor remoto:
    • PHP y MySQL según los requisitos de WordPress;
    • Git instalado (ver aquí);
    • Una cuenta con acceso SSH y autenticación de clave pública;

Paso 1 Crear Estructura de Directorio en Dropbox

Descargue e instale Dropbox en su escritorio y su computadora portátil (consulte aquí para obtener instrucciones). Usa la misma cuenta en ambas computadoras.

En la carpeta de Dropbox en el escritorio, cree la siguiente estructura de directorio:

  • Dropbox
    • Desarrollo
      • conf
      • db
      • troncos
      • vhost

Compruebe que la misma estructura de directorios se propaga en Notebook.


Paso 2 Instalar y configurar MAMP

MAMP es un acrónimo que significa: Mac, Apache, MySQL y PHP, es una aplicación que instala un entorno de servidor local en su Mac..

Su instalación es muy fácil: descargue MAMP desde aquí, descomprima el archivo y haga doble clic en él, luego siga las instrucciones. Haga esto tanto en el escritorio como en el portátil. No inicie MAMP todavía: antes de hacer esto, debe mover la base de datos y modificar la configuración predeterminada.

Mueve la carpeta de la base de datos

En Escritorio mueva la carpeta de la base de datos de la ubicación estándar de MAMP al directorio db en Dropbox, para hacer esto, abra un Terminal y use los siguientes comandos:

cd / Aplicaciones / MAMP / db mv * ~ / Dropbox / Desarrollo / db /

En Cuaderno abra una Terminal y elimine la carpeta de la base de datos usando el siguiente comando:

cd / Aplicaciones / MAMP rm -rf ./db

Por último en ambos Escritorio y Cuaderno cree un enlace simbólico de MAMP a Dropbox con el siguiente comando:

ln -s ~ / Dropbox / Desarrollo / db / Aplicaciones / MAMP / db

Ahora el enlace simbólico / Aplicaciones / MAMP / db apunta a la carpeta compartida de Dropbox ~ / Dropbox / Desarrollo / db que contiene las bases de datos MAMP. No inicie MAMP todavía: primero debemos hacer un cambio en la configuración.

Cambiar puertos MAMP

MAMP usa puertos personalizados para las instancias de servidor Apache y MySQL: Apache se ejecuta en el puerto 8888, MySQL se ejecuta en el puerto 8889. Puede mantener esta configuración o, como sugerimos, cambiarla para usar puertos estándar: 80 para Apache y 3306 para MySQL.

Para restaurar los puertos estándar, inicie MAMP solo en tu escritorio , haga clic en "Preferencias ...", luego en "Puertos", haga clic en "Establecer los puertos predeterminados de Apache y MySQL" y finalmente haga clic en "Aceptar": MAMP guarda la nueva configuración y se reinicia automáticamente.

Ahora, en su escritorio, abra su navegador favorito y vaya a http: // localhost / MAMP /: debería ver la página de inicio de MAMP.

Si no ve la página de inicio de MAMP, probablemente tenga el uso compartido de la Web habilitado: abra las Preferencias del sistema, haga clic en Compartir y desactive Compartir en la Web.

No se preocupe si Mac OS X requiere una contraseña al iniciar MAMP: hemos configurado Apache para que se ejecute en el puerto 80, que es un puerto privilegiado y esto requiere una contraseña de administrador.

Porque en esta configuración MAMP no puede ejecutarse simultáneamente en su escritorio y en su computadora portátil, salga de MAMP en el escritorio, inícielo en Notebook y configúrelo de la misma manera. Cuando termines deja de MAMP.

Cambiar MAMP - Configuración de Apache

La configuración de MAMP Apache se almacena en /Aplicaciones/MAMP/conf/apache/httpd.conf. Edite este archivo con su editor de texto favorito y agregue las siguientes líneas (haga esto tanto en su Escritorio y tu Cuaderno):

# Incluye la configuración compartida en la carpeta de Dropbox. Incluya /Users/YOURUSERNAME/Dropbox/Development/conf/local-development.conf

Reemplazar SU NOMBRE DE USUARIO con su nombre de usuario de Mac OS X (si no lo conoce, abra Terminal y ejecute quién soy; le proporcionará su nombre de usuario).

Esta declaración le indica a Apache que cargue un archivo de configuración adicional de su carpeta de Dropbox (sincronizado entre el escritorio y el portátil). De esta manera podemos usarlo como el archivo de configuración del entorno local.

Configurar Apache Virtual Host en MAMP

Apache Virtual Host es una buena característica que le permite ejecutar más de un sitio web (como www.site1.com y www.site2.com) en un solo servidor. Los hosts virtuales pueden estar "basados ​​en IP", lo que significa que tiene una dirección IP diferente para cada sitio web, o "basado en el nombre", lo que significa que tiene múltiples nombres ejecutándose en una dirección IP. La última es la característica que usaremos (consulte aquí para obtener más información).

Con su editor de texto favorito, abra el archivo de configuración del entorno local /Users/YOURUSERNAME/Dropbox/Development/conf/local-development.conf e inserta las siguientes líneas:

 AllowOverride All  # # Hosted Virtual Nombrado LogFormat "% V% h% l% u% t \"% r \ "% s% b" vcommon CustomLog /Users/YOURUSERNAME/Dropbox/Development/logs/access.log vcommon ErrorLog / Users / YOURUSERNAME / Dropbox / Development / logs / errors.log UseCanonicalName Off VirtualDocumentRoot / Users / YOURUSERNAME / Dropbox / Development / vhosts /% 0

La cuerda "% 0"lanza el hechizo: cuando el servidor Apache recibe una solicitud para el dominio www.site.dev busca un directorio llamado www.site.dev en / Users / YOURUSERNAME / Dropbox / Development / vhosts /, y si se encuentra sirve archivos de ella.

Las otras instrucciones le indican a Apache dónde escribir los errores y acceder a los archivos de registro..


Paso 3 Configurar WordPress

Ahora estamos listos para configurar el sitio de desarrollo de WordPress www.site.dev. Para hacer esto tenemos que crear un www.site.dev directorio (en tu escritorio).

y tenemos que editar (tanto en escritorio como en portátil) / etc / hosts archivo para asignar el nombre de host www.site.dev a la dirección IP localhost. Con tu editor de texto favorito abre el archivo / etc / hosts y agregue las siguientes líneas al final del archivo (Mac OS X requiere su contraseña para modificar este archivo de sistema):

# desarrollo local 127.0.0.1 www.site.dev

En esta etapa, puede ser útil hacer algunas comprobaciones: abra el Terminal y ejecute el siguiente comando:

ping -c 3 www.site.dev

Deberías tener una respuesta similar a esto:

Ahora es el momento de configurar WordPress: descargue el paquete de WordPress desde aquí y descomprímalo en una carpeta temporal. Mueve todo el contenido de la carpeta temporal dentro /Users/YOURUSERNAME/Dropbox/Development/vhosts/www.site.dev/.

En su escritorio, inicie MAMP y abra su navegador en http: // localhost / MAMP /. Haga clic en la pestaña phpMyAdmin y cree una nueva base de datos llamada site_dev:

Abra su navegador en www.site.dev y complete la instalación de WordPress usando estos valores:

  • Nombre de la base de datos: site_dev
  • Nombre de usuario: root
  • Contraseña: root
  • Base de datos host: localhost
  • Prefijo de tabla: wp_

Detenga MAMP en el escritorio, espere la sincronización de Dropbox e inícielo en Notebook. Abra su Notebook Browser en www.site.dev: WordPress ya está configurado!

Al final del Paso 3, tenemos un entorno de desarrollo de WordPress local basado en MAMP y sincronizado entre Desktop y Notebook a través de Dropbox, ahora es el momento de configurar el servidor remoto.


Paso 4 Configurar Git en el servidor remoto

Git es un sistema de control de versiones distribuidas, que registra los cambios en un archivo o conjunto de archivos a lo largo del tiempo y permite enviar cambios a un servidor remoto (aquí se incluye una descripción más detallada). En este tutorial, asumimos que Git ya está instalado en su servidor. En consecuencia, procedemos con la configuración..

Primero tienes que iniciar sesión en el servidor. Suponemos que tiene una cuenta con acceso SSH y autenticación de clave pública. De esta manera, no tendrá que insertar una contraseña cada vez que inicie sesión. Abra una ventana de terminal y conéctese al servidor:

ssh tu nombre de [email protected]

Configure algunos valores predeterminados de Git sobre el usuario y el correo electrónico para evitar que Git los solicite siempre:

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

Configuración y inicializar un repositorio vacío:

mkdir site.git cd site.git git init --bare

Para permitir la implementación desde el sitio de desarrollo hasta el de producción, debe configurar un Gancho Git (Yo uso Vi como mi editor de texto para el servidor remoto):

ganchos cd vi post-recepción

Luego inserte las siguientes líneas:

#! / bin / bash # docroot = "/ home / yourusername / www" mientras leía oldrev newrev ref do branch = "echo $ ref | cut -d / -f3" si ["master" == "$ branch"]; entonces git --work-tree = $ docroot checkout -f $ branch fi hecho

Establecer la variable docroot al servidor web DocumentRoot y luego hacer después de recibir ejecutable:

chmod 755 después de recibir

Este gancho se invoca al final del proceso de envío de cambios desde un cliente (computadora de escritorio o portátil) al servidor remoto. Realiza la implementación en el directorio Web Server DocumentRoot de producción (consulte aquí para obtener más información acerca de Git Hooks).

Los comandos de Git usan algunos variables ambientales; Necesitamos configurar dos de ellos: GIT_DIR y GIT_WORK_TREE. El primero especifica la ruta al repositorio, el segundo la ruta al árbol de trabajo (el DocumentRoot). El shell predeterminado en mi servidor remoto es Bash, así que los agrego al archivo .bash_profile.

cd ~ vi .bash_profile

Agregue las siguientes líneas al final del archivo:

# GIT exportar GIT_DIR = ~ / repo.git exportar GIT_WORK_TREE = ~ / www

Paso 5: Configuración de MySQL en el servidor remoto

En el servidor remoto, todavía tiene que crear una base de datos en MySQL: para hacer esto, puede seguir las instrucciones detalladas de instalación en el códice de WordPress. Mi servidor remoto tiene cPanel como panel de control de hosting, así que sigo estas instrucciones.


Paso 6: Configuración de Git en el entorno local

Instale Git en Mac OS X (instrucciones más detalladas en el libro Pro Git): descargue el instalador desde la página de Google Code, haga doble clic en el archivo dmg, luego en pkg y siga las instrucciones. Haga esto tanto en el escritorio como en el portátil..

Ahora está listo para inicializar un repositorio Git en el entorno local. Para hacer esto, abra la Terminal (en su escritorio o en su computadora portátil) y use los siguientes comandos:

cd ~ / Dropbox / Development / vhost / www.site.dev git init .

Debería ver algo como esto:

Para verificar el estado del repositorio Git usa este comando:

estado de git

La salida debería ser así:

Git le está diciendo que todos estos archivos y directorios no se rastrean en el repositorio y sugiere utilizar git añadir comando para rastrearlos.

Antes de hacer esto necesitas hacer algunos cambios en la configuración de Git. Debemos decirle a Git qué archivos debe rastrear y cuáles no. Para hacer esto usa el .gitignore expediente.

El archivo .gitignore

Este archivo especifica los archivos sin seguimiento que Git debe ignorar (consulte aquí para obtener más detalles). El comando es simple, vamos a hacer un ejemplo para entender cómo funciona:

# ignore Mac OS X Desktop Service Store .DS_Store # ignore my-test-dir directory y todos los subdirectorios my-test-dir / #ignore todos los archivos .txt * .txt

Entonces crea el archivo ~ / Dropbox / Desarrollo / vhost / www.site.dev / .gitignore Y añada las siguientes líneas:

# ignorar Tienda de servicios de escritorio de Mac OS X.DS_Store # ignorar debug.log wp-content / debug.log

Por el momento, esto es todo lo que necesitas hacer. Más adelante añadiremos otros archivos y directorios..


Paso 7 Modificar la configuración de WordPress para administrar conexiones de bases de datos locales y remotas

WordPress en un entorno local utiliza DB de MAMP y su archivo de configuración wp-config.php refleja esta configuración (nombre de usuario y contraseña de MAMP MySQL estándar):

// ** Configuración de MySQL: puede obtener esta información de su servidor web ** // / ** El nombre de la base de datos para WordPress * / define ('DB_NAME', 'site_dev'); / ** Nombre de usuario de la base de datos MySQL * / define ('DB_USER', 'root'); / ** Contraseña de la base de datos MySQL * / define ('DB_PASSWORD', 'root'); / ** Nombre de host MySQL * / define ('DB_HOST', 'localhost');

Esto funciona en un entorno local, pero ¿qué sucede si lo implementamos en el servidor remoto? Obviamente no podrá conectarse a la base de datos porque DB_NAME, DB_USER, DB_PASSWORD y probablemente DB_HOST estan equivocados.

La solución viene del artículo de Mark Jaquith: modificar el wp-config.php archivo para que la configuración para el entorno local se cargue desde otro archivo y ese archivo no sea seguido por git. Para hacer esto abre wp-config.php archiva y sustituye las líneas anteriores con estas líneas:

if (file_exists (dirname (__FILE__). '/local-config.php')) include (dirname (__FILE__). '/local-config.php');  else define ('DB_NAME', 'YOURDBNAME'); define ('DB_USER', 'YOURDBUSER'); define ('DB_PASSWORD', 'YOURDBPASSWORD'); define ('DB_HOST', 'YOURDBHOSTNAME'); 

Reemplazar YOURDBNAME, YOURDBUSER, Su contraseña y YOURDBHOSTNAME con los valores que definiste en el paso 5.

Crear el ~ / Dropbox / Desarrollo / vhost / www.site.dev / local-config.php Archivo y poner las definiciones del entorno local allí:

define ('DB_NAME', 'site_dev'); define ('DB_USER', 'root'); define ('DB_PASSWORD', 'root'); define ('DB_HOST', 'localhost');

Ahora tenemos que añadir local-config.php a .gitignore para que Git no lo rastree:

# ignorar Tienda de servicio de escritorio de Mac OS X.DS_Store # ignorar debug.log wp-content / debug.log # ignorar local-config.php local-config.php

Bien, ahora estamos listos para hacer el primer commit..


Paso 8 Confirmar cambios en el entorno local y presionarlos en el servidor remoto

Para confirmar los cambios en el repositorio Git en el entorno local, ingrese estos comandos:

cd ~ / Dropbox / Development / vhost / www.site.dev / git add. git commit -m "Importación inicial"

El primer comando Git rastrea todos los archivos y directorios en ~ / Dropbox / Desarrollo / vhost / www.site.dev / excepto que en .gitignore, El segundo los confirma a todos en el repositorio de Git..

Es hora de empujar WordPress en el servidor remoto, pero primero tenemos que configurar el repositorio remoto de Git:

git remote add website ssh: //[email protected]/home/yourusername/site.git

Este comando le dice a Git que hay un repositorio remoto llamado sitio web, alojado en el servidor www.site.com accesible a través de una conexión SSH.

Finalmente el primer despliegue en servidor remoto:

git push web master

La salida del comando debe ser similar a la siguiente:

Ahora puedes apuntar tu navegador a www.site.com y ver el sitio de WordPress en el servidor remoto.


Algunos ejemplos de flujos de trabajo típicos

Desarrollo de Temas / Complementos

Como ejemplo de desarrollo de tema / complemento, podemos crear en el entorno local un tema secundario de Twenty Eleven e implementarlo en el servidor remoto..

Para obtener instrucciones detalladas sobre cómo crear un tema secundario, puedes leer este artículo en Wptuts +. Básicamente tenemos que crear un directorio que contenga dos archivos: style.css y funciones.php (este último es opcional).

Así que en el escritorio (o en el cuaderno) crea el directorio ~ / Dropbox / Desarrollo / vhost / www.site.dev / wp-content / themes / my-twentyeleven-child, luego crea un archivo llamado style.css Dentro de esta carpeta y agregue las siguientes líneas:

/ * Nombre del tema: My Twenty Eleven Child URI de tema: http: //www.site.com/ Descripción: Tema de niño para el tema de Twenty Eleven Autor: Your Name Autor URI: http: //your-site.com/ Plantilla: Veintiuna versión: 0.1 * / @import url ("… /twentyeleven/style.css");

También puede agregar algunos cambios de CSS en la @importar línea, por ejemplo puedes cambiar el fondo del cuerpo:

cuerpo fondo: # D51717;

Luego crea el funciones.php Archivo y añadir las siguientes líneas:

'. "\norte";  add_action ('wp_head', 'favicon_link'); ?>

Este simple archivo de función hace una cosa: agrega un enlace de favicon al elemento principal de las páginas HTML.

Ahora nuestro tema hijo está completo y debemos rastrearlo en el repositorio Git:

cd ~ / Dropbox / Desarrollo / vhost / www.site.dev / git add wp-content / theme / my-twentyeleven-child /

Entonces tenemos que cometer los cambios:

git commit -m "Agregué mi tema de Veinte once niños"

De esta manera, puede continuar el desarrollo del tema secundario agregando archivos, cambiando el código y confirmando todos estos cambios en el repositorio. Cuando su tema está listo para el servidor de producción, simplemente tiene que emitir el git push mando:

git push web master

De esta manera, el tema secundario se insertará en el servidor remoto, listo para ser utilizado.

Si desarrolla un complemento, siga los mismos pasos: realice un seguimiento del directorio del complemento y confirme los cambios en el repositorio. Cuando su complemento esté listo, póngalo en Servidor Remoto.

Gestión de WordPress

De manera similar, podemos administrar la instalación del complemento de WordPress o la actualización de WordPress. Supongamos que queremos probar un nuevo complemento y queremos asegurarnos de que no interrumpa nuestro sitio de producción..

Primero lo instalamos en el entorno local usando el Panel de administración de WordPress (consulte aquí para obtener más información), luego tenemos que rastrearlo y agregarlo al repositorio Git (haga esto en su escritorio o en su computadora portátil):

cd ~ / Dropbox / Development / vhost / www.site.dev / git agregar wp-content / plugins / plugin-to-try / git commit -m "Agregar el Plugin para probar"

Si el complemento funciona, puede implementarlo en un servidor remoto usando:

git push web master

y habilitarlo usando el Panel de Administración de WordPress.

Si el complemento no funciona, puede desinstalarlo mediante el Panel de administración de WordPress, luego puede eliminarlo de los archivos rastreados y confirmar los cambios:

git rm wp-content / plugins / plugin-to-try / git commit -m "Se eliminó el plugin para probar"

Un pequeño consejo: si añades un directorio de plugins a .gitignore archivo (antes de confirmar) el complemento permanecerá solo en el entorno local, pero no se insertará en el servidor remoto. Esto podría ser útil para complementos como Debug Bar que se usan en el desarrollo local pero que no tienen que ser transferidos a un sitio de producción.

Realice cambios rápidos en el servidor de producción y tire de ellos en el entorno local

Ok, sabemos, los cambios rápidos en el servidor de producción no son un buen hábito, de hecho son un mal hábito, pero a veces son inevitables. Suponiendo que cambiamos el DB_PASSWORD en el servidor remoto wp-config.php archivo y ahora queremos reconocer ese cambio en nuestro entorno local wp-config.php. Para hacer esto primero, conéctese al servidor remoto a través de SSH y use el siguiente comando:

git commit -m "cambiar DB_PASSWORD en wp-config.php"

Luego extraiga los cambios del repositorio remoto usando el siguiente comando en el escritorio:

git pull website master

Si lees el wp-config.php verás el nuevo DB_PASSWORD.


Conclusión

En este tutorial hemos visto un escenario compuesto por un entorno local y un servidor remoto que aloja el desarrollo y el sitio de producción para www.site.com, pero puede repetir fácilmente esta configuración para www.mynewcustomer.com, para www.myothernewnewcustomer.com y así.

MAMP, Dropbox y Git forman un equipo ganador para lidiar con el desarrollo y la implementación de WordPress, representan un entorno de desarrollo flexible que permite agregar fácilmente un nuevo sitio, desarrollarlo donde sea que esté y desplegarlo de manera confiable en el servidor de producción..

Si trabaja con WordPress con regularidad, consulte la selección de excelentes utilidades de WordPress en Envato Market. Desde complementos de seguridad hasta personalizadores iFrame, seguramente habrá algo allí que puede ayudarlo..

Utilidades de WordPress en Envato Market