Manejo de dominios en ambientes de desarrollo

Standard

Hola a todos, espero se encuentren muy bien y preparados para disfrutar sus próximas mini-vacaciones.

En este post abordaremos un tema que a veces nos causa problema al momento de deployar nuestras aplicaciones.

Usualmente como desarrolladores manejamos al menos dos ambientes, uno para producción y otro para desarrollo/pruebas. Cada uno de estos ambientes tiene su objetivo. En desarrollo siempre buscamos desarrollar las nuevas funcionalidades y muchas veces (aunque no recomendable) tareas de testing. En producción buscamos solamente tener versiones estables del desarrollo, características ya probadas y validadas.

Sin embargo sucede muy a menudo que cuando hacemos el paso entre un ambiente y otro, funcionalidades o pantallas empiecen a fallar por la simple y sencilla razón que cuando las desarrollamos utilizamos rutas de localhost, 127.0.0.1 o alguna ruta que solo va a estar disponible en nuestro ambiente de desarrollo y no en un ambiente de producción. Una forma de resolver esto es la que les comentare el día de hoy.

Hoy que he empezado a desarrollar aplicaciones que van a manejar API’s en forma, tuve la necesidad de configurar un ambiente de desarrollo más adecuado para poder realizar las peticiones como si se estuvieran haciendo a dominios, y no a una ruta con localhost. La aplicación será desarrollada en varias tecnologías, con Ruby on Rails como la tecnología definida para API’s y AngularJS para el front-end de la aplicación.

Esta configuración la realice en un equipo iMac con mac os x “El Capitan”, con Apache WebServer instalado para poder configurar Virtual hosts:

Para esto lo primero que tenemos que hacer es modificar nuestro archivo hosts

    sudo nano /etc/hosts

y agregamos los nombres de dominio que utilizaremos:

127.0.0.1        api.dominio.com
127.0.0.1        dominio.com

Lo siguiente que realizaremos es habilitar el módulo de rewrite en nuestro servidor apache, asegurarnos que las líneas de proxy_pass no estén comentadas y descomentar la línea que incluye el archivo de virtual hosts en el archivo de configuración de apache /etc/apache2/httpd.conf:

LoadModule rewrite_module libexec/apache2/mod_rewrite.so
LoadModule proxy_module /usr/lib/apache2/modules/mod_proxy.so
LoadModule proxy_http_module /usr/lib/apache2/modules/mod_proxy_http.so
 
Include /private/etc/apache2/extra/httpd-vhosts.conf

Ahora que hemos habilitados los módulos, declararemos los virtual hosts.

        ServerAdmin webmaster@localhost
        DocumentRoot 
        ServerName dominio.com
        ServerAlias dominio.com
        ServerAdmin webmaster@localhost
        ServerName api.dominio.com
        DocumentRoot 
 
        ProxyPreserveHost On
        AllowEncodedSlashes Off
 
 
                Order deny,allow
                Allow from all
                Require all granted
                ProxyPassReverse http://127.0.0.1:3000
                ProxyPassReverse http://api.dominio.com/
 
 
        RewriteEngine on
        RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_FILENAME} !-f
        RewriteRule .* http://127.0.0.1:3000%{REQUEST_URI} [P,QSA]

La aplicación de RoR, que recibe las peticiones REST no nos debería de dar mayor problema, solo tendríamos que iniciarla y reiniciar apache para que funcionara. Sin embargo, la aplicación de angular les recomendaría que la manejaran como un symbolic link en la carpeta default donde están los sitios (en la mayoría de los casos si no se ha modificado es /Library/WebServer/Documents)

cd /Library/WebServer/Documents/
sudo ln -s  angularapp

Sin embargo, aún tenemos que dar permisos a la ruta donde están nuestros archivos, de lo contrario, nos denegara el acceso con un código 403. Para realizar esto haremos tenemos que hacerlo sobre toda la ruta de los archivos, que suponiendo que se encuentre en una carpeta llamada projects dentro de nuestra carpeta home sería algo como lo siguiente:

sudo chmod o+x /Users /Users/ /Users//projects /Users//projects/angularapp

Por ultimo solo nos restaría iniciar/reiniciar nuestro servidor apache

sudo apachectl -e info -k [start | restart]

Ahora abrimos nuestro navegador y en la barra de direcciones entramos a la dirección que dimos de alta y el sitio responderá como si estuviera hosteado en algún servidor

menulogin

Espero esto les sea de ayuda en sus futuros desarrollos, esto es bueno hacerlo cuando queremos un desarrollo lo más apegado a un ambiente de diario, sin usar rutas como localhost o un 127.0.0.1 en nuestras direcciones.

Hasta la próxima, disfruten de los próximos días libres!

Leave a Reply

Your email address will not be published. Required fields are marked *