Prepara Ubuntu (u otra distro) para el desarrollo web

Más allá de los mitos, de las creencias o la opinión de que GNU/Linux es complicado de usar, considero que es un excelente Sistema Operativo para aquellos que son desarrolladores, sobre todo desarrolladores web.

He tenido la oportunidad de conversar con muchas personas que prefieren OS X e incluso Windows para desarrollar, según dicen, por su facilidad y sus herramientas, y aunque es una opinión muy individual de cada quién creo que cualquier distribución de GNU/Linux o al menos las más populares, ofrecen todo lo necesario para instalar y trabajar.

[quote]Las distribuciones más populares ofrecen todos los paquetes necesario en sus repositorios para un desarrollador web.[/quote]

Ahora, en el tema del desarrollo hay un dilema ¿es mejor una distribución muy actualizada como Antergos o una que mantenga un equilibrio entre estable y actualizado como Ubuntu?

Pongo un ejemplo muy simple, mientras que en Ubuntu Trusty la última versión de Netbeans es la 7.0.1, en ArchLinux está disponible la versión 8.0.2. Lo mismo sucede con NodeJS y otros paquetes que veremos a continuación que son muy usados por los FrontEnd.

Como sea, es decisión de cada cual escoger la distribución de su preferencia según el trabajo a desarrollar. Para este artículo, partiremos de una instalación de Ubuntu, y como está enfocado en nuevos usuarios, mostraremos el proceso paso a paso.

Instalar Ubuntu 14.04

Lo primero que haremos será bajarnos la imagen de instalación de Ubuntu desde su sitio web oficial. El enlace que viene a continuación les permitirá escoger si desea descargar un iso para 32 bits o 64 bits.

Una vez que lo descarguemos debemos «quemar» un DVD con el iso descargado o preparar una memoria Flash para arrancar e instalar desde ella. En Windows podemos hacerlo siguiendo esta guía y en Mac esta otra. Una vez hecho esto reiniciamos la PC y arrancamos por la memoria o el DVD.

Pasos de instalación de Ubuntu 14.04

Lo primero es seleccionar el idioma con el que queremos instalar Ubuntu:

Después veremos si tenemos todos los requisitos necesarios para la instalación:

Posteriormente pasamos al particionado del disco duro. Si no tiene experiencia con esto, es preferible que lo deje todo por defecto una vez que hayan hecho un respaldo de sus datos.

Escogemos la zona horaria:

Escogemos el idioma de nuestro teclado:

Definimos nuestro usuario, el nombre de nuestro ordenador, nuestra contraseña:

Y esperamos a que termine:

Una vez que el instalador termine, reiniciamos el ordenador y entramos por nuestra sesión. Podemos ejecutar el Gestor de Actualizaciones o abrir un terminal y poner:

$ sudo apt update && sudo apt upgrade

Y si no hay nada que actualizar, ya podemos empezar.

Preparando nuestro espacio de trabajo para pruebas

Entonces, como somos desarrolladores solo nos queremos enfocar en lo que sabemos hacer: desarrollar. No nos interesa saber como configurar un servidor web, ni como funciona una base de datos, solo queremos algo que funcione y que sea fácil de implementar para comenzar a escribir código.

Si solo tuviésemos que escribir en HTML, CSS, JS todo sería más simple, pero a veces debemos tener un servidor de pruebas para código en PHP, Ruby, DJango, etc.. Por lo tanto lo más recomendable es montar nuestro propio servidor web. Por suerte para nosotros tenemos esa facilidad de dos formas diferentes:

1. Usando el instalador de XAMPP que nos provee Apache.
2. Usando LAMP Bitnami.

Instalando Bitnami

La instalación de LAMP vía Bitnami ya la vimos en un artículo anterior, por lo tanto no será necesario abordarla en este artículo. Una vez instalado Bitnami podremos gestionar nuestro servidor de pruebas mediante el navegador web.

Toda la documentación necesaria sobre el funcionamiento de Bitnami la encontramos en su wiki.

Instalación de XAMPP

El instalador de XAMPP también viene de la mano de Bitnami, pero el proceso de instalación es un tanto diferente, por lo que lo veremos paso a paso. Lo primero claro está, es descargar el fichero que nos interesa según la arquitectura de nuestro procesador:

Una vez descargado abrimos un terminal y accedemos a la carpeta donde está el fichero, al cual le daremos permisos de ejecución. En el caso del fichero de 64 Bits sería:

$ sudo chmod a+x xampp-linux-x64-5.5.19-0-installer.run

Ahora en el mismo terminal lo ejecutamos:

$ sudo ./xampp-linux-x64-5.5.19-0-installer.run

Y seguimos los siguientes pasos.

En la imagen anterior nos preguntaba si queríamos instalar los ficheros para desarrolladores y en la posterior, si estamos de acuerdo con la selección que escogimos.

Ahora nos pregunta la ruta donde queremos instalar (por defecto es en /opt/lampp), y aunque podemos cambiarla, recomiendo dejarlo como está.

Un paso más de comprobación antes de comenzar a instalar

Instalando XAMPP

Instalación completada.

Ahora bien, para iniciar XAMPP solo debemos ejecutar:

$ sudo /opt/lampp/lampp start
Starting XAMPP for Linux 5.5.19-0...
XAMPP: Starting Apache...ok.
XAMPP: Starting MySQL...ok.
XAMPP: Starting ProFTPD...ok.

