1

Subir aplicación en Angular a IIS

Preparar entorno para el deploy


Instalar URL Rewrite:

Link de descarga

Agregar Nuevo Sitio Web

Untitled

Aparecerá la siguiente pantalla:

Untitled (1)
  • 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

Untitled (2)

Saldrá la siguiente pantalla

Untitled (3)
  • 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:

Untitled (4)

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

Untitled (5)

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 /><rulename="AngularRoutes"stopProcessing="true"><matchurl=".*" /><conditionslogicalGrouping="MatchAll"><addinput="{REQUEST_FILENAME}"matchType="IsFile"negate="true" /><addinput="{REQUEST_FILENAME}"matchType="IsDirectory"negate="true" />
          conditions>
          <actiontype="Rewrite"url="/" />
        rule>
      rules>
    rewrite>
  system.webServer>
configuration>

Untitled (6)

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

ngbuild --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:

Untitled (7)

Después de eso, abrir la app.

Untitled (9)Untitled (8)

Escribe tu comentario
+ 2