En nuestra anterior entrada instalamos en nuestro equipo Ubuntu junto a Windows 10. Esto es importante para nosotros en eHidra puesto que es el sistema operativo que utilizamos para desarrollar. En este post vamos a explicar el siguiente paso, que es preparar un entorno de desarrollo, con las herramientas que utilizamos a diario. ¿Quieres saber más? ¡Sigue leyendo nuestro post!
El servidor
$ sudo apt-get install apache2
Cuando nos pregunte si aceptamos, decimos que sí (y) y el solo instalará todo lo necesario.
Esto instala Apache2 como un servicio, y automáticamente lo arranca. Lo podemos comprobar accediendo a la dirección local de nuestra máquina.
Como Apache escucha por defecto en el puerto 80, no es necesario especificarlo. Con escribir localhost en la barra de dirección de nuestro navegador accede directamente a la página por defecto, que, en este caso, será la propia del servidor.
Ahora vamos a configurar este servidor, a la vez que vemos y explicamos el funcionamiento. Lo primero que debemos saber es que la configuración de Apache parte del fichero: /etc/apache/apache2.conf. En el se configuran los aspectos generales, y al final, si nos fijamos, se incluye las siguientes lineas:
# Include generic snippets of statements
IncludeOptional conf-enabled/*.conf
# Include the virtual host configurations:
IncludeOptional sites-enabled/*.conf
Esta línea lo que hace es que se incluyan las configuraciones de todos los ficheros que se encuentren dentro de los subdirectorios conf-enabled y sites-enabled. En nuestro caso, no añadiremos configuración extra, pero sí usaremos la configuración de los sites. Esto lo haremos porque suele pasar que después de un tiempo desarrollando, cuando nuestra web se aloja en un servidor de Internet, fallan algunos recursos y accesos, debido a que cambian las url por la configuración del servidor. Por ello, Usaremos esta característica para poder configurar nuestros distintos entornos. Esto consistirá en que crearemos un dominio para cada proyecto que tengamos, de manera que cuando este cambie al del servidor vivo, no cambie el funcionamiento también.
Dominio local
Para ello, lo primero que vamos a hacer es incluir el nombre de nuestro dominio de manera que nuestro equipo lo resuelva a nuestra ip local. Esto lo haremos editando el fichero hosts, que se encuentra en la ruta /etc. Como el fichero hosts pertenece al superusuario de nuestro sistema, tenemos que editarlos como superusuario. Se puede hacer con algún editor visual. Nosotros en nuestro caso lo haremos desde la consola, con el comando vi (sudo vi /etc/hosts). Vemos que la primera línea es tal que:
127.0.0.1 localhost
La modificamos para que también contenga nuestro nuevo dominio. Para ello, lo escrbimos a continuación, separado por un espacio. Recordamos que un dominio no puede tener espacios.
127.0.0.1 localhost helloworld.ehidra.com
Una vez guardado, podemos comprobar que si escribimos nuestro nuevo dominio en el navegador, nos mostrará la misma página de antes. Esto es porque nos dirige a nuestro propio equipo, al puerto 80 (default), que es donde está escuchando Apache.
Nuestra web
Lo siguiente que vamos a hacer es crear nuestra primera web: helloWorld.html. Para ello, nos vamos a la ruta donde se alojan las páginas que lee Apache, que es /var/www/html. En esta ruta, creamos un subdirectorio que se llame helloworldProject, y dentro de él, un fichero html que llamaremos helloWorld.html, y en el que escribiremos nuestro primero código:
<html>
<head></head>
<body>
<center>
<h1>Hello World, it's eHidra here.</h1>
</center>
</body>
</html>
A continuación, si escribimos la siguiente ruta en nuestro navegador, podremos ver el resultado:
helloworld.ehidra.com/helloWorldProject/helloWorld.html
Redirigir el dominio
Como nuestro dominio se llama helloworld, no queda muy bien que pongamos tantas veces helloworld en nuestra url. De hecho, lo ideal sería que el simple dominio redirigiera a la página que queremos mostrar, sin tener que poner subrutas ni nombre de ficheros. Para ello, lo que haremos será hacer que el dominio helloworld dirija directamente a la página helloworld.html de nuestro projecto, helloWorldProject.
Para esto, lo que vamos a hacer es configurar un servidor virtual (virtual host). Esto lo haremos según lo hemos visto antes: creando un fichero de configuración en la ruta /etc/apache2/sites-enabled. Si accedemos a dicha ruta, podremos comprobar que existe un fichero llamado 000-default.conf. Este contiene la configuración necesaria para que lo que hemos hecho anteriormente funcione. Pues lo que hacemos es duplicar este archivo y renombrar la copia a 000-helloworld.conf.
sudo cp 000-default.conf 000-helloworld.conf
A continuación, lo editamos, dejandolo de la manera siguiente:
<VirtualHost *:80>
ServerName helloworld.ehidra.com
ServerAdmin webmaster@localhost
DocumentRoot /var/www/helloWorldProject
DirectoryIndex helloWorld.html
ErrorLog ${APACHE_LOG_DIR}/helloworld_error.log
CustomLog ${APACHE_LOG_DIR}/helloworld_access.log combined
</VirtualHost>
Con la propiedad ServerName, le estamos indicando a Apache que esta regla es efectiva para las peticiones cuyo dominio sea el nuestro. Con la propiedad DocumentRoot, le decimos en qué ruta están alojados los ficheros de esta web, y con la propiedad DirectoryIndex, le indicamos cuál es el fichero por defecto que tiene que cargar si no va uno especificado. Nos queda mover el directorio de nuestro proyecto al directorio padre, /var/www, de manera que cada proyecto nazca de un subdirectorio en esta misma.
sudo mv /var/www/html/helloWorldProject/ /var/www/helloWorldProject
Para que estos cambios tengan efecto, reiniciamos el servicio apache2 (sudo service apache2 restart), y a continuación, accediendo a helloworld.ehidra.com…
PHP
Hasta ahora, lo que hemos hecho es montar un servidor web local, donde podemos alojar un proyecto estático (html), pero no podemos crear páginas dinámicas. Para poder hacer esto, usaremos el lenguaje de programación PHP. Lo primero que hacemos es instalarlo:
$ sudo apt-get install php7.0 php7.0-curl php7.0-json snmp libapache2-mod-php7.0
Esta orden instala los paquetes de PHP más comunes. Hemos omitido uno muy común que es el paquete de mysql, por estar fuera del tema del post. Tendremos que tratarlo más adelante. Lo que sí hemos instalado es el paquete de apache2 de php. Esto lo trataremos más adelante en este post.
A continuación, vamos a darle dinamismo a nuestra página principal, helloWorld.html. Lo primero que vamos a hacer es renombrarla a helloWorld.php. También, tenemos que cambiar el fichero de configuración 000-helloworld.conf, de manera que el DirectoryIndex sea ahora helloWorld.php.
Una vez hecho esto, editamos el fichero helloWorld.php, introduciendo las siguientes líneas tras la línea <h4>Hello World…</h4>:
<?php
phpinfo();
?>
Tras hacer esto, reiniciamos el servicio apache2, y si accedemos a nuestro dominio de nuevo:
Aislar el entorno de trabajo
Ahora bien, hemos hecho todo esto sobre las rutas y directorios propios de cada una de nuestras herramientas. Con esto, corremos el riesgo de que si un día tenemos que reinstalar el sistema operativo, o tenemos que crear el entorno en otro equipo, tendremos que ir recorriendo todas estas rutas para recopilar todo lo necesario. Nosotros creemos que es buena idea juntarlo todo en una ruta de desarrollo, la cual alojaremos en nuestra partición de /home.
Ejecutamos las siguientes instrucciones:
# Creamos los directorios tanto para los fuentes como para las configuraciones
$ mkdir -p $HOME/develop/helloWorldProject/sources
$ mkdir -p $HOME/develop/helloWorldProject/configuration/apache/sites
# Movemos nuestra carpeta con nuestro fuente, al nuevo directorio.
$ sudo mv /var/www/helloWorldProject $HOME/develop/helloWorldProject/sources
# Creamos un enlace virtual al nuevo directorio de fuentes alojado en la ruta donde lee apache
$ sudo ln -sfd $HOME/develop/helloWorldProject/sources /var/www/helloWorldProject
# Repetimos los pasos para la configuración
$ sudo mv /etc/apache2/sites-enabled/000-helloworld.conf $HOME/develop/helloWorldProject/configuration/apache/sites
$ sudo ln -sf $HOME/develop/helloWorldProject/configuration/apache/sites/000-helloworld.conf /etc/apache2/sites-enabled/000-helloworld.conf
# Cambiamos el usuario propietario del nuevo proyecto, cada uno el suyo
$ sudo chown -R usuario:grupo helloWorldProject
# Reiniciamos apache
$ sudo service apache2 restart
La única diferencia es que ahora tendremos todo unificado bajo un mismo directorio en nuestra partición /home, lo que facilitará por ejemplo añadirlo a algún repositorio de versionado, como SVN o Git. En resumen, el resultado es que al acceder al dominio, nos debería mostrar la misma página que antes.
IDE: desarrollar y depurar
El último tema que vamos a tratar en este post será la utlización de un IDE y de un depurador (debugger). En este caso usaremos PhpStorm y xdebug respectivamente. Comenzamos instalando el segundo:
$ sudo apt-get install php-xdebug
Tras esto, copiamos el fichero de configuración a las configuraciones de los distintos servicios PHP.
$ sudo ln -sf /etc/php/7.0/mods-available/xdebug.ini /etc/php/7.0/cli/conf.d/20-xdebug.ini
$ sudo ln -sf /etc/php/7.0/mods-available/xdebug.ini /etc/php/7.0/apache2/conf.d/20-xdebug.ini
Después de esto, reiniciamos el servicio de apache2.
A continuación, instalamos el PhpStorm, el cual nos lo podemos descargar desde la página de su fabricante, http://www.jetbrains.com/phpstorm/. Una vez descargado, lo descomprimimos donde queramos. En nuestro caso, lo hemos colocado en la ruta $HOME/develop. Lo ejecutamos, y, desde el menú principal, abrimos la carpeta de nuestro proyecto, en nuestro caso, $HOME/develop/helloWorldProject/sources.
Por último, nos queda por configurar PHP como intérprete, el servidor al que va a escuchar, y la configuración de debug, tal y como se puede ver en las sucesivas imágenes:
Una vez que tenemos todo configurado, abrimos el fichero helloWorld.php en el editor, y ponemos un punto de parada en la llamada a la instrucción phpinfo(). A continuación, hacemos click en la parte superior derecha del editor, en el botón de debug , el cual ejecutará una llamada a nuestro dominio desde el navegador que hemos configurado, en nuestro caso, Firefox. Veremos cómo la ejecución se para en el punto de ruptura, pudiendo ver las variables (en caso de existir), la pila de llamadas, etc.
Como conclusión, podemos decir que tenemos listo nuestro entorno Apache + PHP + xdebug. Esperamos que nuestro post os haya servido de ayuda. Ya sabéis, dudas, comentarios, sugerencias… estaremos al tanto. Nos vemos en nuestra próxima guía de aprendizaje.
