Publicación de aplicaciones Angular en IIS (Internet Information Services) incluso con rutas

La publicación de una aplicación creada con Angular en IIS (Internet Information Services) es una tarea sencilla, simplemente se debe compilar esta para producción y copiar los archivos a la carpeta de IIS. En esta publicación se explicarán los pasos necesarios para realizar esto.

Compilación de la aplicación Angular

El primer paso para la publicación de una aplicación Angular en ISS es construir esta para producción. Si no se va a publicar la aplicación en la raíz del dominio es necesario indicar al compilador cuál será la URL base de la aplicación. Para ello se tiene que usar el comando ng build seguido de la opción --prod para indicar que se está preparando la aplicación para producción y --bare-href seguido de la URL base. Para una aplicación que se publicará en la ruta /ejemplo/ el comando a ejecutar en la terminal será el siguiente

ng build --prod --base-href=/ejemplo/

Lo que creará en la carpeta dist del proyecto una nueva carpeta llamada ejemplo con todos los recursos del proyecto.

Copiar la aplicación a IIS

Una vez creada la versión para producción de la aplicación, se debe copiar la carpeta resultante a la ruta de acceso física de IIS. En la instalación por defecto la ruta es C:\inetpub\wwwroot, pero esta puede ser diferente. Para comprobar la ubicación se abrir el Administrador de Internet Information Services (IIS) y en el sitio donde se desea publicar pulsar sobre la opción Configuración básica…

Lo que debería mostrar una venta como la siguiente en la que se puede ver y modificar la ruta física al servidor seleccionado.

En donde se puede ver que la ruta es %SystemDrive%\inetpub\wwwroot, donde %SystemDrive% es una variable en la que está el disco del sistema (por defecto C).

Ejecutar la aplicación en IIS

Una vez copiada la carpeta, ya se puede acceder a la aplicación desde un navegador. Simplemente se debe escribir el nombre del servidor seguido de la aplicación. En el caso de acceder desde la propia máquina se puede usar la ruta http://localhost/ejemplo/ para ver la aplicación funcionando.

Aplicaciones Angular con rutas en IIS

En el caso de que la aplicación Angular se usen rutas lo normal es que al intentar acceder a una ruta aparezca un fallo 404 debido a que IIS no encuentra el archivo.

Esto sucede porque no existe un archivo HTML en la ruta indicada y es necesario indicar a IIS que debe redirigir todas las solicitudes al punto de entrada de la aplicación Angular. Lo que se puede solucionar configurando las reglas de reescritura en el web.config de la aplicación. Un ejemplo de este archivo puede ser el que se muestra a continuación.

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/ejemplo-rutas/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Dado que el archivo hace una redirección es necesario tener instalado en IIS el complemento URL Rewrite. Un complemento que se ha usado previamente para publicar aplicaciones Node en IIS y redirigir las peticiones HTTP a HTTPS en IIS de forma automática. Ahora, si se copia el archivo a la raíz de la aplicación, y se modifica la ruta a la raíz de la aplicación en la línea 11 del archivo, se puede ver que IIS ya la funcionan las rutas de forma correcta.

Conclusiones

En esta publicación se ha visto como aplicaciones Angular en IIS, incluso cuando estas unas rutas. Un proceso que es relativamente sencillo y se puede llevar a cabo de una forma rápida y sencilla. Siendo incluso un proceso fácil de automatizar.

Imagen de Joshua Woroniecki en Pixabay