Deploy Angular App a IIS

Preparar entorno para el deploy

Instalar URL Rewrite:

Link de descarga

Agregar Nuevo Sitio Web

Aparecerá la siguiente pantalla:

• Coloca el nombre del sitio
• La ruta donde se almacenarán los archivos de la publicación del proyecto
• Y por último, el puerto. Y "Aceptar"

Agregar Aplicación

Saldrá la siguiente pantalla

• Colocas el Alias
• La ruta de acceso al directorio donde irán los archivos de la publicación del proyecto.
• Por último, "Aceptar"

Deberás ver tu sitio y tu aplicación:

Si ya se realizó la instalación del URL Rewrite. Deberá verse la opción dentro del Administrador IIS:

Ahora el entorno está listo.

Preparar el proyecto Angular y hacer el Deploy a IIS

Dentro del directorio src debe crear un archivo web.config Que resolverá las rutas de la APP.

web.config

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
      <clear /> <!-- Imperative Step, otherwise IIS will throw err -->
        <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="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

imagen de referencia

Ese mismo archivo, deberá ir en el build de la app. Por lo que hay que indicarlo. Esto se hace dentro del archivo angular.json dentro del arreglo de assets:[]

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/web.config"
]

Generar build de la aplicación

En este caso, se hace un build para usar en el entorno de producción. Pero también puede ser para desarrollo.

Muy importante indicar la subcarpeta donde éste estará alojado con el flag --base-href. También hay que destacar que debe colocarse el nombre de la aplicación que está dentro del sitio que se creó al inicio. En la sección de preparación del entorno para el deploy. En este caso, la app se le llamó "NuevoProyecto"

producción

ng build --configuration=production --base-href "/NuevoProyecto/"

Al ejecutar el comando genera la carpeta dist y dentro otro directorio con el nombre del proyecto. Y dentro el publish que irá en el directorio que se creó al preparar el entorno en IIS.

Copiar los archivos que están en el dist y guardar en /nuevo-sitio

📂 C:
├─ 📂 inetpub
     ├─ 📂 wwwroot
          ├─ 📂 nuevo-sitio

En IIS levantar el servicio del sitio:

Después de eso, abrir la app.

Imagen de portada, de tommy pixel en Pixabay