Desarrollo Web en Ubuntu: Apache y PHP

/, Guías de aprendizaje, Sin categorizar/Desarrollo Web en Ubuntu: Apache y PHP

Desarrollo Web en Ubuntu: Apache y PHP

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

Instalar Apache UbuntuLo primero que vamos a hacer es instalar un servidor.  Empezaremos por Apache, que es el más normal.  Para ello, abrimos una ventana de terminal y escribimos el siguiente comando:

$ 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.

apache_default_pageComo 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 servidorPor 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

helloworld_defaultUna 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

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…

helloworld_redirect

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:

helloworld_phpEsto es información sobre el php que hemos instalado.  Esto quiere decir que ya está funcionando, y que nuestro servidor procesa páginas dinámicas php.

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

xdebug_iniEditamos el fichero /etc/php/7.0/mods-available/xdebug.ini, de manera que nos quede de la siguiente manera:

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:

phpstorm_interpreter

phpstorm_server

  phpstorm_debug_conf

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.

phpstorm_start_debug

phpstorm_breakpoint

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.

Por | 2016-08-29T11:36:21+00:00 agosto 29th, 2016|Blog, Guías de aprendizaje, Sin categorizar|3 Comentarios

About the autor:

Estudió Ingeniería Informática en la Universidad de Sevilla y llega a eHidra tras el paso por varias empresas del sector privado como desarrollador.

3 Comments

  1. Ricardo Flores 7th noviembre 2016 en 2:01 pm - Responder

    Realmente muy bueno y fácil de comprender para alguien que recién esta empezando con Ubuntu, me gustaria que continuaran con la configuración de mysql. Muchas gracias.

    • Manuel Gallego 8th noviembre 2016 en 9:38 am - Responder

      Hola Ricardo,

      en primer lugar, agradecerle el comentario y ni que decir tiene que nos alegramos de que le haya servido. El post sobre la instalación y configuración de MySql lo tenemos pendiente, y en breve esperamos tenerlo publicado. No deje de estar atento a nuestras publicaciones, tanto en la web como en nuestros perfiles de las redes sociales.

  2. […] : Esto es información sobre el php que hemos instalado. How to install a phpbb forum Esto quiere decir que ya está funcionando, y que nuestro servidor procesa páginas dinámicas php. How to install phpmyadmin on ubuntu Aislar el entorno de trabajo Ahora bien, hemos hecho todo esto sobre las rutas y directorios propios de cada una de nuestras herramientas. Test php install 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. Install iis php Nosotros creemos que es buena idea juntarlo todo en una ruta de desarrollo, la cual alojaremos en nuestra partición de /home. $ 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 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. Install php4 En resumen, el resultado es que al acceder al dominio, nos debería mostrar la misma página que antes. Install light switch 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). Java install did not complete error 1603 En este caso usaremos PhpStorm y xdebug respectivamente. Php ksort Comenzamos instalando el segundo: Tras esto, copiamos el fichero de configuración a las configuraciones de los distintos servicios PHP. Editamos el fichero /etc/php/7.0/mods-available/xdebug.ini, de manera que nos quede de la siguiente manera: A continuación, instalamos el PhpStorm, el cual nos lo podemos descargar desde la página de su fabricante, http://www.jetbrains.com/phpstorm/. How to install php for windows Una vez descargado, lo descomprimimos donde queramos. Ubuntu install php En nuestro caso, lo hemos colocado en la ruta $HOME/develop. Install zagg invisible shield 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(). Install php mail 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. How to install php in windows 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. Php install centos 7 Esperamos que nuestro post os haya servido de ayuda. Ubuntu install php7 Ya sabéis, dudas, comentarios, sugerencias… estaremos al tanto. Install opera mini Nos vemos en nuestra próxima guía de aprendizaje. Site: https://www.ehidra.es/2016/08/29/desarrollo-web-en-ubuntu-apache-y-php/ […]

Deje su comentario