Configurando un buen entorno de desarrollo de aplicaciones web. El ejemplo de moneytrackin
moneytrackin’ es una aplicación programada en el extensamente usado LAMP (Linux + Apache + MySQL + PHP)
En éste post comentaremos un poco la arquitectura de la aplicación así como las herramientas utilizadas para su desarrollo, que básicamente vienen a ser:
- Subversion para el control de versiones
- XAMPP, un instalador sencillo para las estaciones de desarrollo. Instala todo lo necesario sin esfuerzo: php5, mysql5, phpmyadmin, …
- El IDE Eclipse y su plugin para PHP. También hemos optado por utilizar la distribución EasyEclipse for PHP, que mediante una instalación automática obtendremos el eclipse con varios plugins para trabajar con código PHP.
ENTORNO DE DESARROLLO
En la misma red de la oficina tenemos un pequeño servidor de Subversion, para llevar los cambios en el código y tenerlo centralizado. Lo instalamos aprovechando un pc viejo con Windows instalado. La instalación fue bastante sencilla, la hicimos siguiendo éste manual.
Los dos programadores de la web usamos pcs portatiles también con el sistema operativo Windows (aunque los programas usados son multiplataforma y es posible usar otros SO). Usamos eclipsePHP para el código y el servidor XAMPP en local para hacer las pruebas.
EL SERVIDOR
El servidor dónde se aloja la aplicación es un servidor VPS de Rimuhosting. Virtual Private Server significa que dividen un servidor físico en varios servidores virtuales, cada uno con su sistema de ficheros, usuarios, recursos asignados (memoria/cpu). En definitiva tienes tu servidor propio con tu usuario root para administrarlo e instalar lo que quieras a muy buen precio.
De momento no tengo ninguna queja, es cierto que no he necesitado soporte aún, pero por lo que me han comentado son buenísimos. Una cosa a tener en cuenta con éstos servidores es que vienen sin nada, tienes que instalarte tú (o pedir que te lo instalen) el servidor web, php, servidor de correo y todo lo que necesites. Otro punto a favor de ellos es que si un plan se te queda pequeño puedes hacer un upgrade a otro plan pagando una pequeña cantidad.
Puedes elegir entre varias distribuciones linux, en nuestro caso nos quedamos con Debian.
ENTORNO DE PRUEBAS
Nos hemos encontrado casos dónde en local funcionaba (servidor en windows) pero en el servidor de producción no. Ésto se debe a las diferencias entre plataformas, los portings de php y sus módulos, el tema de locales para la internacionalización o el propio apache puede diferir entre plataformas, y originar fallos.
Para detectar y subsanar éstos errores hemos creado una “copia” del servidor de producción en la misma máquina, así podemos probar el código en las mismas condiciones que estarán en producción pero sin afectar en el funcionamiento del mismo.
Simplemente hemos creado un nuevo VirtualHost en el apache con la misma configuración exacta que el servidor de producción y lo hemos protegido con usuario/password (es sólo para testing propio). La dirección es http://test.moneytrackin.com/
Una vez el código ha sido probado en el servidor de test tenemos unos shellscripts que hacen la migración al entorno de producción.
ENTORNO DE PRODUCCIÓN
El entorno visible a los usuarios. Al igual que el de testing es un VPS con Debian. Se puede acceder via http://www.moneytrackin.com/ o via http seguro por https://www.moneytrackin.com
A continuación veremos como tenemos configuradas las herramientas para programar + testear.
El código sobre el que desarrollamos está en un proyecto del eclipse, por lo que los archivos .php estarán físicamente dentro del directorio workspace del eclipse. Además, eclipse añade algunos archivos con metadatos (.project, etc.). Obviamente éstos archivos no queremos que estén en el repositorio, por lo que los marcaremos con un svn:ignore (botón derecho sobre el archivo en la pestaña Navigator -> Team -> Add to svn:ignore )
Para probar en el servidor local los cambios que vamos haciendo en el código podríamos hacer que el apache apuntara al directorio del workspace donde tenemos el proyecto, pero es bastante “sucio” porque tendríamos archivos que no serían propiamente de la aplicación (archivos de metadatos de eclipse y los directorios ocultos .svn del subversion) mezclados con el código, y tendríamos que hacer un filtraje de archivos antes de subir todo al servidor.
Nosotros lo que hacemos es tener el apache apuntando al directorio C:/dev/moneytrackin que es donde tendremos únicamente todos los archivos de la aplicación. Éste esquema nos permite además tener en el repositorio archivos y directorios de documentación o información importante que queremos que estén en el subversion pero no deben interferir con lo que es la web, y tampoco deben ser subidos al servidor, ya que puede tratarse de información sensible (esquema y cambios de la base de datos, apache, etc.).
Pero la pregunta es: ¿Y cómo hacemos para reflejar los cambios hechos en el código desde eclipse al directorio del servidor web para poder probar los cambios al instante y además realizar el filtraje para poder subir todo el directorio directamente al servidor de test? Y la respuesta: Utilizando ANT.
UTILIZANDO ANT EN ECLIPSE PARA PROYECTOS WEB (PHP)
En primer lugar crearemos el archivo build.xml, el archivo XML de configuración que le dice a ANT qué es lo que tiene que hacer. Lo crearemos en el directorio raíz del proyecto marcándolo como svn:ignore :
<?xml version=”1.0″?>
<project name=”Moneytrackin” default=”init” basedir=”.”><description>Moneytrackin</description>
<target name=”init”>
<property name=”banner” value=”Deploying moneytrackin!”/>
<echo message=”${banner}”/><copy todir=”C:/dev/moneytrackin”>
<fileset dir=”C:/Program Files/eclipse/workspace/moneytrackin/”>
<include name=”**”/>
<exclude name=”**/.svn” />
<exclude name=”**/.svn/**”/>
<exclude name=”build.xml”/>
<exclude name=”.project” />
<exclude name=”.externalToolBuilders/” />
</fileset>
</copy>
</target>
A grandes rasgos lo único que hay que especificar es el directorio fuente donde están los archivos, el directorio destino donde irán y las excepciones (archivos o directorios que no se deben copiar). Una vez tengamos el script bien configurado podemos ejecutarlo clicando sobre el archivo con el botón derecho Run as -> Ant build.
Por último vamos a configurar el auto build del proyecto para que lanze automáticamente el ANT cada vez que hagamos algún cambio, de forma que podamos probar en el navegador al instante. En nuestro caso tarda unos 6-7 segundos en hacer el deploy, pero es sólo la primera vez porque ANT detecta los archivos existentes y copia sólo los que han sido modificados. Tarda aproximadamente un segundo en hacer el deploy en condiciones “normales” (el tiempo de cambiar de ventana). A continuación mostramos los pasos necesarios.
CONFIGURANDO EL AUTO-BUILD DEL PROYECTO
Clic derecho sobre el proyecto y vamos a Properties…
Vamos al apartado Builders de la ventana de propiedades y creamos uno (New…). Cuando pregunte por el tipo seleccionamos Ant build
Se nos abrirá la ventana para que eligamos el builder. Clicamos en el botón “Browse workspace”
Seleccionamos el archivo build.xml del proyecto y le damos a OK
Y por último vamos a la pestaña Targets, clicamos en el botón Set Targets… del apartado Auto Build. Se abrirá una ventanita con la acción Init del script ant preseleccionada. En principio todo está correcto, le damos a OK y ya hemos terminado.
Así es como hemos conseguido un entorno de desarrollo bastante cómodo en moneytrackin’, de momento nos está funcionando muy bien. Os animo a que probéis la aplicación si no la conocíais y también a que sigáis el blog, iremos añadiendo más posts técnicos con el tiempo.

July 15th, 2006 at 4:02 pm
Hola,
primero que todo queria felicitarlos por moneytrackin, seguro va a hacer una huella en internet, sigan asi. Segundo quiero agradecerles que comenten toda esta informacion, ahora estoy teniendo la duda sobre asp.net/mssql o php/mysql. Siempre estuve trabajando en php/mysql pero me da miedo con respecto a la escalabilidad para soportar web services… a que voy, tengo la sensacion de que microsoft esta-y estara- mucho mas fuerte en el futuro en esa area y para sitios web 2.0 (para utilizar una terminologia rapida) usar php u otras cosas puede llegar a ser una limitacion.
Agradecido por adelantado sobre su opinion sobre esto, sera valorada para que pueda aprender mucho mas.
un abrazo y saludos,
sebastian
July 17th, 2006 at 5:03 pm
Hola Sebastian, yo he trabajado con las tecnologías de microsoft que comentas (asp.net/mssql) y es cierto que da facilidades para la programación de webservices (de todas maneras, implementarlos en php no es nada del otro mundo).
Por la parte de la escalabilidad, mi opinión es que los dos sistemas permiten realizar aplicaciones de alto rendimiento (fíjate por ejemplo flickr, que usa php/mysql), simplemente se necesita una buena implementación y una buena configuración de los servidores.
Gracias
October 20th, 2006 at 4:45 pm
Muy buen post, muy instructivo.
Una pregunta sobre vuestra arquitectura: utilizáis alguna librería de templates? (pej Smarty)
He visto que tenéis la aplicación en unos cuantos idiomas. Qué sistema utilizáis para el multi-idioma?
La verdad es que la aplicación está muy bien, muy lograda, enhorabuena y mucho ánimo!!
October 23rd, 2006 at 2:53 pm
Gracias por tus comentarios Kiani.
En moneytrackin’ no usamos ninguna librería de templates.
Para el sistema de internacionalización utilizamos las herramientas GNU gettext dentro de PHP, y el editor poEdit para realizar las traducciones.
June 6th, 2007 at 8:59 pm
Saludos, excelente trabajo me ha ayudado mucho, pero tengo una pregunta como hacen para publicar los cambios desde SVN al directorio WWW de Apache, en mi caso uso CVS y tengo luego que exportar el proyecto desde Eclipse a un directorio para luego copiarlos en el servidor, de que forma se automatizar ese proceso de manera eficiente. Gracias.