Angular en Apache: Desplegando la aplicación

Para desplegar una aplicación Angular en Apache, es necesario hacer unos ajustes en este servidor web. Esto es debido a la manera de funcionar Angular y las peticiones HTTP que se realizan durante su ejecución.

Lo primero, sería generar una versión de producción del proyecto Angular, que será la que se despliegue en el servidor que utilicemos, en este caso Apache. Para ello, hay que ir a la carpeta raíz donde se encuentre el proyecto y lanzar la siguiente instrucción.

ng build --prod

Esto creará un directorio llamado dist. Este directorio ya está optimizado para ser una versión de producción y el contenido del mismo será el que tendrás que copiar en el servidor Apache.

Lo siguiente para desplegar la aplicación Angular en Apache, sera configurar Apache para servir rutas a index.html. Para esto hay dos alternativas: configurar el virtual host o bien, crear un fichero .htaccess  con la configuración en el mismo directorio donde hemos copiado los ficheros generados para producción.

Opción 1: Virtual Host

Si se elige esta opción, habrá que añadir unas líneas similares a estas en la configuración de Apache. Hay que tener en cuenta que debe configurarse el puerto, el nombre del servidor y la ruta de la aplicación.

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html
        # to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

Opción 2: .htaccess

Esta segunda opción pasa por crear un fichero llamado .htaccess en el mismo directorio de la aplicación con el siguiente contenido. Esta configuración sólo afectará al directorio donde se cree este fichero, así como en sus subdirectorios siempre y cuando no haya otro fichero .htaccess.

Puede ser una buena solución para no interferir en otros directorios que puedan contener otras aplicaciones o páginas web donde no sea necesario configurar esto.

<IfModule mod_rewrite.c>
    RewriteEngine on

    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # Rewrite everything else to index.html
    # to allow html5 state links
    RewriteRule ^ index.html [L]
</IfModule>