DEV Community

Cover image for Deploy Angular App a IIS
Daniel Mezagini
Daniel Mezagini

Posted on • Updated on

Deploy Angular App 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 /> <!-- 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>


Enter fullscreen mode Exit fullscreen mode

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"
]


Enter fullscreen mode Exit fullscreen mode

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/"


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

En IIS levantar el servicio del sitio:

Untitled (7)

Después de eso, abrir la app.

Untitled (9)

Untitled (8)

Imagen de portada, de tommy pixel en Pixabay

Top comments (2)

Collapse
 
luissotoj profile image
Luis Eduardo Sotoj
Collapse
 
mezagini profile image
Daniel Mezagini