Y ya tenemos de esta forma nuestro servidor Apache + MySQL + PHP + Perl funcionando. Si presentan algún problema, les recomiendo que visiten las FAQ.

DNS personalizado y Host Virtual con XAMPP

Suponiendo que en nuestro servidor de pruebas tengamos alojados varios sitios, podemos establecer cada uno de ellos para que se vea de forma local en el fichero /etc/hosts. Pongamos un ejemplo, digamos que tenemos el sitio dev.pruebas.com, lo que hacemos es abrir el fichero /etc/hosts con nuestro editor de texto favorito (y como root) y añadirlo de la siguiente forma:

$ sudo vim /etc/hosts

y añadimos la línea:

127.0.0.1   dev.prueba.com

Pero como es lógico esto no es suficiente, pues tenemos que decirle a Apache que cuando alguien haga una petición a dev.prueba.com por la 127.0.0.1, tiene que devolver nuestro sitio de pruebas.

Editamos el fichero /opt/lampp/etc/httpd.conf

$ sudo vim /opt/lampp/etc/httpd.conf

y descomentamos (quitando el símbolo de número) la línea que dice:

# Include etc/extra/httpd-vhosts.conf

y la dejamos así:

Include etc/extra/httpd-vhosts.conf

Ahora vamos al fichero /opt/lampp/etc/extra/httpd-vhosts.conf que debe tener algo como esto:

# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.4/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any  block.
#

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/opt/lampp/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error_log"
    CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/opt/lampp/docs/dummy-host2.example.com"
    ServerName dummy-host2.example.com
    ErrorLog "logs/dummy-host2.example.com-error_log"
    CustomLog "logs/dummy-host2.example.com-access_log" common
</VirtualHost>

Lo modificamos y lo dejamos de esta forma:

# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.4/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any  block.
#
 
<VirtualHost my_blog.dev:80> 
    DocumentRoot "/home/ruta/carpeta/proyecto/" 
    ServerName my_blog.dev 
</VirtualHost> 
<Directory "/home/ruta/carpeta/proyecto/">
        Require all granted 
</Directory>

Como es lógico, la ruta hacia la carpeta de nuestro proyecto debe especificarse al reemplazando «/home/ruta/carpeta/proyecto/».

Instalación Manual de LAMP

Ahora bien, aunque no lo parezca, creo que es más engorroso hacer la instalación de la forma anterior que instalando los paquetes directamente de nuestros repositorios. Para tener el mismo Stack en nuestro PC solo debemos abrir un terminal y poner:

$ sudo apt install apache2 mysql-server-5.5 phpmyadmin

Con estos 3 paquetes solamente, se instalarán las dependencias necesarias para comenzar a trabajar con lo mínimo requerido a la hora de desarrollar.

DNS personalizado y Host Virtual con LAMP

Por la parte del DNS (Servidor de nombre de dominio) mantenemos todo igual, o sea, agregamos los nombres de nuestros sitios de pruebas en el fichero /etc/hosts. Ahora, en el caso de Apache, la ruta de los VHost (Host Virtuales) es diferente.

Normalmente lo que se hace es colocar lo que pusimos en el fichero /opt/lampp/etc/extra/httpd-vhosts.conf en la ruta /etc/apache2/sites-available/nombredelvhost.conf, y luego, se le hace un enlace simbólico a ese fichero en la carpeta /etc/apache2/sites-enabled/ pero no nos vamos a complicar. Pondremos directamente el fichero en /etc/apache2/sites-enabled/ con la siguiente configuración:

$ sudo vim /etc/apache2/sites-enabled/dev.prueba.com.conf
<VirtualHost my_blog.dev:80> 
    DocumentRoot "/home/ruta/carpeta/proyecto/" 
    ServerName my_blog.dev 
</VirtualHost> 
<Directory "/home/ruta/carpeta/proyecto/">
        Require all granted 
</Directory>

Creo que es válido aclarar que cuando instalamos manualmente, la ruta por defecto de las carpetas de los sitios webs es /var/www/http/.

Instalación de NodeJS y Ruby

Si usamos NodeJS o Ruby (en vez de PHP y Perl) podemos instalar manualmente los paquetes ejecutando en la consola:

$ sudo apt install nodejs ruby

Y si necesitan algún paquete más, solo tienen que buscarlo ejecutando el gestor de paquetes o en la consola:

$ sudo apt search paquete a buscar

Hasta esta parte ya tenemos lista la parte del lado del servidor para nuestro espacio de pruebas, ahora veamos algunas de las aplicaciones que podemos usar.

Herramientas para desarrollo Web

En los repositorios contamos con algunas aplicaciones que nos permitirán trabajar cómodamente cuando se trata de HTML, CSS, JS y demás.  Entre ellas tenemos:

• Bluefish
• Geany
• Gedit
• Kate

Siendo BlueFish (a mi parecer) la más completa cuando se trata de trabajo FrontEnd, pero yo recomiendo instalar aplicaciones de terceros que nos ofrecen muchas más funcionalidades. Tenemos por ejemplo a Brackets, SublimeText o Komodo-Edit. Todas estas aplicaciones tienen su propio paquete de instalación para Ubuntu, excepto Komodo-Edit, el cual solo hay que descomprimirlo y ejecutar un fichero .sh.

(… en proceso …)