Estructurando y definiendo un mecanismo de deploy para una aplicación web basada en AngularJS + Symfony2

we-deploy

Queremos desarrollar una aplicación web haciendo uso de AngularJS en el frontend y Symfony2 en el backend. Para facilitarnos la vida buscaremos:

  • Emplear una estructura de directorios donde conviva el código del frontend y del backend.
  • Configurar la aplicación para funcionar tanto en el entorno de desarrollo como en el de producción.
  • Usar una herramienta que nos permita automatizar el deploy y otras tareas (minificación, optmización de imágenes, transpilar de SASS a CSS, etc)

La aplicación de ejemplo para este artículo está en este repositorio, y una versión live en este enlace.

Veamos una propuesta para cada uno de estos puntos.

Estructura de directorios

Optaremos por usar Gulp para automatizar nuestras tareas durante el desarrollo. Por ello usaremos un directorio con las fuentes en src/, que será nuestro directorio de trabajo para el desarrollo fontend (AngularJS), y un directorio, build/, donde nuestras tareas almacenarán el código e imágenes transformadas desde src/. El código de la parte de backend (Symfony2) estará localizado en build/api. Después definiremos una tarea de deploy que subirá el contenido de build/ hacia nuestro servidor de producción.

La siguiente figura muestra esta estructura:

Screenshot - 220315 - 19:01:47

Vemos como el contenido de src y build responden a una estructura típica de aplicación en AngularJS y que el contenido de build/api representa lo propio para una aplicación en Symfony2.

Configuración frontend y backend en desarrollo y producción

Suponemos las siguientes diferencias entre la aplicación corriendo en el frontend y el backend:

  • La ruta con respecto al servidor local y el remoto.
  • El punto de acceso para acceder a la aplicación backend en Symfony (./web/app_dev.php./web/app.php)
  • Optimización de la aplicación Symfony2 para entorno de produccción.

El segundo punto lo solventamos sustituyendo el .htaccess de /api.

El primer punto afecta al backend en las rutas asociadas a los controladores de la aplicación Symfony, esto podemos controlarlo configurando apropiadamente api/app/config/routing.ymlapi/app/config/routing_dev.yml.

Para el frontend, los enlaces que manejemos estarán en función de una URL base la cual podemos introducir de forma cómoda dentro de nuestra aplicación Angular vía module.constant. Este método permite introducir variables dentro de un servicio accesible desde cualquier parte de la aplicación. Para alternar la información a introducir en dicho servicio podemos leer los datos de un archivo externo, así, definimos un archivo distinto para producción y desarrollo, cada uno con la URL base correspondiente.

Para el tercer punto tenemos en cuenta la omisión de los componentes contenidos en api/vendor/ al hacer el deploy y la ejecución de composer en el servidor optimizando el autoloader para producción. Esto lo conseguimos ejecutando php composer.phar install –no-dev –optimize-autoloader.

Estas tareas podemos automatizarlas mediante Gulp, tal como veremos en el siguiente punto.

Uso de Gulp para automatizar tareas

Tal como vimos en este artículo, Gulp nos permite automatizar tareas. Podemos encontrar una serie de tareas comunes en el contexto de este artículo usando Gulp en el código de este repositorio.

La siguiente figura muestra estas tareas:

Screenshot - 220315 - 23:48:45

 

 

 

 

 

 

 

 

A continuación el código de gulpfile.js:

Podemos ver la implementación de las tareas relativas al deploy en las que hacemos lo siguiente:

  • Preparar la ruta remota para el upload (eliminando su contenido); tarea deploy:clean
  • Upload de archivos vía ftp; tarea deploy:uploadAll
  • Upload y copia de archivos de configuración para producción; tareas deploy:uploadConfigs y deploy:copyConfigs
  • Ejecución de composer y preparación del caché de Symfony2 vía SSH; tarea deploy:runComposer

Acerca de

Ver todas las entradas de

One Response

  1. Angularjs Training In Hyderabad dice

    thanks for sharing information,nice article